From c1128bde37c8d3e43df0b97e9164e311af430afa Mon Sep 17 00:00:00 2001
From: Nicolas ROCHE <nroche@entrouvert.com>
Date: Sat, 10 Oct 2020 18:12:37 +0200
Subject: [PATCH] gers-cd32: simplify as a native theme (#47562)

---
 static/gers-cd32/_custom.scss                 | 228 +++---------------
 static/gers-cd32/_vars.scss                   |  12 +-
 static/gers-cd32/config.json                  |  12 +-
 templates/theme.html                          | 224 ++++++++---------
 .../gers-cd32/combo/page_template.html        |  31 ---
 templates/variants/gers-cd32/theme.html       |  35 ---
 6 files changed, 169 insertions(+), 373 deletions(-)
 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 fb4d79a8b..29277208b 100644
--- a/static/gers-cd32/_custom.scss
+++ b/static/gers-cd32/_custom.scss
@@ -1,214 +1,66 @@
 @import '../includes/fonts/montserrat';
 
-@mixin form-icon($content) {
-	content: $content;
-	font-family: FontAwesome;
-}
-
-div#header-pre {
-	display: flex;
-	flex-direction: row-reverse;
-	@media screen and (max-width: $my-tablet-limit) {
-		flex-direction: column;
-	}
-}
+$header-height: 300px;
+$header-border-height: 55px;
+$mobile-header-height: 230px;
 
-div#bandeau {
-	width: calc(100% - 610px);
-	@media screen and (max-width: $my-tablet-limit) {
-		width: 100%;
-	}
-	> img {
-		display: block;
-		height: auto;
-		max-width: 100%;
-		width: 100%;
+#header-wrapper {
+	border-top: $header-border-height solid $primary-color;
+	height: $header-height;
+	@media screen and ($max-mobile-viewport) {
+		height: $mobile-header-height;
 	}
 }
 
-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;
+	top: -$header-border-height;
+	line-height: 1em;
+	margin-top: 10px;
+	padding-left: 0;
+	a {
+		color: $tertiary-color;
+		@media screen and ($min-desktop-viewport) {
+			text-indent: 150px;
 		}
-	}
-	@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) {
+			text-indent: -10000px;
 		}
 	}
-	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;
-				}
-			}
-		}
-		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;
-			}
-		}
+}
+
+#toplinks {
+	top: -$header-border-height;
+	background: transparent;
+	@media screen and ($max-mobile-viewport) {
+		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;
-		}
+	a {
+		color: white;
 	}
 }
 
-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
+#nav ul {
+	margin-top: 0;
 }
 
-h1#logo {
-	display: none;
-}
-body.has-picture nav::after {
-	display: none;
+div.cell.foldable.folded > div > h2:first-child + picture {
+	display: block;
 }
-div#nav-wrapper {
-	position: absolute;
-	top: 135px;
-	right: 15px;
-	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;
-		}
-	}
-	button::after {
-		content: "Menu";
-		display: block;
-		@media screen and (max-width: $my-mobile-limit) {
-			display: none;
-		}
-	}
-	#nav > ul {
-		border-top: none;
-		position: relative;
-		top: $nav-menu-side;
-		a {
-			color: white;
-		}
-	}
+
+div#sidebar {
+	box-shadow: 3px 3px 20px 0px #dedede;
+	margin-right: 2.5em;
 }
 
-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;
+@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 ef52a9be9..234248a63 100644
--- a/static/gers-cd32/_vars.scss
+++ b/static/gers-cd32/_vars.scss
@@ -2,24 +2,24 @@ $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;
 
 $cell-border: none;
 $cell-entry-hover-background: transparent;
 
 $title-transform: uppercase;
diff --git a/static/gers-cd32/config.json b/static/gers-cd32/config.json
index 6a4390c78..e5560f4f4 100644
--- a/static/gers-cd32/config.json
+++ b/static/gers-cd32/config.json
@@ -1,7 +1,17 @@
 {
   "label": "Gers (CD32)",
   "variables": {
-    "include_top_links": false,
+    "include_top_links": true,
+    "pwa_display": "standalone",
+    "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/templates/theme.html b/templates/theme.html
index 4f611da1a..d0abd1f95 100644
--- a/templates/theme.html
+++ b/templates/theme.html
@@ -27,139 +27,139 @@
     {% if pwa_display == "standalone" %}
     <meta name="apple-mobile-web-app-capable" content="yes">
     {% endif %}
     {% block extra_top_head %}
     {% endblock %}
     {{ media }}
     {% block css-variant %}
     {% if css_variant %}
-      <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "" %}{{css_variant}}/style.css?{% start_timestamp %}">
+    <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "" %}{{css_variant}}/style.css?{% start_timestamp %}">
     {% else %}
