🎉🎉 Page terminée 🎉🎉

src/app/pages/voting/voting.component.html

@@ -1,5 +1,6 @@
-<form>
+
-  <h1>Nom du sondage</h1>
+  <form>
+  <h1 >Nom du sondage</h1>
 
   <p>crée par piou</p>
 
@@ -12,7 +13,8 @@
 <framadate-vote-choice></framadate-vote-choice>
 <framadate-vote-choice></framadate-vote-choice>
 <framadate-vote-choice></framadate-vote-choice>
-<framadate-vote-choice></framadate-vote-choice>
+<framadate-vote-choice class=" margin-btm-x2"></framadate-vote-choice>
+<button class="btn btn--primary btn--full" ng-model="show_popup">Valider mes réponses</button>
 <p class="prefered">Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :
 <li>- Vendredi 6 juillet
   </li><li>
@@ -20,31 +22,44 @@
 </li>
 </p>
 <a class="next">Voir le graphique</a>
-<input type="submit" name="modify" class="btn btn--primary btn--outline"value="Je veux modifier le vote de quelqu'un">
+<input type="submit" name="modify" class="btn btn--primary btn--outline btn--full"value="Je veux modifier le vote de quelqu'un">
-<h2>Les commentaires</h2>
+<h2 class="margin-top-x4">Les commentaires</h2>
 <p class="comment">
   <span class="cname">Pikachu </span>
-  <span class="date"> le 26 novembre 2019</span>
+  <span class="date date padding-btm-x1"> le 26 novembre 2019</span>
   Rock Luxio Surskit. Glacier Badge
   </p>
   <p class="comment">
     <span class="cname">Bulbizarre </span>
-    <span class="date">le 23 décembre 2019</span>
+    <span class="date padding-btm-x1">le 23 décembre 2019</span>
     Pokem ipsum dolor sit amet Electric Cottonee Scratch Leech Life Ice Berry Ducklett. Leaf Green Durant Zoroark Skitty Rock Luxio Surskit. Glacier Badge
     </p>
 
-    <h2>Laisser un commentaire</h2>
+    <h2 class="margin-top-x7">Laisser un commentaire</h2>
     <label for="crname">Votre nom :</label>
-    <input type="text" name="crname">
+    <input type="text" class="margin-btm-x3" name="crname">
     <label for="comment">Votre commentaire :</label>
     <textarea name="comment">
       </textarea>
       <input type="submit" name="add-comment" class="btn btn--primary btn--outline"value="Ajouter mon commentaire">
-      <h3>Partager le sondage</h3>
+      <h3 class="margin-top-x8">Partager le sondage</h3>
-      <label class="nobold" for="copy-link">Pour partager le sondage, vous pouvez diffuser ce lien : https://framadate.org/urladmindusondage</label>
+      <label class="nobold text-14" for="copy-link">Pour partager le sondage, vous pouvez diffuser ce lien : https://framadate.org/urladmindusondage</label>
-      <input type="submit" name="copy-link" class="btn btn--primary btn--outline"value="Copier le lien">
+      <input type="submit" name="copy-link" class=" btn btn--primary btn--outline"value="Copier le lien">
-<h3>Exporter/Imprimer</h3>
+<h3 class="margin-top-x6 margin-btm-x3">Exporter/Imprimer</h3>
-<input type="submit" name="export" class="btn btn--primary btn--outline"value="Exporter en .csv">
+<input type="submit" name="export" class="margin-btm-x3 btn btn--primary btn--outline"value="Exporter en .csv">
 <input type="submit" name="copy-link" class="btn btn--primary btn--outline"value="Imprimer le sondage">
 
 </form>
