Mobilní navigace

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

@@ -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,13 +76,45 @@ 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>a { 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 }
+
+			// icons
+			[class^="ri-"], [class*=" ri-"] {
+				color: var(--color);
+				margin-right: .5em;
+			}
+		}
+	}
+
+	nav.secondary {
+		font-size: .9rem;
+		color: #4C566A;
+
+		a:hover { text-decoration: underline }
+	}
+
+	nav.primary {
+		position: relative;
+		font-weight: bold;
+		font-size: 1.2em;
+
+		// rolldown
 		li:hover>div {
 			visibility: visible;
 			transform: translate(0);
@@ -106,45 +148,66 @@ header {
 				color: var(--color);
 			}
 
-				// columns
 			ul { flex-direction: column }
 			ul a { padding: .5em }
-				ul a [class^="ri-"], ul a [class*=" ri-"] {
-					color: var(--color);
-					margin-right: .5em;
-				}
 		}
 	}
+
+	nav.mobile {
+		display: none;
+
+		.floating.visible {
+			visibility: visible;
+			opacity: 1;
 		}
 
-	nav.secondary {
-		font-size: .9rem;
-		color: #4C566A;
+		.buttons {
+			display: flex;
+			justify-content: flex-end;
+			font-size: 2rem;
 
-		a:hover {
-			text-decoration: underline;
+			&>* {
+				margin-left: .5em;
+				cursor: pointer;
 			}
 		}
 
-	nav.primary {
-		position: relative;
-		font-weight: bold;
-		font-size: 1.2em;
+		.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>li>a.rolldown::after {
-			content: "\ea4e";
-			font-family: remixicon;
-			font-size: .8em;
-			margin-left: .5em;
-			color: $rambotron-blue;
+			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 }

templates/base.html

@@ -23,7 +23,7 @@
 					{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
 				</nav>
 				<nav class="secondary">
-					<span class="icon-search-line"></span>
+					<i class="ri-search-line"></i>
 				</nav>
 			</div>
 		</header>
@@ -37,6 +37,14 @@
 		<p>Magdalény Rettigové 4, 116 39, Praha 1</p>
 		<p>Praha UK PedF KITTV, {{ now() | date(format="%Y") }}</p>
 	</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 %}
 </body>
 </html>

templates/index.html

@@ -12,6 +12,14 @@
 					{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
 				</nav>
 			</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>
 		</header>
 {% endblock header %}