Limit width of widgets

This commit is contained in:
Svilen Markov 2024-09-06 21:45:03 +01:00
parent 4476391287
commit 6b0a569998
3 changed files with 44 additions and 41 deletions

View File

@ -1206,7 +1206,6 @@ details[open] .summary::after {
flex-direction: column; flex-direction: column;
width: calc(100% / 12); width: calc(100% / 12);
padding-top: 3px; padding-top: 3px;
max-width: 30px;
} }
.weather-column-value, .weather-columns:hover .weather-column-value { .weather-column-value, .weather-columns:hover .weather-column-value {

View File

@ -1,27 +1,29 @@
{{ template "widget-base.html" . }} {{ template "widget-base.html" . }}
{{ define "widget-content" }} {{ define "widget-content" }}
<div class="flex justify-between items-center"> <div class="widget-small-content-bounds">
<div class="color-highlight size-h1">{{ .Calendar.CurrentMonthName }}</div> <div class="flex justify-between items-center">
<ul class="list-horizontal-text color-highlight size-h4"> <div class="color-highlight size-h1">{{ .Calendar.CurrentMonthName }}</div>
<li>Week {{ .Calendar.CurrentWeekNumber }}</li> <ul class="list-horizontal-text color-highlight size-h4">
<li>{{ .Calendar.CurrentYear }}</li> <li>Week {{ .Calendar.CurrentWeekNumber }}</li>
</ul> <li>{{ .Calendar.CurrentYear }}</li>
</div> </ul>
</div>
<div class="flex flex-wrap size-h6 margin-top-10 color-subdue"> <div class="flex flex-wrap size-h6 margin-top-10 color-subdue">
<div class="calendar-day">Mo</div> <div class="calendar-day">Mo</div>
<div class="calendar-day">Tu</div> <div class="calendar-day">Tu</div>
<div class="calendar-day">We</div> <div class="calendar-day">We</div>
<div class="calendar-day">Th</div> <div class="calendar-day">Th</div>
<div class="calendar-day">Fr</div> <div class="calendar-day">Fr</div>
<div class="calendar-day">Sa</div> <div class="calendar-day">Sa</div>
<div class="calendar-day">Su</div> <div class="calendar-day">Su</div>
</div> </div>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
{{ range .Calendar.Days }} {{ range .Calendar.Days }}
<div class="calendar-day{{ if eq . $.Calendar.CurrentDay }} calendar-day-today{{ end }}">{{ . }}</div> <div class="calendar-day{{ if eq . $.Calendar.CurrentDay }} calendar-day-today{{ end }}">{{ . }}</div>
{{ end }} {{ end }}
</div>
</div> </div>
{{ end }} {{ end }}

View File

@ -1,29 +1,31 @@
{{ template "widget-base.html" . }} {{ template "widget-base.html" . }}
{{ define "widget-content" }} {{ define "widget-content" }}
<div class="size-h2 color-highlight text-center">{{ .Weather.WeatherCodeAsString }}</div> <div class="widget-small-content-bounds">
<div class="size-h4 text-center">Feels like {{ .Weather.ApparentTemperature }}°{{ if eq .Units "metric" }}C{{ else }}F{{ end }}</div> <div class="size-h2 color-highlight text-center">{{ .Weather.WeatherCodeAsString }}</div>
<div class="size-h4 text-center">Feels like {{ .Weather.ApparentTemperature }}°{{ if eq .Units "metric" }}C{{ else }}F{{ end }}</div>
<div class="weather-columns flex margin-top-15 justify-center"> <div class="weather-columns flex margin-top-15 justify-center">
{{ range $i, $column := .Weather.Columns }} {{ range $i, $column := .Weather.Columns }}
<div class="weather-column{{ if eq $i $.Weather.CurrentColumn }} weather-column-current{{ end }}"> <div class="weather-column{{ if eq $i $.Weather.CurrentColumn }} weather-column-current{{ end }}">
{{ if $column.HasPrecipitation }} {{ if $column.HasPrecipitation }}
<div class="weather-column-rain"></div> <div class="weather-column-rain"></div>
{{ end }}
{{ if and (ge $i $.Weather.SunriseColumn) (le $i $.Weather.SunsetColumn ) }}
<div class="weather-column-daylight{{ if eq $i $.Weather.SunriseColumn }} weather-column-daylight-sunrise{{ else if eq $i $.Weather.SunsetColumn }} weather-column-daylight-sunset{{ end }}"></div>
{{ end }}
<div class="weather-column-value{{ if lt $column.Temperature 0 }} weather-column-value-negative{{ end }}">{{ $column.Temperature | absInt }}</div>
<div class="weather-bar" style='--weather-bar-height: {{ printf "%.2f" $column.Scale }}'></div>
<div class="weather-column-time">{{ index $.TimeLabels $i }}</div>
</div>
{{ end }} {{ end }}
{{ if and (ge $i $.Weather.SunriseColumn) (le $i $.Weather.SunsetColumn ) }} </div>
<div class="weather-column-daylight{{ if eq $i $.Weather.SunriseColumn }} weather-column-daylight-sunrise{{ else if eq $i $.Weather.SunsetColumn }} weather-column-daylight-sunset{{ end }}"></div>
{{ end }} {{ if not .HideLocation }}
<div class="weather-column-value{{ if lt $column.Temperature 0 }} weather-column-value-negative{{ end }}">{{ $column.Temperature | absInt }}</div> <div class="flex items-center justify-center margin-top-15 gap-7 size-h5">
<div class="weather-bar" style='--weather-bar-height: {{ printf "%.2f" $column.Scale }}'></div> <div class="location-icon"></div>
<div class="weather-column-time">{{ index $.TimeLabels $i }}</div> <div class="text-truncate">{{ .Place.Name }},{{ if .ShowAreaName }} {{ .Place.Area }},{{ end }} {{ .Place.Country }}</div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
{{ if not .HideLocation }}
<div class="flex items-center justify-center margin-top-15 gap-7 size-h5">
<div class="location-icon"></div>
<div class="text-truncate">{{ .Place.Name }},{{ if .ShowAreaName }} {{ .Place.Area }},{{ end }} {{ .Place.Country }}</div>
</div>
{{ end }}
{{ end }} {{ end }}