From a3e243ed19bddc12e194a166ab38c3101835fcc2 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Thu, 16 Jan 2020 16:38:06 +0100
Subject: [PATCH] toggle simple answer

---
 src/app/config/mock-poll3.ts                  |   2 +-
 .../poll-display/poll-display.component.html  |  33 ++-
 src/app/pages/voting/voting.component.html    |   3 +-
 .../ui/vote-choice/vote-choice.component.html | 194 +++++++++++-------
 .../ui/vote-choice/vote-choice.component.scss |  15 +-
 src/assets/scss/atoms/_forms.scss             |  11 +-
 6 files changed, 159 insertions(+), 99 deletions(-)

diff --git a/src/app/config/mock-poll3.ts b/src/app/config/mock-poll3.ts
index f0ab2b26..9a917f6e 100644
--- a/src/app/config/mock-poll3.ts
+++ b/src/app/config/mock-poll3.ts
@@ -13,7 +13,7 @@ export const mockPoll3 = {
             "timezone": "Europe/Paris"
         },
         "expiracyDate": {
-            "date": "2020-01-15 15:07:53.000000",
+            "date": "2020-03-17 15:07:53.000000",
             "timezone_type": 3,
             "timezone": "Europe/Paris"
         },
diff --git a/src/app/pages/poll-display/poll-display.component.html b/src/app/pages/poll-display/poll-display.component.html
index 24860225..bf022a63 100644
--- a/src/app/pages/poll-display/poll-display.component.html
+++ b/src/app/pages/poll-display/poll-display.component.html
@@ -1,13 +1,30 @@
 <div class="poll" >
+    <div class='heading' >
+        <div class='col-xs-6' >
+            <h1 >{{pollConfigFetched.data.title}}</h1 >
+            <p >{{pollConfigFetched.data.description}}</p >
+            <span class="creationDate" >
+                Créé le {{pollConfigFetched.data.creationDate.date}}
+            </span >
+            <span class="expiracyDate" >
+                Expire le {{pollConfigFetched.data.expiracyDate.date}}
+            </span >
+            <div class="votants" >
+                <i class='fa fa-users' ></i >
+                {{pollConfigFetched.stacks.length}} votants,
+                {{pollConfigFetched.choices.length}} choix,
+            </div >
+        </div >
+        <div class='col-xs-6' >
+            <input
+                type="submit"
+                name="modify"
+                class="btn btn--primary btn--outline btn--full"
+                value="Je veux modifier le vote de quelqu'un"
+                (click)='config.todo()' >
+        </div >
+    </div >
 
-    <h1 >{{pollConfigFetched.data.title}}</h1 >
-    <p >{{pollConfigFetched.data.description}}</p >
-    <p class="creationDate" >{{pollConfigFetched.data.creationDate.date}}</p >
-    <p class="expiracyDate" >{{pollConfigFetched.data.creationDate.date}}</p >
-    <p class="votants" >
-        {{pollConfigFetched.stacks_count}} votants,
-        {{pollConfigFetched.choices_count}} choix,
-    </p >
 </div >
 <section class="name" >
     <label for="name" >Votre nom :</label >
diff --git a/src/app/pages/voting/voting.component.html b/src/app/pages/voting/voting.component.html
index a6c204d9..5e2dd885 100644
--- a/src/app/pages/voting/voting.component.html
+++ b/src/app/pages/voting/voting.component.html
@@ -2,8 +2,7 @@
 
 
     <a class="next">Voir le graphique</a>
-    <input type="submit" name="modify" class="btn btn--primary btn--outline btn--full"
-           value="Je veux modifier le vote de quelqu'un">
+
     <h2 class="margin-top-x4">Les commentaires</h2>
     <p class="comment">
         <span class="cname">Pikachu </span>
diff --git a/src/app/ui/vote-choice/vote-choice.component.html b/src/app/ui/vote-choice/vote-choice.component.html
index d0717239..edfe1884 100644
--- a/src/app/ui/vote-choice/vote-choice.component.html
+++ b/src/app/ui/vote-choice/vote-choice.component.html
@@ -1,9 +1,16 @@
-<div class="choicebox selection-{{choice.answer}}"><!-- add .choicebox--active to most voted -->
-    <div class="text title ">
+<div class="choicebox selection-{{choice.answer}}" ><!-- add .choicebox--active to most voted -->
+    <button
+        class='btn btn--primary'
+        (click)=' choice.simpleAnswer = !choice.simpleAnswer' >
+        <i class='fa fa-gears' ></i >
+    </button >
+    <div
+        class="text title clickable"
+        (click)="setAnswserTo('yes')" >
         {{choice.name}}
