From b6abd0d209812b0c50ce1b79ba90b7153e95597c Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Fri, 18 Sep 2020 10:46:08 +0200
Subject: [PATCH] accounts: use flexbox to display validation info (#46735)

---
 static/grandlyon-cut/_custom.scss  | 22 ++++++++---------
 templates/authentic2/accounts.html | 38 +++++++++++++++++-------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/static/grandlyon-cut/_custom.scss b/static/grandlyon-cut/_custom.scss
index 4384f08..657842c 100644
--- a/static/grandlyon-cut/_custom.scss
+++ b/static/grandlyon-cut/_custom.scss
@@ -916,24 +916,22 @@ div.cut-edit {
             padding: 1ex 1em;
             border-radius: 0.3em;
             margin: 4ex 0 0 0;
+			> div {
+				display: flex;
+				flex-wrap: wrap;
+				> div {
+					width: 50%;
+					@media screen and (max-width: $mobile-limit) {
+						width: auto;
+					}
+				}
+			}
             div.info {
-                float: left;
-                width: 50%;
-                @media screen and (max-width: $mobile-limit) {
-                    float: none;
-                    width: auto;
-                }
                 p {
                     text-align: left;
                 }
             }
             div.fc-block {
-                width: 42%;
-                float: right;
-                @media screen and (max-width: $mobile-limit) {
-                    float: none;
-                    width: auto;
-                }
                 a {
                     color: #fff;
                 }
diff --git a/templates/authentic2/accounts.html b/templates/authentic2/accounts.html
index badfac9..927e8d7 100644
--- a/templates/authentic2/accounts.html
+++ b/templates/authentic2/accounts.html
@@ -22,17 +22,19 @@
     {% if user.attributes.validated and user.attributes.validation_context == 'FC' %}
     <div class="fc-validated">
       <h2>VOTRE IDENTITÉ VÉRIFIÉE</h2>
-      <div class="info">
-      <p>Votre identité a été vérifiée le <strong>{{ user.attributes.validation_date }}</strong> par liaison à FranceConnect.
-      <p>L'identité vérifiée permet d'accèder à des services qui demandent une identité vérifiée.</p>
-      </div>
-      <div class="fc-block">
-        <p class="more-info"><a href="{{ help_url }}" target="_blank" rel="noopener">En savoir +</a></p>
-        {% if user.fc_accounts.exists %}
-        {% for id, block in frontends_block_by_id.items %}
-        {{ block.content|safe }}
-        {% endfor %}
-        {% endif %}
+      <div>
+        <div class="info">
+          <p>Votre identité a été vérifiée le <strong>{{ user.attributes.validation_date }}</strong> par liaison à FranceConnect.
+          <p>L'identité vérifiée permet d'accèder à des services qui demandent une identité vérifiée.</p>
+        </div>
+        <div class="fc-block">
+          <p class="more-info"><a href="{{ help_url }}" target="_blank" rel="noopener">En savoir +</a></p>
+          {% if user.fc_accounts.exists %}
+          {% for id, block in frontends_block_by_id.items %}
+          {{ block.content|safe }}
+          {% endfor %}
+          {% endif %}
+        </div>
       </div>
     </div>
     {% endif %}
@@ -40,12 +42,14 @@
     {% if user.attributes.validated and user.attributes.validation_context != 'FC' %}
     <div class="guichet-validated">
       <h2>VOTRE IDENTITÉ VERIFIÉE</h2>
-      <div class="info">
-      <p>Votre identité a été certifiée le <strong>{{ user.attributes.validation_date }}</strong> par un agent.
-      <p>L'identité certifiée permet d'accèder à des services qui demandent une identité certifiée.</p>
-      </div>
-      <div class="fc-block">
-        <p class="more-info"><a href="{{ help_url }}" target="_blank" rel="noopener">En savoir +</a></p>
+      <div>
+        <div class="info">
+          <p>Votre identité a été certifiée le <strong>{{ user.attributes.validation_date }}</strong> par un agent.
+          <p>L'identité certifiée permet d'accèder à des services qui demandent une identité certifiée.</p>
+        </div>
+        <div class="fc-block">
+          <p class="more-info"><a href="{{ help_url }}" target="_blank" rel="noopener">En savoir +</a></p>
+        </div>
       </div>
     </div>
     {% endif %}