From 2157f206f1a3c367883c8ec9b27741dffcef6c3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 3 Apr 2020 22:18:57 +0200 Subject: Add responsivnes, major rework on css. Primary page layout is now changed from being flexbox based to being grid based. This allows a much simpler complete rearangement of the elements to a tall view for narrow screens. A few other minor changes might also have slipped in. --- static/style.css | 244 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 155 insertions(+), 89 deletions(-) (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css index c9110a8c..e871d1fd 100644 --- a/static/style.css +++ b/static/style.css @@ -8,53 +8,136 @@ html, body { } .root { - display: flex; + display: grid; margin: 0; max-width: 100%; height: 100%; - flex-direction: row; + grid-template-columns: auto auto 20em; + grid-template-rows: auto; + + grid-template-areas: + "main main cal" + "main main nav" + "main main details" + "main main events" + "footer footer events"; } @media (max-aspect-ratio: 3/4) { .root { + grid-template-areas: + "main main" + "cal events" + "details events" + ". events" + "footer events"; + grid-template-rows: 70% auto; + grid-template-columns: 50% auto; + } +} + +.hidelink { + color: inherit; + text-decoration: none; +} + +.root main { + min-width: 0; /* for wide */ + min-height: 0; /* for tall */ +} + +/* Page footer +---------------------------------------- +*/ +.root footer { + margin: 0.5em; + color: ray; + font-size: 8pt; + + display: flex; + justify-content: space-between; + + flex-direction: row; +} + +@media (max-aspect-ratio: 3/4) { + .root footer { flex-direction: column; } } -.small-calendar { - text-align: right; - border-collapse: collapse; +.root footer span { + margin: 0 1em; + white-space: nowrap; } -.small-calendar thead { - border-bottom: 1px solid black; + +/* Change View +---------------------------------------- +"Buttons" for changing between weekly and monthly layout +*/ + + +.change-view { + display: flex; + flex-direction: row; + justify-content: space-evenly; } -.small-calendar .prev, -.small-calendar .next { - color: grey; +.change-view a { + padding: 0.5em; + border: 1px solid black; + border-radius: 0.5em; + background-color: #ECECEC; + text-decoration: none; + color: black; } -.small-calendar td { - padding: 5px; +/* Eventlist +---------------------------------------- +The sidebar with all the events +*/ + +.eventlist { + min-height: 0; + overflow: scroll; } -.calendarlist li { - list-style-type: none; - border-left-width: 1em; +.eventlist { + overflow: scroll; + border-top: 3px solid gray; +} + +.eventlist article { + border-bottom: 1px solid black; + margin-top: 1em; border-left-style: solid; - padding-left: 1ex; + border-left-width: 6px; + padding-left: 2px; +} - /* force to single line */ - overflow: hidden; - white-space: nowrap; +.eventlist { + white-space: pre-line; + font-size: 10pt; } -.small-calendar .today { - border: 1px solid black; +.eventlist h3 { + font-size: 12pt; + border-bottom: 1px solid gray; + margin-bottom: 0; + font-weight: 300; +} + +.eventlist article.tentative { + border-left-style: dashed; } +/* Text day +---------------------------------------- +Each event within the eventlist +*/ + .text-day { border-left: 2px solid black; border-top: 2px solid black; @@ -68,83 +151,78 @@ html, body { font-size: 14pt; } -.sideinfo { - display: flex; +/* Small calendar +---------------------------------------- +*/ - width: 20em; - height: 100%; - flex-direction: column; +.smallcal { + display: flex; + justify-content: center; } -@media (max-aspect-ratio: 3/4) { - .sideinfo { - width: 100%; - height: 20em; - flex-direction: row; - } +.smallcall-head { + text-align: center; + font-weight: bold; } -.sideinfo .nav { - height: 100%; +.smallcal .nav { + /* height: 100%; */ display: flex; flex-direction: column; justify-content: center; font-size: 150%; } -.sideinfo .about { - display: flex; - justify-content: center; - - margin: 0 1em; - border-bottom: 2px solid gray; -} - -.sideinfo .small-calendar { +.smallcal .small-calendar { margin-left: 1em; - margin-right: 1em; + margin-right: 1em; } -.sideinfo .eventlist { - overflow: scroll; +.small-calendar { + text-align: right; + border-collapse: collapse; } -.sideinfo .eventlist article { +.small-calendar thead { border-bottom: 1px solid black; - margin-top: 1em; - border-left-style: solid; - border-left-width: 6px; - padding-left: 2px; } -.sideinfo .eventlist { - white-space: pre-line; - font-size: 10pt; +.small-calendar .prev, +.small-calendar .next { + color: grey; } -.sideinfo .eventlist h3 { - font-size: 12pt; - border-bottom: 1px solid gray; - margin-bottom: 0; - font-weight: 300; +.small-calendar td { + padding: 5px; } -.hidelink { - color: inherit; - text-decoration: none; -} +/* Calendar List +---------------------------------------- +The list of all the loaded calendars, +along with their colors. +*/ -.root main { - display: flex; - flex-direction: column; - flex-grow: 1; +/* .calendarlist {} */ - min-width: 0; /* for wide */ - min-height: 0; /* for tall */ +.calendarlist li { + font-size: 8pt; + list-style-type: none; + border-left-width: 1em; + border-left-style: solid; + padding-left: 1ex; + + /* force to single line */ + overflow: hidden; + white-space: nowrap; } +.small-calendar .today { + border: 1px solid black; +} -/* ---------------------------------------- */ +/* Caltable +---------------------------------------- +*/ .caltable { flex-grow: 10; @@ -203,7 +281,9 @@ html, body { color: gray; } -/* ---------------------------------------- */ +/* Weekly calendar +---------------------------------------- +*/ .calendar { width: 100%; @@ -309,20 +389,6 @@ html, body { font-size: 8pt; } -.root footer { - font-family: monospace; - margin: 0.5em; - - display: flex; - justify-content: space-between; -} - -.root footer span { - margin: 0 1em; -} - -/* */ - .events .event.continuing { border-bottom: none; background-image: linear-gradient(to top, #0007 0%,#FFF0 2em); @@ -346,10 +412,6 @@ html, body { border: 3px dashed black; } -.eventlist article.tentative { - border-left-style: dashed; -} - /* */ .longevents .event { @@ -404,6 +466,10 @@ html, body { height: 100%; } +/* Popups +---------------------------------------- +*/ + .event-inner .popup { visibility: hidden; position: absolute; -- cgit v1.2.3