-    </div>
-    <div class="choicebox__subject">
+    </div >
 
+    <div class="choicebox__subject" >
 
         <!-- TEXT CASE --><!--
         <p class="choicebox__txt">
@@ -16,90 +23,127 @@
         --><!-- IMG CASE -->
 
         <!-- DATE CASE  -->
-        <div class="dates" *ngIf="choice.date">
-            <div class="choicebox__date">
+        <div
+            class="dates"
+            *ngIf="choice.date" >
+            <div class="choicebox__date" >
                 {{choice.date | date:'EEE'}} <span
-                class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
-            </div>
-            <div class="choicebox__hour">
+                class="choicebox__day" >{{choice.date | date:'dd'}}</span > {{choice.date | date:'LLL'}}
+            </div >
+            <div class="choicebox__hour" >
                 08:00
-            </div>
-        </div>
+            </div >
+        </div >
         <!-- DATE CASE -->
 
-    </div>
+    </div >
 
-    <div class="choicebox__actions">
+    <div class="choicebox__actions" >
         <!-- show only the yes check if the config is set to simpleAnswer -->
         <!-- add .choicebox__btn--active to selected <button> -->
-        <span class="simple-answer">
+        <span class="simple-answer" >
 
-        <button class="choicebox__btn choicebox__btn--yes" type="button"
-                [ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
-                (click)="setAnswserTo('yes')">
-            <img src="../../../assets/img/check.svg" alt="">
-        </button>
-        </span>
-        <span class="complex-answers" *ngIf="!choice.simpleAnswer">
-            <button class="choicebox__btn choicebox__btn--maybe" type="button"
-                    [ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}"
-                    (click)="setAnswserTo('maybe')">
-            <img src="../../../assets/img/check-2.svg" alt="">
-        </button>
-        <button class="choicebox__btn choicebox__btn--no" type="button"
-                [ngClass]="{'choicebox__btn--active': choice.answer === 'no'}"
-                (click)="setAnswserTo('no')"
+        <button
+            class="choicebox__btn choicebox__btn--yes"
+            type="button"
+            [ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
+            (click)="setAnswserTo('yes')" >
+            <img
+                src="../../../assets/img/check.svg"
+                alt="" >
+        </button >
+        </span >
+        <span
+            class="complex-answers"
+            *ngIf="!choice.simpleAnswer" >
+            <button
+                class="choicebox__btn choicebox__btn--maybe"
+                type="button"
+                [ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}"
+                (click)="setAnswserTo('maybe')" >
+            <img
+                src="../../../assets/img/check-2.svg"
+                alt="" >
+        </button >
+        <button
+            class="choicebox__btn choicebox__btn--no"
+            type="button"
+            [ngClass]="{'choicebox__btn--active': choice.answer === 'no'}"
+            (click)="setAnswserTo('no')"
         >
-            <img src="../../../assets/img/croix.svg" alt="">
-        </button>
-        </span>
+            <img
+                src="../../../assets/img/croix.svg"
+                alt="" >
+        </button >
+        </span >
 
-    </div>
+    </div >
 
-    <div class="choicebox__count">
-        <button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes"
-                *ngIf="choice.votes.count">
-            <div class="choicebox__vote">
+    <div class="choicebox__count" >
+        <button
+            type="button"
+            aria-describedby="choicebox-tooltip"
+            class="choicebox__votes"
+            *ngIf="choice.votes.count" >
+            <div class="choicebox__vote" >
                 {{choice.votes.count.yes}}
-                <img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt="">
-            </div>
-            <div class="choicebox__vote">
+                <img
+                    width="20px"
+                    height="21px"
+                    src="../../../assets/img/votant-sur.svg"
+                    alt="" >
+            </div >
+            <div class="choicebox__vote" >
                 {{choice.votes.count.maybe}}
-                <img width="22px" height="24px" src="../../../assets/img/votant-pas-sur.svg" alt="">
-            </div>
-            <div class="choicebox__tooltip" id="choicebox-tooltip">
-                <div class="choicebox__tooltiplist">
-                    <div class="choicebox__tooltipttl">
-                        <img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt="">
+                <img
+                    width="22px"
+                    height="24px"
+                    src="../../../assets/img/votant-pas-sur.svg"
+                    alt="" >
+            </div >
+            <div
+                class="choicebox__tooltip"
+                id="choicebox-tooltip" >
+                <div class="choicebox__tooltiplist" >
+                    <div class="choicebox__tooltipttl" >
+                        <img
+                            width="20px"
+                            height="21px"
+                            src="../../../assets/img/votant-sur.svg"
+                            alt="" >
                         {{choice.votes.count.yes}} "Oui"
-                    </div>
-                    <ul>
-                        <li>Lorem</li>
-                        <li>Ipsum dolor</li>
-                        <li>Sit amet</li>
-                        <li>Consectetur</li>
-                    </ul>
-                </div>
-                <div class="choicebox__tooltiplist">
-                    <div class="choicebox__tooltipttl">
-                        <img width="22px" height="24px" src="../../../assets/img/votant-pas-sur.svg" alt="">
+                    </div >
+                    <ul >
+                        <li >Lorem</li >
+                        <li >Ipsum dolor</li >
+                        <li >Sit amet</li >
+                        <li >Consectetur</li >
+                    </ul >
+                </div >
+                <div class="choicebox__tooltiplist" >
+                    <div class="choicebox__tooltipttl" >
+                        <img
+                            width="22px"
+                            height="24px"
+                            src="../../../assets/img/votant-pas-sur.svg"
+                            alt="" >
                         {{choice.votes.count.maybe}} "Peut-être"
-                    </div>
-                    <ul>
-                        <li>Lorem</li>
-                        <li>Ipsum dolor</li>
-                        <li>Sit amet</li>
-                        <li>Consectetur</li>
-                        <li>Lorem</li>
-                        <li>Ipsum dolor</li>
-                        <li>Sit amet</li>
-                        <li>Consectetur</li>
-                    </ul>
-                </div>
-            </div>
-        </button>
-        <div class="choicebox__countxt">
+                    </div >
+                    <ul >
+                        <li >Lorem</li >
+                        <li >Ipsum dolor</li >
+                        <li >Sit amet</li >
+                        <li >Consectetur</li >
+                        <li >Lorem</li >
+                        <li >Ipsum dolor</li >
+                        <li >Sit amet</li >
+                        <li >Consectetur</li >
+                    </ul >
+                </div >
+            </div >
+        </button >
+        <div class="choicebox__countxt" >
             Choix ayant reçu le plus de votes
-        </div>
-    </div>
-</div>
+        </div >
+    </div >
+</div >
diff --git a/src/app/ui/vote-choice/vote-choice.component.scss b/src/app/ui/vote-choice/vote-choice.component.scss
index 65666516..160a9c17 100644
--- a/src/app/ui/vote-choice/vote-choice.component.scss
+++ b/src/app/ui/vote-choice/vote-choice.component.scss
@@ -50,6 +50,9 @@ $breakpoint-responsive: 640px; // à définir
         min-height: auto;
     }
 
+    .title {
+        max-width: 25%;
+    }
 }
 
 .choicebox__subject {
@@ -132,11 +135,7 @@ $breakpoint-responsive: 640px; // à définir
     border: .3rem solid #ccc9c9;
     background-color: transparent;
     border-radius: 50%;
-    @media (min-width: $breakpoint-responsive) {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
+    cursor: pointer;
     //&:focus,
     //&:hover,
     //&:active {
@@ -161,6 +160,12 @@ $breakpoint-responsive: 640px; // à définir
     &--active {
         border-color: #bf83c2;
     }
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
 }
 
 
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
index 69b53363..b0edc951 100644
--- a/src/assets/scss/atoms/_forms.scss
+++ b/src/assets/scss/atoms/_forms.scss
@@ -103,16 +103,16 @@ label {
     font-size: 18px;
 }
 
-.comment, .prefered {
+.comment {
     border-left: 6px solid $ugly-purple;
-    padding-left: 5px;
     margin-top: 25px;
     margin-bottom: 25px;
     flex-wrap: wrap;
+    padding-left: 17px;
 }
 
 .cname {
-    padding-left: 17px;
+
     font-weight: bold;
 }
 
@@ -146,11 +146,6 @@ textarea {
     margin-bottom: 20px;
 }
 
-.name {
-    margin-bottom: 50px;
-    margin-top: 50px;
-}
-
 .nobold {
     font-weight: normal;
 }