-      <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "style.css" %}?{% start_timestamp %}">
+    <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "style.css" %}?{% start_timestamp %}">
     {% endif %}
     {% endblock %}
     {% block extra_css %}
     {% endblock %}
     {% block extra_scripts %}
     {% endblock %}
   </head>
   <body {% block bodyargs %}class="{% block bodyclasses %}{% endblock %}" {% block bodyattrs %}{% endblock %}{% endblock %}>
-   <div id="nav-skip">
-    <ul>
-     <li><a href="#main-content">Aller au contenu</a></li>
-     <li><a href="#nav">Aller au menu</a></li>
-    </ul>
-   </div>
-
-   <div id="page" {% block page-args %}{% endblock %}>
-    <header role="banner" class="site-header">
-    <div id="header-wrapper" >
-    {% block header-pre %}{% endblock %}
-    <div id="header">
-     {% block header-top %}{% endblock %}
-     <div id="top">
-       {% block header-title %}
-       <h1 id="logo"><a accesskey="1" href="{% firstof logo_link_url portal_url '/' %}">{% firstof global_title site_title "Compte Citoyen" %}</a></h1>
-       {% endblock %}
-       {% if include_top_links != False %}
-        <div id="toplinks">
-          {% block user-info %}
-          {% if user.is_authenticated %}
-          <span class="logged-in">
-            <span class="connected-user">{{user.first_name}} {{user.last_name}}</span>
-            <a class="logout" href="{% url 'auth_logout' %}">D&eacute;connexion</a>
-          </span>
-          {% endif %}
-          {% endblock %}
-        </div> <!-- toplinks -->
-        {% endif %}
-     </div>
-     {% block header-bottom %}{% endblock %}
-    </div> <!-- header -->
-    {% block header-post %}{% endblock %}
-    </div> <!-- header-wrapper -->
-    </header>
+    <div id="nav-skip">
+      <ul>
+        <li><a href="#main-content">Aller au contenu</a></li>
+        <li><a href="#nav">Aller au menu</a></li>
+      </ul>
+    </div>
 
-{% block nav %}
-<nav role="navigation">
-<div id="nav-wrapper" class="gru-nav-wrapper">
-{% block nav-pre %}{% endblock %}
-<div id="nav" class="gru-nav togglable">
-{% block nav-top %}{% endblock %}
-  <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
-    <span class="sr-only">Ouvrir le menu</span>
-    <span class="icon-bar icon-bar-1"></span>
-    <span class="icon-bar icon-bar-2"></span>
-    <span class="icon-bar icon-bar-3"></span>
-  </button>
-{% block menu %}
-  <ul>
-    <li class="link-accueil"><a href="{{combo_url}}">Accueil</a></li>
-    <li class="link-demarches"><a href="{{wcs_url}}/login">Démarches</a></li>
-    <li class="link-profil"><a href="{{authentic_url}}/accounts/">Profil</a></li>
-    <li class="link-aide"><a href="{{help_url}}">Aide</a></li>
-  </ul>
-{% endblock %}
-{% block nav-bottom %}{% endblock %}
-</div> <!-- nav -->
-{% block nav-post %}{% endblock %}
-</div> <!-- nav-wrapper -->
-</nav>
-{% endblock %}
+    <div id="page" {% block page-args %}{% endblock %}>
+      <header role="banner" class="site-header">
+        <div id="header-wrapper" >
+          {% block header-pre %}{% endblock %}
+          <div id="header">
+            {% block header-top %}{% endblock %}
+            <div id="top">
+              {% block header-title %}
+              <h1 id="logo"><a accesskey="1" href="{% firstof logo_link_url portal_url '/' %}">{% firstof global_title site_title "Compte Citoyen" %}</a></h1>
+              {% endblock %}
+              {% if include_top_links != False %}
+              <div id="toplinks">
+                {% block user-info %}
+                {% if user.is_authenticated %}
+                <span class="logged-in">
+                  <span class="connected-user">{{user.first_name}} {{user.last_name}}</span>
+                  <a class="logout" href="{% url 'auth_logout' %}">D&eacute;connexion</a>
+                </span>
+                {% endif %}
+                {% endblock %}
+              </div> <!-- toplinks -->
+              {% endif %}
+            </div>
+            {% block header-bottom %}{% endblock %}
+          </div> <!-- header -->
+          {% block header-post %}{% endblock %}
+        </div> <!-- header-wrapper -->
+      </header>
 
