34mdh/hugo-theme
2
0
Fork 0
forked from jakub/jakubb-hugo
Code Pull Requests Activity

calendar imporvements

Browse Source 
- removed exessive margin from day numbers
- days with events now have JS click event that simulates clicking on
  the event
- event no longer has a seperate bg, cleaner look
This commit is contained in:
worktop 2024-03-08 13:01:24 -05:00
parent d107e7c97a
commit 90556d90b3
3 changed files with 88 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
layouts/shortcodes/cal_layout.html
View File

@ -1,3 +1,12 @@
<script>
function simulateLinkClick() {
var link = document.querySelector('.day a');
if (link) {
link.click();
}
}
</script>
{{ $date := now }}
{{ $month := $date.Month | int }}
@ -35,66 +44,7 @@
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>
<h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ range where $.Site.RegularPages "Section" "eq" "events" }}
{{ $eventStart := time.AsTime .Params.start_date }}
{{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
<div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a>
</div>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ $date := $date.AddDate 0 1 0 }}
{{ $month := $date.Month | int }}
{{ $year := $date.Year }}
{{ $t1 := printf "%4d-%02d-01" $year $month }}
{{ $t1 := time.AsTime $t1 }}
{{ $t2 := $t1.AddDate 0 1 0 }}
{{ $daysInMonth := $t2.Sub $t1 }}
{{ $daysInMonth := $daysInMonth.Hours }}
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
{{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}}
{{ $label := index $polish_month_names $month }}
<a class="month">{{ printf "%s %d" $label $year }}</a>
{{ else }}
<a class="month">{{ time.Format "January 2006" $t1 }}</a>
{{ end }}
<div class="weekdays" >
{{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
{{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
</div>
<div class="days">
{{ $padding := $t1.Weekday | int }}
{{ if gt $padding 0 }}
{{ range seq 1 $padding }}
<div class="pad-day"></div>
{{ end }}
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">
<div class="day" onclick="simulateLinkClick()" >
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>
@ -152,7 +102,65 @@
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">
<div class="day" onclick="simulateLinkClick()" >
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>
<h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
{{ range where $.Site.RegularPages "Section" "eq" "events" }}
{{ $eventStart := time.AsTime .Params.start_date }}
{{ $eventEnd := time.AsTime .Params.end_date }}
{{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
<div class="event" >
<a href="{{ .RelPermalink }}">{{.Title}}</a>
</div>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ $date := $date.AddDate 0 1 0 }}
{{ $month := $date.Month | int }}
{{ $year := $date.Year }}
{{ $t1 := printf "%4d-%02d-01" $year $month }}
{{ $t1 := time.AsTime $t1 }}
{{ $t2 := $t1.AddDate 0 1 0 }}
{{ $daysInMonth := $t2.Sub $t1 }}
{{ $daysInMonth := $daysInMonth.Hours }}
{{ $daysInMonth := div $daysInMonth 24 }}
<div class="calendar">
{{ if eq .Site.Language.Lang "pl" }}
{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
{{ $month := sub $month 1}}
{{ $label := index $polish_month_names $month }}
<a class="month">{{ printf "%s %d" $label $year }}</a>
{{ else }}
<a class="month">{{ time.Format "January 2006" $t1 }}</a>
{{ end }}
<div class="weekdays" >
{{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
{{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
</div>
<div class="days">
{{ $padding := $t1.Weekday | int }}
{{ if gt $padding 0 }}
{{ range seq 1 $padding }}
<div class="pad-day"></div>
{{ end }}
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day" onclick="simulateLinkClick()" >
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>

11
layouts/shortcodes/calendar.html
View File

@ -1,3 +1,12 @@
<script>
function simulateLinkClick() {
var link = document.querySelector('.day a');
if (link) {
link.click();
}
}
</script>
{{ $date:= .Get "date" }}
{{ if not $date }}
{{ errorf "Error: 'date' is a required parameter." }}
@ -39,7 +48,7 @@
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">
<div class="day" onclick="simulateLinkClick()" >
{{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
{{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
<h3 class="day-num">{{ . }}</h3>

13
static/css/style.css
View File

@ -521,6 +521,7 @@ blockquote.location p { padding: inherit; }
transition: 400ms;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
@ -528,7 +529,7 @@ blockquote.location p { padding: inherit; }
.day:has(>.event) {
display: block;
/* display: block; */
color: var(--cal-day-busy-fg);
background-color: var(--cal-day-busy-bg);
}
@ -537,21 +538,25 @@ blockquote.location p { padding: inherit; }
transform: scale(1.2);
background-color: var(--cal-day-hover-bg);
color: var(--cal-day-hover-fg);
cursor: pointer;
}
.day-num {
font-size: 8vh;
font-size: 6.5vh;
line-height: 1;
pointer-events: none;
margin: 0;
}
.day:has(>.event) .day-num {
font-size: 4vh;
font-size: 3vh;
margin-bottom: 1vh;
}
.event, .event a {
font-size: 1.5vh;
color: var(--cal-event-fg);
background-color: var(--cal-event-bg);
/* background-color: var(--cal-event-bg); */
}
.mobile-date { display: none;}