From fe8deb4b0f74c30d55b8e69c947a72924828f6ce Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 6 Jan 2022 13:55:06 +0100
Subject: [PATCH] scss: use css grid to provide alternate form title mode
 (#60228)

---
 static/includes/wcs/_bulk.scss | 76 +++++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 24 deletions(-)

diff --git a/static/includes/wcs/_bulk.scss b/static/includes/wcs/_bulk.scss
index 81bd5c21..05a04c33 100644
--- a/static/includes/wcs/_bulk.scss
+++ b/static/includes/wcs/_bulk.scss
@@ -17,16 +17,16 @@ div#sidebox div#links {
 
 // general layout
 
-div#gauche, div#rub_service {
+.form-content--sidebox, .form-content--body {
 	margin-top: 15px;
 }
 
-div#rub_service {
+.form-content--body {
 	background: $body-background;
 }
 
 @if ($form-sidebar-position == top) {
-	div#gauche {
+	.form-content--sidebox {
 		text-align: center;
 		div#tracking-code {
 			display: inline-block;
@@ -37,7 +37,7 @@ div#rub_service {
 		}
 	}
 } @else {
-	div#gauche {
+	.form-content--sidebox {
 		clear: both;
 		width: $form-sidebar-width;
 		@if ($form-sidebar-position == left) {
@@ -47,7 +47,7 @@ div#rub_service {
 		}
 	}
 
-	div#gauche + div#rub_service {
+	.form-content--sidebox + .form-content--body {
 		width: calc(100% - #{$form-sidebar-width} - #{$form-sidebar-gutter});
 		clear: none;
 		@if ($form-sidebar-position == left) {
@@ -85,34 +85,34 @@ div#services > ul > li {
 
 .form-content--title,
 div#tracking-code h3,
-div#rub_service h2 {
+.form-content--body h2 {
 	@extend %title;
 }
 
-div.gru-content div#rub_service h3,
-div#rub_service h3 {
+div.gru-content .form-content--body h3,
+.form-content--body h3 {
 	border: none;
 	text-align: left;
 	border-bottom: 2px solid $title-background;
 }
 
-div#rub_service div.dataview,
-div#rub_service dl#evolutions,
-div#rub_service .drafts-recall,
-div#rub_service form {
+.form-content--body div.dataview,
+.form-content--body dl#evolutions,
+.form-content--body .drafts-recall,
+.form-content--body form {
 	padding: 0.5rem;
 }
 
-div#rub_service div.dataview div.title h3 {
+.form-content--body div.dataview div.title h3 {
 	font-size: 115%;
 	border: 0;
 }
 
-div#rub_service div.dataview div.subtitle h4 {
+.form-content--body div.dataview div.subtitle h4 {
 	font-size: 110%;
 }
 
-div#rub_service div.dataview div.field.status {
+.form-content--body div.dataview div.field.status {
 	clear: both;
 }
 
@@ -142,7 +142,7 @@ div#services div.block-custom-text {
 
 @media screen and ($max-mobile-viewport) {
 	// move #gauche on top and tracking code after steps
-	div#gauche {
+	.form-content--sidebox {
 		float: none;
 		width: 100%;
 	}
@@ -160,13 +160,13 @@ div#services div.block-custom-text {
 }
 
 @media screen and ($max-mobile-viewport) {
-	div#gauche + div#rub_service,
-	div#rub_service {
+	.form-content--sidebox + .form-content--body,
+	.form-content--body {
 		width: 100%;
 		margin: 0;
 		float: none;
 	}
-	div#gauche {
+	.form-content--sidebox {
 		text-align: left;
 		div#tracking-code a {
 			padding-left: 0.3em;
@@ -399,7 +399,7 @@ div.form-validation div.page > h3 {
 	font-size: 140%;
 }
 
-div#rub_service div.form-validation div.page div h3 {
+.form-content--body div.form-validation div.page div h3 {
 	border-bottom-width: 1px;
 }
 
@@ -795,10 +795,38 @@ div.section.foldable {
 	}
 }
 
-@if ($form-titlebar-mode == form) {
-	@media screen and ($min-desktop-viewport) {
-		.form-content--with-sidebox .form-content--titlebar {
-			margin-left: calc(#{$form-sidebar-width} + #{$form-sidebar-gutter});
+@if ($form-titlebar-mode == form and $form-sidebar-position != top) {
+	@supports (display: grid) {
+	@media ($min-desktop-viewport) {
+		.form-content--with-sidebox {
+			display: grid;
+			column-gap: $form-sidebar-gutter;
+			grid-template-columns: $form-sidebar-width 1fr $form-sidebar-width;
+			grid-template-rows: auto;
+			grid-template-areas:
+				"sidebox title title"
+				"sidebox form  form";
+			@if ($form-sidebar-position == right) {
+				grid-template-areas:
+					"title title sidebox"
+					"form  form  sidebox";
+			}
+			.form-content--titlebar {
+				grid-area: title;
+				width: auto;
+				margin-top: 15px;
+			}
+			.form-content--sidebox {
+				grid-area: sidebox;
+				width: auto;
+			}
+			.form-content--body {
+				grid-area: form;
+				width: auto;
+				margin-top: 0;
+			}
 		}
 	}
+	}
 }
+
-- 
2.30.2

