From 49bc29b5b342b34705cce3fc6dd09baa0dcbe420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 1 May 2018 18:49:33 +0200
Subject: [PATCH] general: add possibility to turn menu cells in carrousels
 (#23520)

---
 help/fr/misc-scss.page                        |  30 +++++
 static/includes/_carrousel.scss               | 121 ++++++++++++++++++
 static/includes/_publik.scss                  |   1 +
 .../combo/cells/carrousel/menu-cell.html      |  12 ++
 4 files changed, 164 insertions(+)
 create mode 100644 static/includes/_carrousel.scss
 create mode 100644 templates/combo/cells/carrousel/menu-cell.html

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 10cf60f..cbfebf7 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -392,4 +392,34 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 </table>
 </section>
 
+<section>
+ <title>Carrousels</title>
+
+ <p>
+  Une cellule menu prendra la forme « carrousel » si elle est définie avec
+  « carrousel » comme slug.
+ </p>
+
+<table shade="rows">
+ <tr>
+  <td><p><code>$carrousel-height</code></p></td>
+  <td><p>Hauteur du carrousel</p></td>
+  <td><p><var>20rem</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-links-position</code></p></td>
+  <td><p>Position des liens permettant de passer d'un élément à l'autre du
+  carrousel; les valeurs possibles sont top, right, bottom et left.</p></td>
+  <td><p><var>bottom</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-labels</code></p></td>
+  <td><p>Détermine si les liens permettant de passer d'un élément à l'autre
+  reprennent le nom de la page.</p></td>
+  <td><p><var>false</var></p></td>
+ </tr>
+</table>
+
+</section>
+
 </page>
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
new file mode 100644
index 0000000..77b207a
--- /dev/null
+++ b/static/includes/_carrousel.scss
@@ -0,0 +1,121 @@
+$carrousel-height: 20rem !default;
+
+/* $carrousel-links-position: position of links to go from entry to entry;
+ * possible values are: top, right, bottom (default), left
+ */
+$carrousel-links-position: bottom !default;
+
+/* $carrousel-labels: include or not page labels (boolean, default: true) */
+$carrousel-labels: false !default;
+
+#carrousel > div {
+	display: -ms-flexbox;
+	display: flex;
+	box-sizing: border-box;
+	@if $carrousel-links-position == bottom or $carrousel-links-position == top {
+		-ms-flex-direction: column;
+		flex-direction: column;
+	}
+	ul.page-links {
+		vertical-align: center;
+		-ms-flex: 0 0 auto;
+		flex: 0 0 auto;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-justify-content: center;
+		justify-content: center;
+		@if $carrousel-links-position == left or $carrousel-links-position == right {
+			@if $carrousel-labels == false {
+				width: 2rem;
+			} @else {
+				width: 20rem;
+			}
+			-ms-flex-direction: column;
+			flex-direction: column;
+			li {
+				width: 100%;
+			}
+		} @else {
+			li {
+				margin: 0 0.5rem;
+			}
+		}
+		@if $carrousel-links-position == left {
+			margin-right: 1rem;
+		}
+		@if $carrousel-links-position == right {
+			margin-left: 1rem;
+			order: 1;
+		}
+		@if $carrousel-links-position == top {
+			margin-bottom: 1rem;
+		}
+		@if $carrousel-links-position == bottom {
+			margin-top: 1rem;
+			order: 1;
+		}
+		@if $carrousel-labels == false {
+			li a {
+				outline: 0;
+				text-indent: -10000px;
+				position: relative;
+				height: 0;
+				text-align: center;
+				border: 0;
+				&::after {
+					font-family: FontAwesome;
+					content: "\f10c"; // circle-o
+					position: absolute;
+					top: 1ex;
+					left: 0;
+					width: 100%;
+					text-indent: 0;
+				}
+			}
+		}
+	}
+	ul.pictures {
+		@if $carrousel-links-position == bottom or $carrousel-links-position == top {
+			white-space: pre;
+		} @else {
+			height: $carrousel-height;
+		}
+		-ms-flex: 1 0 none;
+		flex: 1 0 none;
+		width: 100%;
+		overflow: hidden;
+		scroll-behavior: smooth;
+		li {
+			@if $carrousel-links-position == bottom or $carrousel-links-position == top {
+				width: 100%;
+				display: inline-block;
+			} @else {
+				display: block;
+			}
+			background-size: cover;
+			height: $carrousel-height;
+			a {
+				margin: 0;
+				padding: 0;
+				border: 0;
+				height: 100%;
+				&:hover {
+					background: none;
+					div {
+						background: rgba(255, 255, 255, 0.8);
+					}
+				}
+				position: relative;
+				div {
+					transition: background ease 0.2s;
+					background: rgba(255, 255, 255, 0.5);
+					padding: 1rem;
+					color: $font-color;
+					position: absolute;
+					bottom: 0;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
diff --git a/static/includes/_publik.scss b/static/includes/_publik.scss
index 9013548..7431873 100644
--- a/static/includes/_publik.scss
+++ b/static/includes/_publik.scss
@@ -10,4 +10,5 @@
 @import 'wcs';
 @import 'misc';
 @import 'a11y';
+@import 'carrousel';
 @import 'library';
diff --git a/templates/combo/cells/carrousel/menu-cell.html b/templates/combo/cells/carrousel/menu-cell.html
new file mode 100644
index 0000000..e41730e
--- /dev/null
+++ b/templates/combo/cells/carrousel/menu-cell.html
@@ -0,0 +1,12 @@
+<ul class="page-links">
+ {% for menuitem in menuitems %}
+  <li><a href="#carrousel-{{menuitem.page.slug}}">{{menuitem.page.title}}</a></li>
+ {% endfor %}
+</ul>
+<ul class="pictures">
+ {% spaceless %}
+ {% for menuitem in menuitems %}
+ <li id="carrousel-{{menuitem.page.slug}}" style="background-image: url({{menuitem.page.picture.url}})"><a href="{{menuitem.page.get_online_url}}"><div>{% firstof menuitem.page.description menuitem.page.title %}</div></a></li>
+ {% endfor %}
+ {% endspaceless %}
+</ul>
-- 
2.17.0