From 3954a89a787dc1eb6a6cef426aaff4e91e12d1c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 12 Aug 2018 11:15:37 +0200
Subject: [PATCH] scss: add mode to get a bottom navigation bar on mobiles
 (#25638)

---
 help/fr/misc-scss.page                 | 13 +++++
 static/clapotis-les-canards/_vars.scss |  1 +
 static/includes/_nav.scss              | 71 ++++++++++++++++++++++++++
 3 files changed, 85 insertions(+)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index b18dc17..c88af6f 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -257,6 +257,19 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Hauteur de l'éventuel bandeau image.</p></td>
   <td><p><var>300px</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$nav-mobile-mode</code></p></td>
+  <td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver
+  le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un
+  menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une
+  barre en bas d'écran.</p></td>
+  <td><p><var>hamburger</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$nav-mobile-bottom-bar-height</code></p></td>
+  <td><p>Hauteur de la barre de navigation en mode mobile.</p></td>
+  <td><p><var>64px</var></p></td>
+ </tr>
 </table>
 </section>
 
diff --git a/static/clapotis-les-canards/_vars.scss b/static/clapotis-les-canards/_vars.scss
index bbab12e..6ab0976 100644
--- a/static/clapotis-les-canards/_vars.scss
+++ b/static/clapotis-les-canards/_vars.scss
@@ -14,3 +14,4 @@ $border-radius: 4px;
 $button-background: $primary-color;
 $title-background: $primary-color;
 $title-color: white;
+$nav-mobile-mode: bottom-bar;
diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss
index 1a7faac..0bfda11 100644
--- a/static/includes/_nav.scss
+++ b/static/includes/_nav.scss
@@ -37,6 +37,8 @@ $responsive-menu: top-to-bottom !default; /* or left-to-right */
 $nav-after-image: true !default;
 $nav-after-image-height: 300px !default;
 
+$nav-mobile-bottom-bar-height: 64px;
+
 
 @if $nav-full-width-background == true {
 	div.gru-nav-wrapper {
@@ -325,6 +327,75 @@ div.menucell {
 }
 }
 
+@if $nav-mobile-mode == bottom-bar {
+@media screen and (max-width: $mobile-limit) {
+	div#header h1 {
+		padding-left: 0;
+		background-position: 0;
+	}
+	nav {
+		background: white;  // make sure it is opaque
+		height: $nav-mobile-bottom-bar-height;
+		position: fixed;
+		bottom: 0;
+		z-index: 1000;
+		width: 100%;
+		#nav-wrapper {
+			padding: 0;
+			margin: 0;
+		}
+		div#nav ul {
+			margin-top: 0;
+			padding-top: 0;
+			display: flex;
+			li {
+				flex: 1;
+				position: relative;
+				margin-left: 0;
+				text-align: center;
+				&:hover a {
+					background: $nav-item-hover-background;
+					color: $nav-item-hover-color;
+				}
+				&.selected a {
+					background: $nav-item-selected-background;
+					color: $nav-item-selected-color;
+				}
+				a {
+					span {
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+					width: 100%;
+					line-height: 0.8em;
+					padding: 0px 4px;
+					height: $nav-mobile-bottom-bar-height;
+					padding-top: $nav-mobile-bottom-bar-height / 2;
+					box-sizing: border-box;
+					border-bottom: 0;
+					span {
+						display: block;
+						height: $nav-mobile-bottom-bar-height / 2;
+						font-size: 10px;
+					}
+				}
+				&::before {
+					position: absolute;
+					background-position: 50% 2px;
+					width: 100%;
+				}
+			}
+		}
+	}
+	body.has-picture[data-picture] nav::after {
+		content: none;
+	}
+	footer {
+		margin-bottom: $nav-mobile-bottom-bar-height;
+	}
+}
+}
+
 @if $nav-after-image == true {
 	@supports (background-image: var(--page-picture)) {
 		body.has-picture nav::after {
-- 
2.18.0