kittv
/
web
6
3
Fork 2
Code Issues 2 Pull Requests Activity

Mobilní navigace

Browse Source 
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.
content
Emil Miler 4 years ago
parent 3cbf7f90af
commit 4a142d693e
3 changed files with 141 additions and 77 deletions
Show Stats Download Patch File Download Diff File

200
sass/main.scss
Unescape Escape View File

@ -16,6 +16,13 @@ a {
color: inherit; 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 { body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@ -26,6 +33,7 @@ body {
} }
header { header {
position: relative;
padding: 3rem 0; padding: 3rem 0;
border-top: 8px solid; 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; 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 { .wrap {
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 6rem; height: 5rem;
max-width: $width-full; max-width: $width-full;
width: 100%; width: 100%;
margin: 0 auto;
padding: 0 1rem;
} }
a.logo { a.logo {
height: 100%; height: 100%;
margin: 0 1em;
img { height: inherit; } img {
height: 100%;
max-width: none;
}
} }
section { section {
@ -57,7 +68,6 @@ header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: .3rem 0 .1rem 0;
} }
nav { nav {
@ -66,53 +76,28 @@ header {
display: flex; display: flex;
a { a {
display: flex; display: flex; // rolldown arrow alignment
align-items: center; align-items: center;
padding: .9em; padding: .9em;
white-space: nowrap; white-space: nowrap;
} }
li:hover { color: var(--color) }
li:hover>div { li:hover>a { color: var(--color) }
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 { // rolldown arrow
margin-bottom: 1em; li>a.rolldown::after {
padding: .5em; content: "\ea4e";
font-weight: bold; font-family: remixicon;
color: var(--color); font-size: .8em;
} margin-left: .5em;
color: $rambotron-blue;
}
li:hover>a::after { color: inherit }
// columns // icons
ul { flex-direction: column } [class^="ri-"], [class*=" ri-"] {
ul a { padding: .5em } color: var(--color);
ul a [class^="ri-"], ul a [class*=" ri-"] { margin-right: .5em;
color: var(--color);
margin-right: .5em;
}
} }
} }
} }
@ -121,9 +106,7 @@ header {
font-size: .9rem; font-size: .9rem;
color: #4C566A; color: #4C566A;
a:hover { a:hover { text-decoration: underline }
text-decoration: underline;
}
} }
nav.primary { nav.primary {
@ -131,20 +114,100 @@ header {
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
&>ul>li>a.rolldown::after { // rolldown
content: "\ea4e"; li:hover>div {
font-family: remixicon; visibility: visible;
font-size: .8em; transform: translate(0);
margin-left: .5em; opacity: 1;
color: $rambotron-blue; 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 { main {
max-width: $width-thin;; max-width: $width-thin;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
@ -585,13 +648,12 @@ table {
@media screen and (max-width: 950px){ @media screen and (max-width: 950px){
header { padding: 2em 0 0 0 } header { padding: 1rem 0 }
header .wrap { header .wrap {
flex-direction: column; align-items: center;
align-items: flex-start;
height: auto; height: auto;
.logo { height: 4em } .logo { height: 3.5rem }
section { section {
height: auto; height: auto;
@ -599,22 +661,8 @@ table {
padding: 0; padding: 0;
} }
nav.secondary { display: none } nav.secondary, nav.primary { display: none }
nav.primary { nav.mobile { display: initial }
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
}
} }
main .blocks { grid-template-columns: 1fr } main .blocks { grid-template-columns: 1fr }

10
templates/base.html
Unescape Escape View File

@ -23,7 +23,7 @@
{{ macro::nav_list_items_main(items=config.extra.nav_primary) }} {{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav> </nav>
<nav class="secondary"> <nav class="secondary">
<span class="icon-search-line"></span> <i class="ri-search-line"></i>
</nav> </nav>
</div> </div>
</header> </header>
@ -37,6 +37,14 @@
<p>Magdalény Rettigové 4, 116 39, Praha 1</p> <p>Magdalény Rettigové 4, 116 39, Praha 1</p>
<p>Praha UK PedF KITTV, {{ now() | date(format="%Y") }}</p> <p>Praha UK PedF KITTV, {{ now() | date(format="%Y") }}</p>
</footer> </footer>
<script>
document.getElementById("mobile-nav-button").addEventListener("click", function(){
this.classList.toggle("ri-menu-3-line");
this.classList.toggle("ri-close-line");
document.getElementById("mobile-nav").classList.toggle("visible");
document.body.classList.toggle("hidden");
});
</script>
{% block javascript %}{% endblock %} {% block javascript %}{% endblock %}
</body> </body>
</html> </html>

8
templates/index.html
Unescape Escape View File

@ -12,6 +12,14 @@
{{ macro::nav_list_items_main(items=config.extra.nav_primary) }} {{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav> </nav>
</section> </section>
<nav class="mobile">
<div class="buttons">
<i class="ri-menu-3-line" id="mobile-nav-button"></i>
</div>
<div class="floating" id="mobile-nav">
{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</div>
</nav>
</div> </div>
</header> </header>
{% endblock header %} {% endblock header %}

Write Preview
Loading…
Cancel
Save