From df957288b7f7c291be9af69854d35c56b5959cfe Mon Sep 17 00:00:00 2001
From: Nicolas ROCHE <nroche@entrouvert.com>
Date: Tue, 13 Oct 2020 23:12:19 +0200
Subject: [PATCH] gers-cd32: simplify as a native theme (#47562)

---
 static/gers-cd32/_custom.scss                 | 259 ++++++------------
 static/gers-cd32/_vars.scss                   |  15 +-
 static/gers-cd32/config.json                  |  10 +-
 static/gers-cd32/img/csm_defaultImage.png     | Bin 17828 -> 0 bytes
 static/gers-cd32/img/logo.png                 | Bin 4382 -> 2668 bytes
 .../gers-cd32/combo/page_template.html        |  31 ---
 templates/variants/gers-cd32/theme.html       |  35 ---
 7 files changed, 95 insertions(+), 255 deletions(-)
 delete mode 100644 static/gers-cd32/img/csm_defaultImage.png
 delete mode 100644 templates/variants/gers-cd32/combo/page_template.html
 delete mode 100644 templates/variants/gers-cd32/theme.html

diff --git a/static/gers-cd32/_custom.scss b/static/gers-cd32/_custom.scss
index fb4d79a8..4df95d16 100644
--- a/static/gers-cd32/_custom.scss
+++ b/static/gers-cd32/_custom.scss
@@ -1,214 +1,113 @@
 @import '../includes/fonts/montserrat';
 
-@mixin form-icon($content) {
-	content: $content;
-	font-family: FontAwesome;
-}
+$header-height: 400px;
+$mobile-header-height: 230px;
 
-div#header-pre {
-	display: flex;
-	flex-direction: row-reverse;
-	@media screen and (max-width: $my-tablet-limit) {
-		flex-direction: column;
+$header-border-height: 80px;
+$mobile-header-border-height: $nav-menu-side;
+
+body.has-header-background {
+	.site-header {
+		background: none;
 	}
 }
 
-div#bandeau {
-	width: calc(100% - 610px);
-	@media screen and (max-width: $my-tablet-limit) {
-		width: 100%;
+#header-wrapper {
+	background: url(/assets/header:background) center no-repeat;
+	@media screen and ($min-desktop-viewport) {
+		height: $header-height;
+		border-top: $header-border-height solid $primary-color;
 	}
-	> img {
-		display: block;
-		height: auto;
-		max-width: 100%;
-		width: 100%;
+	@media screen and ($max-mobile-viewport) {
+		height: $mobile-header-height;
+		border-top: $mobile-header-border-height solid $primary-color;
+		background-size: cover;
 	}
 }
 
-div#contenu {
-	box-sizing: content-box;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	width: 550px;
-	max-width: 550px;
-	padding: 60px 0 0 60px;
-	div#logo-ville img {
-		width: 294;
-		height: 83;
-	}
-	@media screen and (max-width: $my-tablet-limit) {
-		width: unset;
-		max-width: unset;
-		padding: 14px 0 0 20px;
-		div#logo-ville {
-			flex-grow: 1;
-			img {
-				width: 200px;
-				height: 56.45px;
-			}
-		}
+#header #top #logo {
+	position: absolute;
+	line-height: 1em;
+	margin-top: 10px;
+	padding-left: 0;
+	@media screen and ($min-desktop-viewport) {
+		top: -$header-border-height;
 	}
-	@media screen and (max-width: $my-mobile-limit) {
-		padding-top: 17px;
-		div#logo-ville img {
-			width: 130px;
-			height: 36.7px;
-		}
+	@media screen and ($max-mobile-viewport) {
+		top: -$mobile-header-border-height;
 	}
-	div#contenu-top {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		height: 195px;
-		@media screen and (max-width: $my-tablet-limit) {
-			flex-direction: row;
-			flex-grow: 1;
-			height: 60px;
-		}
-		@media screen and (max-width: $my-mobile-limit) {
-			flex-grow: 0;
-		}
-		div#demarches {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			color: white;
-			width: auto;
-			padding: 23px 35px 23px 35px;
-			background-color: $primary-color;
-			span.gru-icon::after {
-				@include form-icon("\f046");
-				font-size: 1rem;
-				font-weight: 400;
-			}
-			@media screen and (max-width: $my-tablet-limit) {
-				flex-grow: 2;
-				padding-top: 0.8em;
-				margin-bottom: 10px;
-			}
-			@media screen and (max-width: $my-mobile-limit) {
-				flex-grow: 0;
-				width: 0px;
-				padding-left: 20px;
-				margin-right: $nav-place-holder-width;
-				span:first-child {
-					display: none;
-				}
-			}
+	a {
+		color: $secondary-color;
+		@media screen and ($min-desktop-viewport) {
+			text-indent: 150px;
 		}
-		div#nav-place-holder {
-			display: none;
-			width: $nav-place-holder-width;
-			@media screen and (max-width: $my-tablet-limit) {
-				flex-grow: 1;
-				display: inherit;
-			}
-			@media screen and (max-width: $my-mobile-limit) {
-				flex-grow: 0;
-				display: none;
-			}
-		}
-	}
-	.logged-in, .login {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		font-size: 0.8rem;
-		font-weight: 300;
-		padding-top: 2em;
-		padding-bottom: 74px;
-		padding-right: 50px;
-		@media screen and (max-width: $my-tablet-limit) {
-			padding: 0.8em 8px 0.8em;
+		@media screen and ($max-mobile-viewport) {
+			text-indent: -10000px;
 		}
 	}
 }
 
-span.connected-user {
-	text-transform: uppercase;
-	font-weight: bold;
-	padding: 0 12px 0 4px;
-	font-weight: 600;
-}
-a.account::after {
-	@include form-icon("\f013");
-	font-size: 0.95rem;
-	color: black;
-	border-style: solid;
-	border-width: 0 0 0 1px;
-	padding: 0 7px 0 7px;
-	border-color: black
-}
-a.logout::after {
-	@include form-icon("\f011");
-	font-size: 0.95rem;
-	border-style: solid;
-	border-width: 0 0 0 1px;
-	padding: 0 7px 0 7px;
-	border-color: black
+#toplinks {
+	top: -$header-border-height;
+	background: transparent;
+	@media screen and ($max-mobile-viewport) {
+		top: -$header-border-height;
+		display: none;
+	}
+	a {
+		color: white;
+	}
 }
 
-h1#logo {
-	display: none;
-}
-body.has-picture nav::after {
-	display: none;
-}
-div#nav-wrapper {
-	position: absolute;
-	top: 135px;
-	right: 15px;
+#nav-wrapper {
+	@media screen and ($max-mobile-viewport) {
+		margin: 0;
+		position: absolute;
+		right: 0;
+		top: $header-border-height;
+		z-index: 1;
+	}
 	button {
 		position: absolute;
-		right: 4rem;
-		font-size: 0.7rem;
-		font-weight: 400;
-		padding-left: 50px;
-		color: $tertiary-color;
-		background: white;
-		@media screen and (max-width: $my-tablet-limit) {
-			top: -70px;
-			right: 40px;
-		}
-		@media screen and (max-width: $my-mobile-limit) {
-			right: 0;
-		}
-		span.icon-bar {
-			border: 2px solid $nav-button-color;
-		}
+		top: -$header-border-height;
+		right: 0;
 	}
