From 36d8317e77206d4a8ce5620bc3ba072d3dc34851 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Sat, 21 Mar 2020 17:54:45 +0100
Subject: [PATCH] scss: carrousel: add news text positions combinaisons

---
 help/fr/misc-scss.page                       |  6 +--
 static/arles-2020/_vars.scss                 |  2 +-
 static/clermont-metropole/_vars.scss         |  2 +-
 static/entrouvert/_carrousel-references.scss |  2 +-
 static/entrouvert/_vars.scss                 |  2 +-
 static/haute-garonne-cd31/_vars.scss         |  2 +-
 static/includes/_carrousel.scss              | 49 ++++++++++++++------
 static/lille/_vars.scss                      |  2 +-
 static/nancy-en-direct/_vars.scss            |  2 +-
 static/quimper/_vars.scss                    |  2 +-
 static/signal-publik/_vars.scss              |  2 +-
 11 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 9d361434..3e280ede 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -794,10 +794,8 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$carrousel-text-position</code></p></td>
-  <td><p>Position du texte des différentes pages; les valeurs possibles sont
-  middle (milieu de page), bottom-left (en bas à gauche) et
-  top-right (en haut à droite).</p></td>
-  <td><p><var>middle</var></p></td>
+  <td><p>Position du texte des différentes pages; indiqué par 2 valeurs séparées par un espace. La première indique le positionnement vertical (<var>left</var>, <var>middle</var> ou <var>right</var>), la seconde le positionnement horizontal (<var>top</var>, <var>middle</var> ou <var>bottom</var>). Exemple: <var> top right</var></p></td>
+  <td><p><var>middle</var> (éq. à <var>middle middle</var>)</p></td>
  </tr>
  <tr>
   <td><p><code>$carrousel-navigation</code></p></td>
diff --git a/static/arles-2020/_vars.scss b/static/arles-2020/_vars.scss
index f356e103..75aec024 100644
--- a/static/arles-2020/_vars.scss
+++ b/static/arles-2020/_vars.scss
@@ -49,4 +49,4 @@ $wcs-step-current-color: $wcs-step-color;
 $wcs-step-background: #ddd;
 
 $carrousel-navigation-bullet-border: 1px solid #ddd;
-$carrousel-text-position: top-right;
+$carrousel-text-position: top right;
diff --git a/static/clermont-metropole/_vars.scss b/static/clermont-metropole/_vars.scss
index 9124b006..7cb5d17f 100644
--- a/static/clermont-metropole/_vars.scss
+++ b/static/clermont-metropole/_vars.scss
@@ -51,4 +51,4 @@ $widget-focus-color: #2a2421;
 $widget-focus-border: 1px solid #e44b00;
 
 $carrousel-height: 420px;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
diff --git a/static/entrouvert/_carrousel-references.scss b/static/entrouvert/_carrousel-references.scss
index da9a46ec..9b56810a 100644
--- a/static/entrouvert/_carrousel-references.scss
+++ b/static/entrouvert/_carrousel-references.scss
@@ -53,7 +53,7 @@ div.carrousel-references-content {
 						margin-left: auto;
 						margin-right: auto;
 					}
