loire-atlantique-cd44: simplify login and registration blocks layout (#75788) #219
|
|
@ -288,9 +288,12 @@ div.buttons.submit {
|
|||
#login-page {
|
||||
|
||||
background-color: $ds44-LA;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.connexion-title {
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
img { height: 30px; }
|
||||
h1 {
|
||||
display: block;
|
||||
|
|
@ -306,41 +309,40 @@ div.buttons.submit {
|
|||
|
||||
.block {
|
||||
background-color: $ds44-LA;
|
||||
padding: 10px;
|
||||
margin: 1em !important;
|
||||
min-height: 320px;
|
||||
div {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.block-oidc {
|
||||
width: auto !important;
|
||||
min-height: 0;
|
||||
float: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block-password {
|
||||
h2 {
|
||||
display: none; // masquage du titre "Connexion" redondant
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
h3, form {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
&.methods1 > .block {
|
||||
width: 50%;
|
||||
width: calc(50% - 2em);
|
||||
margin: 0;
|
||||
margin-right: 2em;
|
||||
float: left;
|
||||
}
|
||||
&.methods2 > .block {
|
||||
width: calc(33% - 2em);
|
||||
}
|
||||
}
|
||||
|
||||
// hack to remove duplicate title
|
||||
.block-password > h2 + h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Separator
|
||||
&.methods3 > .block:last-child,
|
||||
&.methods3 > .block:nth-last-child(2) {
|
||||
border-left: dotted 1px black;
|
||||
@media (max-width: $mobile-limit) {
|
||||
border: none;
|
||||
& > .block + .block {
|
||||
@media ($min-desktop-viewport) {
|
||||
border-left: dotted 1px black;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
button.submit-button:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
|
@ -350,29 +352,10 @@ div.buttons.submit {
|
|||
}
|
||||
|
||||
#register-account {
|
||||
padding-left: 20px;
|
||||
.register {
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
color: white;
|
||||
background: black;
|
||||
padding: 5px 15px 5px 15px !important;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Bouton connexion agent
|
||||
|
|
@ -383,7 +366,6 @@ div.buttons.submit {
|
|||
color: black;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#login-page-encart {
|
||||
|
|
|
|||
|
|
@ -10,46 +10,17 @@
|
|||
{% endblock %}
|
||||
|
||||
|
||||
{% block login-blocks %}
|
||||
|
||||
{% for id, login_block in blocks.items %}
|
||||
|
||||
{# bloc connexion agent #}
|
||||
{% if login_block.authenticator.type == "oidc" %}
|
||||
<div class="block block-{{login_block.authenticator.type}} block-{{login_block.authenticator.id}}">
|
||||
<div {% if login_block.extra_css_class %} class="{{ login_block.extra_css_class }}"{% endif %}>
|
||||
{{ login_block.content|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# bloc courriel + mot de passe #}
|
||||
{% if login_block.authenticator.type == "password" %}
|
||||
<div class="block block-{{login_block.authenticator.type}} block-{{login_block.authenticator.id}}">
|
||||
<h3>Se connecter</h3>
|
||||
<div {% if login_block.extra_css_class %} class="{{ login_block.extra_css_class }}"{% endif %}>
|
||||
{{ login_block.content|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# bloc FranceConnect #}
|
||||
{% if login_block.authenticator.type == "fc" %}
|
||||
<div class="block block-{{login_block.authenticator.type}} block-{{login_block.authenticator.id}}">
|
||||
<div {% if login_block.extra_css_class %} class="{{ login_block.extra_css_class }}"{% endif %}>
|
||||
{{ login_block.content|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% block login-bottom %}
|
||||
{# bloc Créer un compte #}
|
||||
{% block login-welcome-text %}
|
||||
<div id="register-account" class="block connexion creercompte">
|
||||
<h3>Créer un compte</h3>
|
||||
<p>Vous n'avez pas encore de compte ?<br>Créer un compte vous permet de suivre plus simplement vos démarches en ligne.</p>
|
||||
<div class="register"><a href="{{ registration_url }}">Créer un compte</a></div>
|
||||
<div>
|
||||
<h2>Créer un compte</h2>
|
||||
<div class="cell--body">
|
||||
<p>Vous n'avez pas encore de compte ?<br>Créer un compte vous permet de suivre plus simplement vos démarches en ligne.</p>
|
||||
<div class="register"><a class="pk-button" href="{{ registration_url }}">Créer un compte</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
@ -69,8 +40,4 @@
|
|||
<p>Pour exercer ces droits ou pour toute question relative au traitement de vos données dans ce dispositif, vous pouvez contacter notre délégué à la protection des données à l’adresse suivante : Département de Loire-Atlantique, Délégué à la protection des données, Direction juridique, 3 quai ceineray, CS 94109, 44041 Nantes Cedex 1.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$("#oidc-a-keycloak-agents").addClass("button");
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{% extends "authentic2/login_password_form.html" %}
|
||||
|
||||
{% block login-block-title %}<h2>Se connecter</h2> {{ default_title }} {% endblock %}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{% extends "authentic2/login_password_registration_form.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block registration-password-form-pre %}
|
||||
<h2>{% trans "Registration" %}</h2>
|
||||
|
||||
<p>Merci de saisir votre courriel.</p>
|
||||
<p>Après validation, vous recevrez un message pour confirmer la création de votre compte.</p>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue