change calendar display on narrow screens
2 files changed, 27 insertions(+), 1 deletion(-)
changed files
M templates/calendar.go → templates/calendar.go
@@ -27,7 +27,8 @@ } return Div(Class("calendar"), H2(g.Text("Calendar")), - P(g.Text("Here you can roughly see when I'm busy in the next two weeks")), + P(g.Text("Here you can roughly see when I'm busy in the next two weeks.")), + P(Class("only-small-portrait"), g.Text("Rotate to see calendar view and previous days.")), Section(Class("calendar-grid"), g.Map(dates, func(date *calendar.CalendarDate) g.Node { if past && date.IsToday() {
M templates/style.css → templates/style.css
@@ -304,3 +304,28 @@ .calendar footer p { margin: 0; } + +.only-small-portrait { + display: none; +} + +@media only screen and (max-width: 768px) { + .calendar-grid { + display: flex; + flex-direction: column; + } + + .past { + display: none; + } + + .day { + min-height: revert; + } +} + +@media only screen and (max-width: 768px) and (orientation: portrait) and (min-height: 768px) { + .only-small-portrait { + display: revert; + } +}