scss: add option to control cell image style (#31965)

help/fr/misc-scss.page

@@ -547,6 +547,20 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   vers les bords.</p></td>
   <td><p><var>none</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$cell-image-position</code></p></td>
+  <td><p>Position de l'image qui peut être associée à une cellule « démarches
+  d'une catégorie », les valeurs possibles sont <var>top</var> pour
+  avoir l'image en haut de cellule et <var>after-title</var> pour avoir
+  l'image après le titre de cellule.</p></td>
+  <td><p><var>after-title</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$cell-image-padding</code></p></td>
+  <td><p>Espace autour de l'image qui peut être associée à une cellule « démarches
+  d'une catégorie ».</p></td>
+  <td><p><var>0.5rem</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$cell-title-cover-border</code></p></td>
   <td><p>Détermine si le titre des cellules doit couvrir la bordure</p></td>

static/clapotis-les-canards/_vars.scss

@@ -15,3 +15,6 @@ $button-background: $primary-color;
 $title-background: $primary-color;
 $title-color: white;
 $nav-mobile-mode: bottom-bar;
+
+$cell-image-position: top;
+$cell-image-padding: none;

static/includes/_cells.scss

@@ -22,6 +22,15 @@ $footer-menucell-separator: none !default;
 //  middle-to-edges: horizontally, from the middle to the edges.
 $cell-entry-hover-effect: none !default;
 
+// $cell-image-position: define where is set the associated image (in
+// "forms of category"; possible values are:
+//  top: top of the cell
+//  after-title: after the title (default)
+$cell-image-position: after-title !default;
+
+// $cell-image-padding: define padding of cell image.
+$cell-image-padding: 0.5rem !default;
+
 .gru-content #columns > .cell,
 div#left div.block,
 .gru-content #left .cell { margin-left: 0; }
@@ -223,12 +232,47 @@ div.wcscurrentformscell ul {
 	}
 }
 
-div.wcsformsofcategorycell {
+.gru-content div.wcsformsofcategorycell {
 	picture img {
 		max-width: 100%;
-		padding: 0.5rem;
+		display: block;
+		padding: $cell-image-padding;
 		box-sizing: border-box;
 	}
+	@if $cell-image-position == top {
+		> div {
+			display: -ms-flexbox;
+			display: flex;
+			flex-direction: column;
+			-ms-flex-direction: column;
+			div {
+				-ms-flex-order: 4;
+				order: 4;
+			}
+			div.intro {
+				-ms-flex-order: 2;
+				order: 2;
+			}
+			picture {
+				-ms-flex-order: 0;
+				order: 0;
+				img {
+					border-radius: $cell-border-radius $cell-border-radius 0 0;
+				}
+				@if $cell-title-cover-border == true {
+					position: relative;
+					top: -1px;
+					left: -1px;
+					width: calc(100% + 2px);
+				}
+			}
+			> h2:first-child {
+				-ms-flex-order: 1;
+				order: 1;
+				border-radius: 0;
+			}
+		}
+	}
 }
 
 div.list-of-forms {
@@ -611,6 +655,11 @@ div.cell {
 			&::after {
 				content: "\f107";  // angle-down
 			}
+			@if $cell-image-position == top {
+				+ picture {
+					display: block;
+				}
+			}
 		}
 		> div > * {
 			display: none;