diff --git a/static/grandlyon-cut/_custom.scss b/static/grandlyon-cut/_custom.scss index 613b415..5ca00fe 100644 --- a/static/grandlyon-cut/_custom.scss +++ b/static/grandlyon-cut/_custom.scss @@ -259,7 +259,56 @@ div#main-content { padding-bottom: 0; } } - div#registration_completion { + div.registration-steps { + position: relative; + ul { + padding: 0; + @media screen and (max-width: 800px) { + display: none; + } + li { + list-style-type: none; + display: inline-flex; + width: 24.5%; + box-sizing: border-box; + align-items: center; + flex-direction: column; + span { + &.marker { + border: 1px solid #000; + padding: 1em; + border-radius: 50%; + width: 1em; + display: inline-block; + text-align: center; + background: $body-background; + z-index: 10; + } + &.label { + margin-top: 0.5em; + display: block; + text-transform: uppercase; + } + } + &.current { + span.marker { + background: #000; + color: #fff; + } + } + } + &::before { + position: absolute; + top: calc(50% - 1em); + content: ''; + border-top: 1px solid #000; + width: 74.5%; + left: 12.5%; + z-index: -1; + } + } + } + div#registration_completion, div.registration-steps { width: 60em; margin: 0 auto; h2 { diff --git a/templates/authentic2_idp_oidc/authorization.html b/templates/authentic2_idp_oidc/authorization.html index a6065bd..1800139 100644 --- a/templates/authentic2_idp_oidc/authorization.html +++ b/templates/authentic2_idp_oidc/authorization.html @@ -1,5 +1,6 @@ {% extends "authentic2/base-page.html" %} {% block content %} +{% include "registration/registration_steps.html" with active_step="share" %}

Afin de poursuivre votre navigation {{ request.partner.name }} souhaite accéder aux informations de votre {{ account_label }}. {% if scopes %} diff --git a/templates/registration/registration_complete.html b/templates/registration/registration_complete.html index 5e474fc..b0d3491 100644 --- a/templates/registration/registration_complete.html +++ b/templates/registration/registration_complete.html @@ -2,6 +2,7 @@ {% load i18n %} {% block content %} +{% include "registration/registration_steps.html" with active_step="activation" %}

Un courriel a été envoyé à {{ request.session.registered_email }}.

Suivez les instructions dans ce courriel pour poursuivre la création de votre compte.

diff --git a/templates/registration/registration_completion_form.html b/templates/registration/registration_completion_form.html index f760d8a..dddf0fb 100644 --- a/templates/registration/registration_completion_form.html +++ b/templates/registration/registration_completion_form.html @@ -2,6 +2,7 @@ {% load i18n %} {% block content %} +{% include "registration/registration_steps.html" with active_step="completion" %}

Finalisation de votre inscription

diff --git a/templates/registration/registration_form.html b/templates/registration/registration_form.html index 256a624..effbdf2 100644 --- a/templates/registration/registration_form.html +++ b/templates/registration/registration_form.html @@ -2,6 +2,8 @@ {% load i18n %} {% block content %} +{% include "registration/registration_steps.html" with active_step="activation" %} +

Créez votre {{ account_label }}

diff --git a/templates/registration/registration_steps.html b/templates/registration/registration_steps.html new file mode 100644 index 0000000..aa6878e --- /dev/null +++ b/templates/registration/registration_steps.html @@ -0,0 +1,22 @@ +
+
    + {% for step in registration_steps %} + {% endfor %} +
  • + 1 + Création de compte +
  • +
  • + 2 + Activation de compte +
  • +
  • + 3 + Complétion du profil +
  • +
  • + 4 + Partage des données +
  • +
+