Make link hitbox take up full width

This commit is contained in:
Svilen Markov 2025-03-30 14:53:59 +01:00
parent 0e0aca3844
commit d4d9e94f44

View File

@ -3,43 +3,41 @@
{{- define "widget-content" }} {{- define "widget-content" }}
<ul class="dynamic-columns list-gap-20 list-with-separator"> <ul class="dynamic-columns list-gap-20 list-with-separator">
{{- range .Containers }} {{- range .Containers }}
<li> <li class="docker-container flex items-center gap-15">
<a href="{{ .URL | safeURL }}" class="docker-container flex items-center gap-15" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer"> <div class="shrink-0" data-popover-type="html" data-popover-position="above" data-popover-offset="0.25" data-popover-margin="0.1rem" data-popover-max-width="400px" aria-hidden="true">
<div class="shrink-0" data-popover-type="html" data-popover-position="above" data-popover-offset="0.25" data-popover-margin="0.1rem" data-popover-max-width="400px" aria-hidden="true"> <img class="docker-container-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy">
<img class="docker-container-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy"> <div data-popover-html>
<div data-popover-html> <div class="color-highlight text-truncate block">{{ .Image }}</div>
<div class="color-highlight text-truncate block">{{ .Image }}</div> <div>{{ .StateText }}</div>
<div>{{ .StateText }}</div> {{- if .Children }}
{{- if .Children }} <ul class="list list-gap-4 margin-top-10">
<ul class="list list-gap-4 margin-top-10"> {{- range .Children }}
{{- range .Children }} <li class="flex gap-7 items-center">
<li class="flex gap-7 items-center"> <div class="margin-bottom-3">{{ template "state-icon" .StateIcon }}</div>
<div class="margin-bottom-3">{{ template "state-icon" .StateIcon }}</div> <div class="color-highlight">{{ .Title }} <span class="size-h5 color-base">{{ .StateText }}</span></div>
<div class="color-highlight">{{ .Title }} <span class="size-h5 color-base">{{ .StateText }}</span></div> </li>
</li> {{- end }}
{{- end }} </ul>
</ul> {{- end }}
{{- end }} </div>
</div> </div>
</div>
<div class="min-width-0"> <div class="min-width-0 grow">
{{- if .URL }} {{- if .URL }}
<div class="color-highlight size-title-dynamic block text-truncate">{{ .Title }}</div> <a href="{{ .URL | safeURL }}" class="color-highlight size-title-dynamic block text-truncate" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
{{- else }} {{- else }}
<div class="color-highlight text-truncate size-title-dynamic">{{ .Title }}</div> <div class="color-highlight text-truncate size-title-dynamic">{{ .Title }}</div>
{{- end }} {{- end }}
{{- if .Description }} {{- if .Description }}
<div class="text-truncate">{{ .Description }}</div> <div class="text-truncate">{{ .Description }}</div>
{{- end }} {{- end }}
</div> </div>
<div class="margin-left-auto shrink-0" data-popover-type="text" data-popover-position="above" data-popover-text="{{ .State }}" aria-label="{{ .State }}"> <div class="margin-left-auto shrink-0" data-popover-type="text" data-popover-position="above" data-popover-text="{{ .State }}" aria-label="{{ .State }}">
{{ template "state-icon" .StateIcon }} {{ template "state-icon" .StateIcon }}
</div> </div>
<div class="visually-hidden" aria-label="{{ .StateText }}"></div> <div class="visually-hidden" aria-label="{{ .StateText }}"></div>
</a>
</li> </li>
{{- else }} {{- else }}
<div class="text-center">No containers available to show.</div> <div class="text-center">No containers available to show.</div>