accounts: use flexbox to display validation info (#46735)

This commit is contained in:
Serghei Mihai 2020-09-18 10:46:08 +02:00
parent 127e2ef128
commit b6abd0d209
2 changed files with 31 additions and 29 deletions

View File

@ -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;
}

View File

@ -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 %}