Implémentation barre de progression

Lycee-Experimental · Feb 10, 2022 · f0c6a28 · f0c6a28
1 parent 9532c0f
commit f0c6a28
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 3 deletions.
diff --git a/static/css/formulaire_inscription.css b/static/css/formulaire_inscription.css
@@ -1,3 +1,80 @@
+/* Le style de la barre de progression du haut */
+
+#progressbar {
+    margin-bottom: 30px;
+    overflow: hidden;
+    color: lightgrey
+}
+
+#progressbar .active {
+    color: #e74c3c
+}
+
+#progressbar li {
+    list-style-type: none;
+    font-size: 15px;
+    width: 25%;
+    float: left;
+    position: relative;
+    font-weight: 400
+}
+
+#progressbar #identite:before {
+    font-family: FontAwesome;
+    content: "\f007"
+}
+
+#progressbar #responsables:before {
+    font-family: FontAwesome;
+    content: "\f0c0"
+}
+
+#progressbar #scolarite:before {
+    font-family: FontAwesome;
+    content: "\f040"
+}
+
+#progressbar #projet:before {
+    font-family: FontAwesome;
+    content: "\f00c"
+}
+
+#progressbar li:before {
+    width: 50px;
+    height: 50px;
+    line-height: 45px;
+    display: block;
+    font-size: 20px;
+    color: #ffffff;
+    background: lightgray;
+    border-radius: 50%;
+    margin: 0 auto 10px auto;
+    padding: 2px
+}
+
+#progressbar li:after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    background: lightgray;
+    position: absolute;
+    left: 0;
+    top: 25px;
+    z-index: -1
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+    background: #e74c3c
+}
+
+.progress {
+    height: 20px
+}
+
+.progress-bar {
+    background-color: #e74c3c
+}
 /* Retrait de asterisk des champs requis */
 
 .asteriskField {

diff --git a/templates/base.html b/templates/base.html
@@ -9,7 +9,7 @@
         <!-- CSS -->
         <link href="{% static 'css/bootstrap-night.min.css' %}" rel="stylesheet" media="screen">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" media="print"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected].0/css/fontawesome.min.css">
         {% block stylesheet %}{% endblock %}
         <!-- JavaScript -->
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

diff --git a/templates/inscription/formulaire_inscription.html b/templates/inscription/formulaire_inscription.html
@@ -13,14 +13,24 @@
   {{ form.media }}
 
 {% block content %}
+    <br>
 <h1 class=text-center >Inscription au Lycée Expérimental</h1>
         {{ wizard.form.media }}
+    <br>
 <div class="container">
-
+    <ul id="progressbar" class="text-center" style="padding: 0;">
+        <li class="active" id="identite"><strong>Identité</strong></li>
+        <li {% if wizard.steps.step1 >= 2 %} class="active" {% endif %} id="responsables"><strong>Responsables</strong></li>
+        <li {% if wizard.steps.step1 >= 3 %} class="active" {% endif %} id="scolarite"><strong>Scolarité</strong></li>
+        <li {% if wizard.steps.step1 >= 4 %} class="active" {% endif %} id="projet"><strong>Projet</strong></li>
+    </ul>
+    <div class="progress">
+        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: calc({{ wizard.steps.step1}} / {{ wizard.steps.count }} * 100%);"></div>
+    </div>
+<br>
     <div class="row">
         <div class="col-md-10 offset-md-1">
             <div class="formwizard">
-                <p>Étape {{ wizard.steps.step1 }} sur {{ wizard.steps.count }}  -   {{ wizard.form.name }}</p>
                 <form action="" method="post" enctype="multipart/form-data">
                     {% csrf_token %}
                 <table>