-  {% block before-main-content %}
-  {% endblock %}
+      {% block nav %}
+      <nav role="navigation">
+        <div id="nav-wrapper" class="gru-nav-wrapper">
+          {% block nav-pre %}{% endblock %}
+          <div id="nav" class="gru-nav togglable">
+            {% block nav-top %}{% endblock %}
+            <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
+              <span class="sr-only">Ouvrir le menu</span>
+              <span class="icon-bar icon-bar-1"></span>
+              <span class="icon-bar icon-bar-2"></span>
+              <span class="icon-bar icon-bar-3"></span>
+            </button>
+            {% block menu %}
+            <ul>
+              <li class="link-accueil"><a href="{{combo_url}}">Accueil</a></li>
+              <li class="link-demarches"><a href="{{wcs_url}}/login">Démarches</a></li>
+              <li class="link-profil"><a href="{{authentic_url}}/accounts/">Profil</a></li>
+              <li class="link-aide"><a href="{{help_url}}">Aide</a></li>
+            </ul>
+            {% endblock %}
+            {% block nav-bottom %}{% endblock %}
+          </div> <!-- nav -->
+          {% block nav-post %}{% endblock %}
+        </div> <!-- nav-wrapper -->
+      </nav>
+      {% endblock %}
 
-  <main role="main">
-  <div id="main-content-wrapper">
-    <div id="main-content">
+      {% block before-main-content %}
+      {% endblock %}
 
-{% block content-messages %}
-{% block messages %}
-{% if messages %}
-  <div id="messages" class="messages-login">
-    <ul class="messages">
-        {% for message in messages %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-        {% endfor %}
-    </ul>
-  </div>
-{% endif %}
-{% endblock %}
-{% endblock %}
+      <main role="main">
+        <div id="main-content-wrapper">
+          <div id="main-content">
 
-    {% block content-pre %}{% endblock %}
-    <div id="content" class="gru-content large">
-            {% block content-top %}{% endblock %}
-            {% block content %}
+            {% block content-messages %}
+            {% block messages %}
+            {% if messages %}
+            <div id="messages" class="messages-login">
+              <ul class="messages">
+                {% for message in messages %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+            {% endif %}
+            {% endblock %}
             {% endblock %}
-            {% block content-bottom %}{% endblock %}
-    </div> <!-- #content -->
-    {% block content-post %}{% endblock %}
 
-    </div> <!-- #main-content -->
-    </div> <!-- #main-content-wrapper -->
-   </main>
+            {% block content-pre %}{% endblock %}
+            <div id="content" class="gru-content large">
+              {% block content-top %}{% endblock %}
+              {% block content %}
+              {% endblock %}
+              {% block content-bottom %}{% endblock %}
+            </div> <!-- #content -->
+            {% block content-post %}{% endblock %}
 
-   <footer role="contentinfo">
-    {% block footer-pre %}{% endblock %}
-    <div id="footer-wrapper">
-    <div id="footer">
-      {% block footer-top %}{% endblock %}
-      {% block footer %}
-      <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>
-      {% endblock %}
-      {% block footer-bottom %}
-          {% block back-top %}
-          {% endblock %}
-      {% endblock %}
-    </div>
-    </div>
-    {% block footer-post %}{% endblock %}
-   </footer>
-   </div> <!-- #page -->
-   {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}
-   {% include "includes/tracking.html" %}
-   {% block body-bottom %}
-   {% endblock %}
+          </div> <!-- #main-content -->
+        </div> <!-- #main-content-wrapper -->
+      </main>
+
+      <footer role="contentinfo">
+        {% block footer-pre %}{% endblock %}
+        <div id="footer-wrapper">
+          <div id="footer">
+            {% block footer-top %}{% endblock %}
+            {% block footer %}
+            <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>
+            {% endblock %}
+            {% block footer-bottom %}
+            {% block back-top %}
+            {% endblock %}
+            {% endblock %}
+          </div>
+        </div>
+        {% block footer-post %}{% endblock %}
+      </footer>
+    </div> <!-- #page -->
+    {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}
+    {% include "includes/tracking.html" %}
+    {% block body-bottom %}
+    {% endblock %}
   </body>
 </html>
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 c0265bba6..000000000
--- 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 a769722e7..000000000
--- 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