-				} @else if $carrousel-text-position == "bottom-left" {
+				} @else if $carrousel-text-position == "bottom left" {
 					text-align: left;
 					position: absolute;
 					bottom: 1rem;
diff --git a/static/entrouvert/_vars.scss b/static/entrouvert/_vars.scss
index fd3846ba..74ba07db 100644
--- a/static/entrouvert/_vars.scss
+++ b/static/entrouvert/_vars.scss
@@ -28,5 +28,5 @@ $footer-colot: white;
 $cell-border: 0;
 $nav-menu-color: #aaa;
 $carrousel-height: 220px;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
 $carrousel-navigation-bullet-color: #fff;
diff --git a/static/haute-garonne-cd31/_vars.scss b/static/haute-garonne-cd31/_vars.scss
index 6e11936a..7006fe85 100644
--- a/static/haute-garonne-cd31/_vars.scss
+++ b/static/haute-garonne-cd31/_vars.scss
@@ -42,7 +42,7 @@ $footer-background: $primary-color;
 $footer-color: white;
 
 $carrousel-height: 400px;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
 $carrousel-navigation: none;
 
 $cell-entry-hover-background: white;
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
index 0380c523..58528caa 100644
--- a/static/includes/_carrousel.scss
+++ b/static/includes/_carrousel.scss
@@ -1,7 +1,10 @@
 /* $carrousel-height: height of carrousel image */
 $carrousel-height: 20rem !default;
 
-/* $carrousel-text-position: position of text (middle, bottom-left, top-right) */
+// $carrousel-text-position: [vertical option] [horizontal option]
+// vertical options: top | middle | bottom
+// horizontal options: left | middle | right
+// Default: middle (eq to "middle middle");
 $carrousel-text-position: middle !default;
 
 /* $carrousel-navigation: visible or none */
@@ -56,19 +59,7 @@ div.carrousel-content {
 				opacity: 0.3;
 			}
 			display: flex;
-			@if $carrousel-text-position == "middle" {
-				align-items: center;
-				justify-content: flex-start;
-				text-align: center;
-			} @else if $carrousel-text-position == "bottom-left" {
-				align-items: flex-end;
-				justify-content: flex-start;
-				text-align: left;
-			}  @else if $carrousel-text-position == "top-right" {
-				align-items: flex-start;
-				justify-content: flex-end;
-				text-align: right;
-			}
+
 			div.carrousel-item-content {
 				@if $carrousel-navigation == "visible" {
 					margin-bottom: 1.5rem;
@@ -175,3 +166,33 @@ div.carrousel-content {
 		}
 	}
 }
+
+
+// Texte Position options
+@if ($carrousel-text-position == middle) {
+	$carrousel-text-position: middle middle;
+}
+// vertical position
+$carrousel-text-vertical-position: nth($carrousel-text-position, 1);
+// horizontal position
+$carrousel-text-horizontal-position: nth($carrousel-text-position, 2);
+
+.carrousel-item {
+	@if $carrousel-text-vertical-position == top {
+		align-items: flex-start;
+	} @else if $carrousel-text-vertical-position == middle {
+		align-items: center;
+	} @else if $carrousel-text-vertical-position == bottom {
+		align-items: flex-end;
+	}
+	@if $carrousel-text-horizontal-position == left {
+		justify-content: flex-start;
+		text-align: left;
+	} @else if $carrousel-text-horizontal-position == middle {
+		justify-content: center;
+		text-align: center;
+	} @else if $carrousel-text-horizontal-position == right {
+		justify-content: flex-end;
+		text-align: right;
+	}
+}
\ No newline at end of file
diff --git a/static/lille/_vars.scss b/static/lille/_vars.scss
index 7a85458b..f7f93d3d 100644
--- a/static/lille/_vars.scss
+++ b/static/lille/_vars.scss
@@ -27,7 +27,7 @@ $title-background: transparent;
 $cell-title-cover-border: false;
 
 $carrousel-height: 440px;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
 $carrousel-arrows: none;
 $carrousel-navigation-bullet-color: $primary-color;
 $carrousel-navigation-bullet-size: 10px;
diff --git a/static/nancy-en-direct/_vars.scss b/static/nancy-en-direct/_vars.scss
index 1b0a2566..0c2d2c8e 100644
--- a/static/nancy-en-direct/_vars.scss
+++ b/static/nancy-en-direct/_vars.scss
@@ -29,4 +29,4 @@ $wcs-step-marker-background: white;
 $wcs-step-current-marker-color: black;
 $wcs-step-current-marker-background: $primary-color;
 
-$carrousel-text-position: top-right;
+$carrousel-text-position: top right;
diff --git a/static/quimper/_vars.scss b/static/quimper/_vars.scss
index f290f8da..7d0527c9 100644
--- a/static/quimper/_vars.scss
+++ b/static/quimper/_vars.scss
@@ -61,7 +61,7 @@ $widget-focus-background: #3c4393;
 $widget-focus-color: white;
 
 $carrousel-arrows: none;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
 
 $wcs-steps-background: #b3b3b3;
 $wcs-step-current-color: $mauve;
diff --git a/static/signal-publik/_vars.scss b/static/signal-publik/_vars.scss
index 5ce7e89e..b372d4cd 100644
--- a/static/signal-publik/_vars.scss
+++ b/static/signal-publik/_vars.scss
@@ -55,7 +55,7 @@ $widget-focus-outline-offset: 2px;
 $widget-custom-radio-checkbox: true;
 
 $carrousel-arrows: none;
-$carrousel-text-position: bottom-left;
+$carrousel-text-position: bottom left;
 
 $form-sidebar-position: top;
 $bq-max--wcs-steps-small-layout: 800px;
-- 
2.20.1