+<div ng-show="show_popup" class="popup">
+    <h4 class="margin-btm-x2">Participation validée !</h4>
+<p class="margin-btm-x1">Votre vote a bien été pris en compte, mais faites attention : ce sondage n'autorise l'édition de votre vote qu'avec le lien personnalisé suivant :</p>
+<p>https://framadate.org/urladmindusondage</p>
+<button class="btn btn--primary btn--small btn--purple btn--black-text">Copier le lien</button>
+<p class="margin-btm-x6 margin-top-x2">Conservez-le précieusement !</p>
+<button class="btn btn--primary btn--default btn--purple btn--black-text">Revenir au sondage</button>
+
+
+</div>
+<div class="rgba-black" [hidden]="show_mask">
+
+</div>

src/app/pages/voting/voting.component.scss

@@ -6,6 +6,12 @@ form{
   align-items: center;
   justify-content: flex-start;
 }
+
+.popup{
+  display:flex;
+  flex-direction: column;
+  z-index:2222222222;
+}
 .row{
   flex-direction: row;
 }

src/app/pages/voting/voting.component.ts

@@ -6,8 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./voting.component.scss']
 })
 export class VotingComponent implements OnInit {
-
+  show_mask=true;
-  constructor() { }
+  constructor() {
+   }
 
   ngOnInit() {
   }

src/assets/scss/atoms/_buttons.scss

@@ -31,6 +31,12 @@
     &--primary {
         @include btnTheme($primary_color);
     }
+    &--black-text {
+        color:black;
+    }
+    &--purple {
+        background-color:$pale-purple;
+    }
 
     &--alert {
         @include btnTheme($red);

src/assets/scss/useful_classes.scss

@@ -8,3 +8,117 @@
 .pull-right {
     float: right;
 }
+/*Btm paddings*/
+.padding-btm-x1{
+  padding-bottom:10px;
+}
+.padding-btm-x2{
+  padding-bottom:20px;
+}
+.padding-btm-x3{
+  padding-bottom:30px;
+}
+.padding-btm-x4{
+  padding-bottom:40px;
+}
+.padding-btm-x5{
+  padding-bottom:50px;
+}
+.padding-btm-x6{
+  padding-bottom:60px;
+}
+.padding-btm-x7{
+  padding-bottom:70px;
+}
+.padding-btm-x8{
+  padding-bottom:80px;
+}
+/*Btm margins*/
+.margin-btm-x1{
+  margin-bottom:10px;
+}
+.margin-btm-x2{
+  margin-bottom:20px;
+}
+.margin-btm-x3{
+  margin-bottom:30px;
+}
+.margin-btm-x4{
+  margin-bottom:40px;
+}
+.margin-btm-x5{
+  margin-bottom:50px;
+}
+.margin-btm-x6{
+  margin-bottom:60px;
+}
+.margin-btm-x7{
+  margin-bottom:70px;
+}
+.margin-btm-x8{
+  margin-bottom:80px;
+}
+/*Top paddings*/
+.padding-top-x1{
+  padding-top:10px;
+}
+.padding-top-x2{
+  padding-top:20px;
+}
+.padding-top-x3{
+  padding-top:30px;
+}
+.padding-top-x4{
+  padding-top:40px;
+}
+.padding-top-x5{
+  padding-top:50px;
+}
+.padding-top-x6{
+  padding-top:60px;
+}
+.padding-top-x7{
+  padding-top:70px;
+}
+.padding-top-x8{
+  padding-top:80px;
+}
+/*Top margins*/
+.margin-top-x1{
+  margin-top:10px;
+}
+.margin-top-x2{
+  margin-top:20px;
+}
+.margin-top-x3{
+  margin-top:30px;
+}
+.margin-top-x4{
+  margin-top:40px;
+}
+.margin-top-x5{
+  margin-top:50px;
+}
+.margin-top-x6{
+  margin-top:60px;
+}
+.margin-top-x7{
+  margin-top:70px;
+}
+.margin-top-x8{
+  margin-top:80px;
+}
+.text-14{
+  font-size: 14px;
+}
+
+/*Pour masquer la page lors de l'apparition d'une popup*/
+.rgba-black{
+position: fixed;
+inset: 0px;
+ width: 100vw;
+height: 100vh;
+border: medium none;
+z-index: 2147483647;
+background-color: rgba(216, 216, 216, 0.4);
+  }