From 038bf4b836f799e4ba7e5190a6769db852b64a5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sat, 6 Oct 2018 16:19:34 +0200
Subject: [PATCH] scss: add option to control tracking code/steps position
 (#27028)

---
 help/fr/misc-scss.page    |  6 ++++
 static/includes/_wcs.scss | 68 ++++++++++++++++++++++++++++++++-------
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index cbee0a4c..225a1f1d 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -332,6 +332,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   pour les éléments.</p></td>
   <td><p><var>classic</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$form-sidebar-position</code></p></td>
+  <td><p>Position du code de suivi et des étapes, « left », « right » ou
+  « top ».</p></td>
+  <td><p><var>left</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$button-background</code></p></td>
   <td><p>Couleur de fond des boutons</p></td>
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index 6ebdd1a3..79585f11 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -1,5 +1,9 @@
 @import 'grid';
 
+// $form-sidebar-position: position of sidebar (tracking code + steps)
+// possible values are: left, right, top
+$form-sidebar-position: left !default;
+
 $responsive-steps: horizontal !default;
 
 // hide a bunch of elements
@@ -12,27 +16,49 @@ div#sidebox div#links {
 
 // general layout
 
-div#gauche {
-	clear: both;
-	width: 18.5%;
-	float: left;
+div#gauche, div#rub_service {
 	margin-top: 15px;
 }
 
 div#rub_service {
 	background: white;
-	margin-top: 15px;
 	& h2 {
 		text-align: center;
 	}
 }
 
-div#gauche + div#rub_service {
-	width: 79.5%;
-	float: right;
-	clear: none;
-}
+@if ($form-sidebar-position == top) {
+	div#gauche {
+		text-align: center;
+		div#tracking-code {
+			display: inline-block;
+			min-width: 15rem;
+			a {
+				padding-left: 0;
+			}
+		}
+	}
+} @else {
+	div#gauche {
+		clear: both;
+		width: 18.5%;
+		@if ($form-sidebar-position == left) {
+			float: left;
+		} @else {
+			float: right;
+		}
+	}
 
+	div#gauche + div#rub_service {
+		width: 79.5%;
+		clear: none;
+		@if ($form-sidebar-position == left) {
+			float: right;
+		} @else {
+			float: left;
+		}
+	}
+}
 
 // style homepage blocks
 div#services > ul {
@@ -108,7 +134,6 @@ div#services div.block-custom-text {
 
 // steps
 div#steps ol {
-	text-align: left;
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -136,6 +161,20 @@ div#steps ol {
 	}
 }
 
+
+@if ($form-sidebar-position == top) {
+	div#steps ol {
+		text-align: center;
+		li {
+			display: inline-block;
+			min-width: 7rem;
+			max-width: 11rem;
+			vertical-align: top;
+			border-bottom: none;
+		}
+	}
+}
+
 @if ($responsive-steps == horizontal) {
 @media screen and (max-width: $mobile-limit) {
 	div#gauche {
@@ -171,6 +210,7 @@ div#steps ol {
 				margin: 0;
 				padding: 0 1em 1ex 0;
 				list-style: none;
+				min-width: auto;
 				border-radius: 0;
 				& span.marker {
 					float: none;
@@ -213,6 +253,12 @@ div#steps ol {
 		margin: 0;
 		float: none;
 	}
+	div#gauche {
+		text-align: left;
+		div#tracking-code a {
+			padding-left: 0.5ex;
+		}
+	}
 }
 
 li.required-authentication span {
-- 
2.19.0