-	button::after {
-		content: "Menu";
-		display: block;
-		@media screen and (max-width: $my-mobile-limit) {
-			display: none;
-		}
+}
+
+div#nav {
+	margin-top: -15px;
+	ul {
+		margin-top: 0;
 	}
-	#nav > ul {
-		border-top: none;
-		position: relative;
-		top: $nav-menu-side;
-		a {
-			color: white;
-		}
+	ul ul > li a:not(:hover) {
+		color: $tertiary-color;
+	}
+}
+
+#nav-wrapper ul {
+	border: none;
+	li:last-child {
+		border: none
 	}
 }
 
-div#header-post {
-	font-weight: 900;
-	font-size: 2.25rem;
-	line-height: 1;
-	text-align: center;
-	background-color: $secondary-color;
-	padding: 64px 0 70px 0;
-	margin-bottom: 45px;
+div.cell.foldable.folded > div > h2:first-child + picture {
+	display: block;
+}
+
+#sidebar {
+	box-shadow: 3px 3px 20px 0px #dedede;
+	margin-right: 2.5em;
+}
+
+@mixin form-icon($content) {
+	content: $content;
+	font-family: FontAwesome;
 }
 
 div#footer-wrapper {
 	padding: 66px 0 73px;
 }
 div#footer {
 	border-color: #fff;
 	max-width: 1320px;
diff --git a/static/gers-cd32/_vars.scss b/static/gers-cd32/_vars.scss
index ef52a9be..294b616f 100644
--- a/static/gers-cd32/_vars.scss
+++ b/static/gers-cd32/_vars.scss
@@ -2,27 +2,26 @@ $primary-color: #ae2217;
 $secondary-color: #f4f4f4;
 $tertiary-color: #0f183b;
 
 $border-radius: 3px;
 $font-size: 1.25em;
 $font-family: Montserrat, sans-serif;
 $link-color: $primary-color;
 
