eurelien-cd28: add picto on wcs-forms-of-category-cell (#57950)

static/eurelien-cd28/_custom.scss

@@ -80,3 +80,28 @@ div.buttons {
 .pk-information {
 	@include notification-message($notification_info_color, "\f164");
 }
+
+#columns {
+	div.wcs-forms-of-category-cell {
+		img {
+			border-radius: 10px;
+		}
+		h2 {
+			background: transparent center left no-repeat;
+			height: 50px;
+			margin: 0;
+			margin-left: 10px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding-left: 65px;
+			text-align: left;
+			span {
+				font-size: 30px;
+			}
+		}
+	}
+	@media screen and ($max-mobile-viewport) {
+		text-align: center;
+	}
+}

static/eurelien-cd28/_vars.scss

@@ -26,6 +26,7 @@ $nav-item-selected-background: $primary-color;
 $nav-item-background: #b7b7b7;
 
 $cell-border: 1px dotted $secondary-color;
+$cell-image-position: top;
 
 $widget-background: #f3f3f3;
 

static/eurelien-cd28/config.json

@@ -9,6 +9,14 @@
       "COMBO_ASSET_SLOTS.update": {
         "header:background": { "label": "Têtière : fond" },
         "header:logo": { "label": "Têtière : logo" }
+      },
+      "WCS_CATEGORY_ASSET_SLOTS": {
+        "picture": {
+          "prefix": "Photographie"
+        },
+        "logo": {
+          "prefix": "Pictogramme"
+        }
       }
     }
   }

templates/variants/eurelien-cd28/combo/wcs/forms_of_category.html

@@ -0,0 +1,14 @@
+{% extends 'combo/wcs/forms_of_category.html' %}
+{% load assets %}
+
+{% block cell-header %}
+<h2 style="background-image: url({% asset_url "wcs:category:logo:"|add:cell.category_reference size="65x65" %})">
+  <span>{{ title }}</span>
+</h2>
+{% include "combo/asset_picture_fragment.html" %}
+{% if description %}
+<div class="intro">
+{{ description|safe }}
+</div>
+{% endif %}
+{% endblock cell-header %}