From 4a142d693e420f2355f4ea24d5646bc326ac622c Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Thu, 20 May 2021 15:39:02 +0200 Subject: [PATCH] =?UTF-8?q?Mobiln=C3=AD=20navigace?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Původní návrh se zalomávním navigace pod hlavičku není škálovatelný a bylo třeba jej nahradit klasickou floating navigací. V patičce základní šablony je jednoduchý skript pro spínání CSS tříd. To by neměl být problém, protože všechna mobilní zařízení JS mají zapnutý. Web pořád funguje na desktopech bez JS. Bude potřeba přidat JavaScript licenci, aby nebyl skript automaticky filtrován. To platí pro všechny další JS prvky. --- sass/main.scss | 200 +++++++++++++++++++++++++++---------------- templates/base.html | 10 ++- templates/index.html | 8 ++ 3 files changed, 141 insertions(+), 77 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index 5df0255..c88325d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -16,6 +16,13 @@ a { color: inherit; } +// hide content for the mobile navigation +body.hidden>*:not(header) { opacity: 0 } +body>*:not(header) { + transition: opacity .2s ease-out; + opacity: initial; +} + body { min-height: 100vh; display: flex; @@ -26,6 +33,7 @@ body { } header { + position: relative; padding: 3rem 0; border-top: 8px solid; border-image: linear-gradient(to right, #8FBCBB 25%, #88C0D0 25%, #88C0D0 50%, #81A1C1 50%, #81A1C1 75%, #5E81AC 75%, #5E81AC 100%) 1; @@ -36,20 +44,23 @@ header { } .wrap { - margin: 0 auto; display: flex; justify-content: space-between; align-items: center; - height: 6rem; + height: 5rem; max-width: $width-full; width: 100%; + margin: 0 auto; + padding: 0 1rem; } a.logo { height: 100%; - margin: 0 1em; - img { height: inherit; } + img { + height: 100%; + max-width: none; + } } section { @@ -57,7 +68,6 @@ header { display: flex; flex-direction: column; justify-content: space-between; - padding: .3rem 0 .1rem 0; } nav { @@ -66,53 +76,28 @@ header { display: flex; a { - display: flex; + display: flex; // rolldown arrow alignment align-items: center; padding: .9em; white-space: nowrap; } - li:hover { color: var(--color) } - li:hover>div { - visibility: visible; - transform: translate(0); - opacity: 1; - transition: all .1s ease-out; - } - li>div { - @include top-border(var(--color)); - @include shadow; - display: grid; - grid-template-columns: 1fr 1fr; - column-gap: 1em; - position: absolute; - left: 0; - top: 100%; - width: 100%; - padding: 1rem; - background-color: #FFF; - font-size: 1rem; - font-weight: normal; - color: #2E3440; - visibility: hidden; - transform: translate(0, -1em); - opacity: 0; - z-index: 1; + li:hover>a { color: var(--color) } - .title { - margin-bottom: 1em; - padding: .5em; - font-weight: bold; - color: var(--color); - } + // rolldown arrow + li>a.rolldown::after { + content: "\ea4e"; + font-family: remixicon; + font-size: .8em; + margin-left: .5em; + color: $rambotron-blue; + } + li:hover>a::after { color: inherit } - // columns - ul { flex-direction: column } - ul a { padding: .5em } - ul a [class^="ri-"], ul a [class*=" ri-"] { - color: var(--color); - margin-right: .5em; - } + // icons + [class^="ri-"], [class*=" ri-"] { + color: var(--color); + margin-right: .5em; } } } @@ -121,9 +106,7 @@ header { font-size: .9rem; color: #4C566A; - a:hover { - text-decoration: underline; - } + a:hover { text-decoration: underline } } nav.primary { @@ -131,20 +114,100 @@ header { font-weight: bold; font-size: 1.2em; - &>ul>li>a.rolldown::after { - content: "\ea4e"; - font-family: remixicon; - font-size: .8em; - margin-left: .5em; - color: $rambotron-blue; + // rolldown + li:hover>div { + visibility: visible; + transform: translate(0); + opacity: 1; + transition: all .1s ease-out; + } + li>div { + @include top-border(var(--color)); + @include shadow; + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 1em; + position: absolute; + left: 0; + top: 100%; + width: 100%; + padding: 1rem; + background-color: #FFF; + font-size: 1rem; + font-weight: normal; + color: #2E3440; + visibility: hidden; + transform: translate(0, -1em); + opacity: 0; + z-index: 1; + + .title { + margin-bottom: 1em; + padding: .5em; + font-weight: bold; + color: var(--color); + } + + ul { flex-direction: column } + ul a { padding: .5em } + } + } + nav.mobile { + display: none; + + .floating.visible { + visibility: visible; + opacity: 1; + } + + .buttons { + display: flex; + justify-content: flex-end; + font-size: 2rem; + + &>* { + margin-left: .5em; + cursor: pointer; + } + } + + .floating { + visibility: hidden; + position: absolute; + top: 100%; + right: 0; + width: 100%; + padding: 2em 1em; + background-color: #fff; + z-index: 1; + opacity: 0; + transition: all .2s ease-out; + + ul { + display: flex; + flex-direction: column; + font-size: 1.2rem; + + li>a { + display: block; + padding: 1em 0 .5em 0; + } + + div.title { display: none } + + ul { + margin-left: 1em; + + li>a { padding: .5em } + } + } } - &>ul>li:hover>a::after { color: inherit } } } main { - max-width: $width-thin;; + max-width: $width-thin; width: 100%; margin: 0 auto; padding: 1rem; @@ -585,13 +648,12 @@ table { @media screen and (max-width: 950px){ - header { padding: 2em 0 0 0 } + header { padding: 1rem 0 } header .wrap { - flex-direction: column; - align-items: flex-start; + align-items: center; height: auto; - .logo { height: 4em } + .logo { height: 3.5rem } section { height: auto; @@ -599,22 +661,8 @@ table { padding: 0; } - nav.secondary { display: none } - nav.primary { - margin-top: 2em; - box-shadow: 0px 0px 20px #00000029; - font-size: 1em; - - &>ul { - justify-content: space-between; - padding: 0 .5em; - - &>li { flex-grow: 1 } - &>li>a { justify-content: center } - } - &>ul>li>a { padding: 1.5em .5em } - &>ul>li>div a { white-space: initial } // line-break in rolldown - } + nav.secondary, nav.primary { display: none } + nav.mobile { display: initial } } main .blocks { grid-template-columns: 1fr } diff --git a/templates/base.html b/templates/base.html index 92ac34a..233a5d1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -23,7 +23,7 @@ {{ macro::nav_list_items_main(items=config.extra.nav_primary) }} @@ -37,6 +37,14 @@

Magdalény Rettigové 4, 116 39, Praha 1

Praha UK PedF KITTV, {{ now() | date(format="%Y") }}

+ {% block javascript %}{% endblock %} diff --git a/templates/index.html b/templates/index.html index 528ecce..7673814 100644 --- a/templates/index.html +++ b/templates/index.html @@ -12,6 +12,14 @@ {{ macro::nav_list_items_main(items=config.extra.nav_primary) }} + {% endblock header %}