From 26fdcbe8efaf33bb0c242c3c67eb9a7a88d3892e Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@dgnum.eu>
Date: Sun, 22 Sep 2024 20:13:55 +0200
Subject: [PATCH] feat(home):feat(templates): Move style to the sass bundle

---
 src/shared/static/bulma/bulma.scss            | 22 ++++++-
 .../templates/account/create_kanidm.html      |  3 +-
 .../templates/account/forbidden_category.html |  1 +
 src/shared/templates/account/profile.html     | 61 ++++++++-----------
 src/shared/templates/home.html                | 18 +++---
 .../socialaccount/snippets/provider_list.html | 29 ++++-----
 6 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/src/shared/static/bulma/bulma.scss b/src/shared/static/bulma/bulma.scss
index 8bcb9a5..526e83d 100644
--- a/src/shared/static/bulma/bulma.scss
+++ b/src/shared/static/bulma/bulma.scss
@@ -7,7 +7,7 @@ $dark: rgb(46, 46, 46);
 @use "sass" with (
   $primary: $blue,
   $link: rgb(72, 95, 199),
-  $dark: $dark,
+  $dark: $dark
 );
 
 body {
@@ -17,6 +17,26 @@ body {
   justify-content: space-between;
 }
 
+.bt-link {
+  display: flex;
+  width: 100%;
+  margin-bottom: calc(0.5 * var(--bulma-block-spacing));
+  font-size: 1.25rem;
+
+  // Dark color for text
+  --bulma-color-l: var(--bulma-dark-l);
+  --bulma-color-l-delta: 0%;
+  color: hsl(
+    var(--bulma-dark-h),
+    var(--bulma-dark-s),
+    calc(var(--bulma-color-l) + var(--bulma-color-l-delta))
+  );
+}
+
+.grid.groups {
+  --bulma-grid-column-min: 24rem;
+}
+
 #notifications {
   margin-left: -0.75rem;
   margin-right: -0.75rem;
diff --git a/src/shared/templates/account/create_kanidm.html b/src/shared/templates/account/create_kanidm.html
index 2ccb838..c17aa91 100644
--- a/src/shared/templates/account/create_kanidm.html
+++ b/src/shared/templates/account/create_kanidm.html
@@ -1,11 +1,12 @@
 {% extends "base.html" %}
+
 {% load i18n %}
 
 {% block content %}
   <h2 class="subtitle">{% trans "Création de compte Kanidm" %}</h2>
   <hr>
 
-  <form class="container is-max-tablet" method="post">
+  <form method="post">
     {% csrf_token %}
     {% include "bulma/form.html" with form=form %}
 
diff --git a/src/shared/templates/account/forbidden_category.html b/src/shared/templates/account/forbidden_category.html
index 1892cce..c296c89 100644
--- a/src/shared/templates/account/forbidden_category.html
+++ b/src/shared/templates/account/forbidden_category.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+
 {% load i18n %}
 
 {% block content %}
diff --git a/src/shared/templates/account/profile.html b/src/shared/templates/account/profile.html
index 14a90dc..2c8dc79 100644
--- a/src/shared/templates/account/profile.html
+++ b/src/shared/templates/account/profile.html
@@ -1,13 +1,6 @@
 {% extends "base.html" %}
-{% load i18n %}
 
-{% block extra_head %}
-  <style>
-    .grid.groups {
-      --bulma-grid-column-min: 24rem;
-    }
-  </style>
-{% endblock extra_head %}
+{% load i18n %}
 
 {% block content %}
   <h2 class="subtitle">
@@ -17,16 +10,14 @@
   <hr>
 
   {% if user.kanidm.radius_secret %}
-  <h3 class="has-text-weight-bold mb-3">{% trans "Mot de passe WiFi :" %}</h3>
+    <h3 class="has-text-weight-bold mb-3">{% trans "Mot de passe WiFi :" %}</h3>
 
-  <input
-    id="radius-secret"
-    onclick="document.querySelector('#radius-secret').select()"
-    class="button is-fullwidth is-primary is-size-4"
-    value="{{ user.kanidm.radius_secret }}"
-    readonly
-  />
-  <br>
+    <input id="radius-secret"
+           onclick="document.querySelector('#radius-secret').select()"
+           class="button is-fullwidth is-primary is-size-4"
+           value="{{ user.kanidm.radius_secret }}"
+           readonly />
+    <br>
   {% endif %}
 
   <h3 class="has-text-weight-bold mb-3">{% trans "Adresse e-mail :" %}</h3>
@@ -34,28 +25,28 @@
   <br>
 
   {% if user.kanidm %}
-  <h2 class="subtitle mt-4">{% trans "Informations techniques" %}</h2>
-  <hr>
+    <h2 class="subtitle mt-4">{% trans "Informations techniques" %}</h2>
+    <hr>
 
-  <h3 class="has-text-weight-bold mb-3">{% trans "Identifiant unique :" %}</h3>
+    <h3 class="has-text-weight-bold mb-3">{% trans "Identifiant unique :" %}</h3>
 
-  <input
-    id="uuid"
-    onclick="document.querySelector('#uuid').select()"
-    class="button is-fullwidth"
-    value="{{ user.kanidm.person.uuid }}"
-    readonly
-  />
-  <br>
+    <input id="uuid"
+           onclick="document.querySelector('#uuid').select()"
+           class="button is-fullwidth"
+           value="{{ user.kanidm.person.uuid }}"
+           readonly />
+    <br>
 
-  <h3 class="has-text-weight-bold mb-3">{% trans "Membre des groupes suivants :" %}</h3>
+    <h3 class="has-text-weight-bold mb-3">{% trans "Membre des groupes suivants :" %}</h3>
 
-  <div class="grid groups">
-  {% for group in user.kanidm.person.memberof %}
-    <span class="cell button is-fullwidth is-static">{{ group }}</span>
-  {% endfor %}
-  </div>
+    <div class="grid groups">
+      {% for group in user.kanidm.person.memberof %}
+        <span class="cell button is-fullwidth is-static">{{ group }}</span>
+      {% endfor %}
+    </div>
   {% else %}
-    <div class="notification px-5 py-5 is-warning is-light has-text-centered is-size-4 mt-6">{% trans "Pas de compte DGNum répertorié." %}</div>
+    <div class="notification px-5 py-5 is-warning is-light has-text-centered is-size-4 mt-6">
+      {% trans "Pas de compte DGNum répertorié." %}
+    </div>
   {% endif %}
 {% endblock content %}
diff --git a/src/shared/templates/home.html b/src/shared/templates/home.html
index 6cb248e..ffe3eb9 100644
--- a/src/shared/templates/home.html
+++ b/src/shared/templates/home.html
@@ -1,12 +1,16 @@
 {% extends "base.html" %}
+
 {% load i18n %}
 
 {% block content %}
-  {% if user.is_authenticated %}
-    <a class="button is-fullwidth is-size-4 is-primary has-text-dark block" href="{% url 'dgsi:dgn-profile' %}">{% trans "Mon profil" %}</a>
-  {% endif %}
-  {% if user.is_admin %}
-    <a class="button is-fullwidth is-size-4 is-danger has-text-dark block" href="{% url 'dgsi:dgn-create_user' %}">{% trans "Créer un nouveau compte" %}</a>
-    <a class="button is-fullwidth is-size-4 is-warning has-text-dark block" href="{% url 'admin:index' %}">{% trans "Interface admin" %}</a>
-  {% endif %}
+  <section class="section">
+    {% if user.is_authenticated %}
+      <a class="button bt-link is-primary" href="{% url 'dgsi:dgn-profile' %}">{% trans "Mon profil" %}</a>
+    {% endif %}
+    {% if user.is_admin %}
+      <a class="button bt-link is-danger"
+         href="{% url 'dgsi:dgn-create_user' %}">{% trans "Créer un nouveau compte Kanidm" %}</a>
+      <a class="button bt-link is-warning" href="{% url 'admin:index' %}">{% trans "Interface admin" %}</a>
+    {% endif %}
+  </section>
 {% endblock content %}
diff --git a/src/shared/templates/socialaccount/snippets/provider_list.html b/src/shared/templates/socialaccount/snippets/provider_list.html
index 87a3119..3eb191e 100644
--- a/src/shared/templates/socialaccount/snippets/provider_list.html
+++ b/src/shared/templates/socialaccount/snippets/provider_list.html
@@ -1,18 +1,19 @@
 {% load allauth socialaccount %}
+
 {% get_providers as socialaccount_providers %}
 {% if socialaccount_providers %}
-    {% element provider_list %}
-        {% for provider in socialaccount_providers %}
-            {% if provider.id == "openid" %}
-                {% for brand in provider.get_brands %}
-                    {% provider_login_url provider openid=brand.openid_url process=process as href %}
-                    {% element provider name=brand.name provider_id=provider.id href=href color=provider.app.settings.color %}
-                    {% endelement %}
-                {% endfor %}
-            {% endif %}
-            {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
-            {% element provider name=provider.name provider_id=provider.id href=href color=provider.app.settings.color %}
-            {% endelement %}
-        {% endfor %}
-    {% endelement %}
+  {% element provider_list %}
+  {% for provider in socialaccount_providers %}
+    {% if provider.id == "openid" %}
+      {% for brand in provider.get_brands %}
+        {% provider_login_url provider openid=brand.openid_url process=process as href %}
+        {% element provider name=brand.name provider_id=provider.id href=href color=provider.app.settings.color %}
+      {% endelement %}
+    {% endfor %}
+  {% endif %}
+  {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
+  {% element provider name=provider.name provider_id=provider.id href=href color=provider.app.settings.color %}
+{% endelement %}
+{% endfor %}
+{% endelement %}
 {% endif %}