-$my-tablet-limit: 1279px;
 $my-mobile-limit: 796px;
-$nav-place-holder-width: 80px;
 
-$nav-mobile-limit: 50000px;
-$nav-button-color: $tertiary-color;
-$nav-button-background: $tertiary-color;
-$nav-mobile-menu-background: $tertiary-color;
+$nav-background: $secondary-color;
+$nav-color: $tertiary-color;
+$nav-full-width-background: true;
+$nav-button-background: $primary-color;
+$nav-item-selected-background: $primary-color;
+//$nav-mobile-menu-color: white;
 $nav-item-hover-background: $primary-color;
-$nav-border-color: transparent;
-$nav-menu-side: 36px;
+$nav-menu-side: 60px;
 
 $cell-border: none;
 $cell-entry-hover-background: transparent;
 
 $title-transform: uppercase;
 $title-font-size: 1.4rem;
 $title-weight: bold;
 $title-padding: 0.7rem 0rem;
diff --git a/static/gers-cd32/config.json b/static/gers-cd32/config.json
index 6a4390c7..4c0e17f3 100644
--- a/static/gers-cd32/config.json
+++ b/static/gers-cd32/config.json
@@ -1,7 +1,15 @@
 {
   "label": "Gers (CD32)",
   "variables": {
-    "include_top_links": false,
+    "logo_link_url": "/",
     "theme_color": "#ae2217"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      }
+    }
   }
 }
diff --git a/static/gers-cd32/img/csm_defaultImage.png b/static/gers-cd32/img/csm_defaultImage.png
deleted file mode 100644
index ea803fa865eb7b6c0e9c840075244debcd1b08be..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/static/gers-cd32/img/logo.png b/static/gers-cd32/img/logo.png
index 9d5381be6eb4e2c414960b0af777451efc0e8aa2..40caa482feafbf885846770257b5247a94006c99 100644
GIT binary patch
diff --git a/templates/variants/gers-cd32/combo/page_template.html b/templates/variants/gers-cd32/combo/page_template.html
deleted file mode 100644
index c0265bba..00000000
--- a/templates/variants/gers-cd32/combo/page_template.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% extends "combo/page_template.html" %}
-{% load combo %}
-
-{% block user-info %}
-{% skeleton_extra_placeholder user-info %}
-{% if user.is_authenticated %}
-
-<span class="logged-in">
-  Bonjour
-  <span class="connected-user">{{user.first_name}} {{user.last_name}}</span>
-  {% if idp_account_url %}
-  <a class="account" href="{{idp_account_url}}" title="Accéder à mon compte"></a>
-  {% endif %}
-  <a class="logout" href="{% url 'auth_logout' %}" title="Se déconnecter"></a>
-</span>
-
-{% else %}
-
-{% if idp_registration_url %}
-<span class="login">
-  <a accesskey="2" href="{% url 'auth_login' %}">Connexion</a>
-  <span class="sep">/</span>
-  <a class="registration" href="{{idp_registration_url}}">Inscription</a>
-</span>
-{% else %}
-<span class="login"><a accesskey="2" href="{% url 'auth_login' %}">Connexion <span class="sep">/</span> Inscription</a></span>
-{% endif %}
-
-{% endif %}
-{% end_skeleton_extra_placeholder %}
-{% endblock %}
diff --git a/templates/variants/gers-cd32/theme.html b/templates/variants/gers-cd32/theme.html
deleted file mode 100644
index a769722e..00000000
--- a/templates/variants/gers-cd32/theme.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% extends "theme.html" %}
-{% load static %}
-
-{% block header-pre %}
-<div id="header-pre">
-  <div id="contenu">
-    <div id="contenu-top">
-      <div id="logo-ville">
-        <a href="{{website_url}}">
-          <img src="{{ site_base }}{% static 'gers-cd32/img/logo.png' %}"/>
-        </a>
-      </div>
-      <div id="demarches"><span>Mes Démarches</span><span class="gru-icon"/></div>
-      <div id="nav-place-holder"></div>
-    </div>
-    {% block user-info %}
-    {% endblock %}
-  </div> <!-- contenu -->
-  <div id="bandeau">
-    {% if page.picture %}
-    <img src="{{site_base}}{{page.picture.url}}"/>
-    {% else %}
-    <img src="{{site_base}}{% static 'gers-cd32/img/csm_defaultImage.png' %}"/>
-    {% endif %}
-  </div>
-</div>
-{% endblock %}
-
-{% block header-post %}
-{% if  page.title %}
-<div id="header-post">
-  {{page.title}}
-</div>
-{% endif %}
-{% endblock %}
-- 
2.28.0

