From a25056ad27da9aca35152d323a3b418f222c83fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 18 Apr 2021 20:09:23 +0200
Subject: [PATCH] templates: use sidebar for links to option screens (#53228)

---
 hobo/static/css/style.scss    | 26 +++++++++++++
 hobo/templates/hobo/home.html | 69 +++++++++++++++++------------------
 tests/test_home_views.py      | 10 ++---
 3 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/hobo/static/css/style.scss b/hobo/static/css/style.scss
index e03df41..7a839f5 100644
--- a/hobo/static/css/style.scss
+++ b/hobo/static/css/style.scss
@@ -260,3 +260,29 @@ ul#id_scopes li {
 #id_meta_keywords {
 	width: 100%;
 }
+
+a.button.button-paragraph {
+	box-sizing: border-box;
+	display: block;
+	max-width: 100%;
+	width: 40rem;
+	margin-bottom: 1rem;
+}
+
+a.button.button-paragraph p {
+	font-weight: normal;
+	color: #333;
+	margin: 0;
+	margin-bottom: 5px;
+	line-height: 150%;
+	&.warning {
+		&::before {
+			font-family: FontAwesome;
+			content: "\f071";  // exclamation-triangle
+		}
+	}
+}
+
+a.button.button-paragraph:hover p {
+	color: white;
+}
diff --git a/hobo/templates/hobo/home.html b/hobo/templates/hobo/home.html
index 6734721..b4f0e82 100644
--- a/hobo/templates/hobo/home.html
+++ b/hobo/templates/hobo/home.html
@@ -6,49 +6,14 @@
   <span class="actions">
   <a class="extra-actions-menu-opener"></a>
   <ul class="extra-actions-menu">
-    {% if has_authentic %}
-    <li><a href="{% url 'profile-home' %}">{% trans 'User Profile' %}</a></li>
-    {% endif %}
-    <li><a href="{% url 'theme-home' %}">{% trans 'Theme' %}</a></li>
-    <li><a href="{% url 'emails-home' %}">{% trans 'Emails' %}</a></li>
-    <li><a href="{% url 'sms-home' %}">{% trans 'SMS' %}</a></li>
-    {% if has_authentic %}
-    <li><a href="{% url 'franceconnect-home' %}">FranceConnect</a></li>
-    {% endif %}
-    <li><a href="{% url 'matomo-home' %}">{% trans 'User tracking' %}</a></li>
-    <li><a href="{% url 'seo-home' %}">{% trans 'Indexing' %}</a></li>
-    <li><a href="{% url 'environment-home' %}">{% trans 'Services' %}</a></li>
-    <li><a href="{% url 'environment-variables' %}">{% trans 'Variables' %}</a></li>
     <li><a rel="popup" href="{% url 'environment-import' %}">{% trans 'Import' %}</a></li>
     <li><a href="{% url 'environment-export' %}">{% trans 'Export' %}</a></li>
-    <li><a href="{% url 'debug-home' %}">{% trans 'Debugging' %}</a></li>
   </ul>
   </span>
 {% endblock %}
 
 {% block content %}
 
-{% if not has_global_title %}
-  <div class="warningnotice">
-    <p class="action">
-      <span class="action-label">
-        {% trans 'You have not yet defined a name for the platform; the generic title "Compte Citoyen" is used.' %}
-      </span>
-      <a class="action-button" rel="popup" href="{% url 'theme-options' %}">{% trans 'Set up a title' %}</a>
-    </p>
-  </div>
-{% endif %}
-{% if not has_default_from_email %}
-  <div class="warningnotice">
-    <p class="action">
-      <span class="action-label">
-      {% trans "You have not yet defined an address for emails sent by Publik." %}
-      </span>
-      <a class="action-button" href="{% url 'emails-home' %}">{% trans 'Set up email options' %}</a>
-    </p>
-  </div>
-{% endif %}
-
 {% if services %}
 <div class="services">
 {% for service in services %}
@@ -121,3 +86,37 @@ $(function() {
 </script>
 
 {% endblock %}
+
+{% block sidebar %}
+<aside id="sidebar">
+ <h3>{% trans "Settings" %}</h3>
+
+ {% if has_authentic %}
+   <a class="button button-paragraph" href="{% url 'profile-home' %}">{% trans 'User Profile' %}</a>
+ {% endif %}
+ <a class="button button-paragraph" href="{% url 'theme-home' %}">{% trans 'Theme' %}
+   {% if not has_global_title %}
+   <p class="warning">
+     {% trans 'You have not yet defined a name for the platform; the generic title "Compte Citoyen" is used.' %}
+   </p>
+   {% endif %}
+ </a>
+ <a class="button button-paragraph" href="{% url 'emails-home' %}">{% trans 'Emails' %}
+   {% if not has_default_from_email %}
+   <p class="warning">
+     {% trans "You have not yet defined an address for emails sent by Publik." %}
+    </p>
+   {% endif %}
+ </a>
+ <a class="button button-paragraph" href="{% url 'sms-home' %}">{% trans 'SMS' %}</a>
+ {% if has_authentic %}
+   <a class="button button-paragraph" href="{% url 'franceconnect-home' %}">FranceConnect</a>
+ {% endif %}
+ <a class="button button-paragraph" href="{% url 'matomo-home' %}">{% trans 'User tracking' %}</a>
+ <a class="button button-paragraph" href="{% url 'seo-home' %}">{% trans 'Indexing' %}</a>
+ <a class="button button-paragraph" href="{% url 'environment-home' %}">{% trans 'Services' %}</a>
+ <a class="button button-paragraph" href="{% url 'environment-variables' %}">{% trans 'Variables' %}</a>
+ <a class="button button-paragraph" href="{% url 'debug-home' %}">{% trans 'Debugging' %}</a>
+
+</aside>
+{% endblock %}
diff --git a/tests/test_home_views.py b/tests/test_home_views.py
index 86eeb66..587fd9a 100644
--- a/tests/test_home_views.py
+++ b/tests/test_home_views.py
@@ -101,14 +101,14 @@ def test_menu_view(app, admin_user):
 def test_warning_notifications(app, admin_user):
     app = login(app)
     resp = app.get('/')
-    assert len(resp.html.find_all('div', {'class': 'warningnotice'})) == 2
+    assert len(resp.html.find_all('p', {'class': 'warning'})) == 2
 
-    assert resp.html.find('div', {'class': 'warningnotice'}).a['href'] == '/theme/options'
+    assert resp.html.find('p', {'class': 'warning'}).parent['href'] == '/theme/'
     Variable.objects.create(name='global_title', value='Publik')
     resp = app.get('/')
-    assert len(resp.html.find_all('div', {'class': 'warningnotice'})) == 1
+    assert len(resp.html.find_all('p', {'class': 'warning'})) == 1
 
-    assert resp.html.find('div', {'class': 'warningnotice'}).a['href'] == '/emails/'
+    assert resp.html.find('p', {'class': 'warning'}).parent['href'] == '/emails/'
     Variable.objects.create(name='default_from_email', value='publik@example.com')
     resp = app.get('/')
-    assert not resp.html.find_all('div', {'class': 'warningnotice'})
+    assert not resp.html.find_all('p', {'class': 'warning'})