buttons to nav

src/app/config/mocks/mockmypolls.ts

@@ -1,7 +1,7 @@
 export const mockMyPolls =
     [{
-        "id": 1,
-        "title": "blehehehe heh hehhe e",
+        "id": 1000001,
+        "title": "blehehehe heh hehhe e test1",
         "customUrl": null,
         "description": "maaaaaaaaaaah",
         "creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"},
@@ -19,5 +19,25 @@ export const mockMyPolls =
         "choices": {},
         "comments": {},
         "defaultExpiracyDaysFromNow": 60
+    }, {
+        "id": 1000002,
+        "title": "bleh z zr erth tuyjikioy yylil test2",
+        "customUrl": null,
+        "description": "maaaaaaaaaaah 2",
+        "creationDate": {"date": "2020-01-20 14:21:16.270157", "timezone_type": 3, "timezone": "Europe/Paris"},
+        "expiracyDate": {"date": "2020-01-20 14:21:16.270178", "timezone_type": 3, "timezone": "Europe/Paris"},
+        "owner": null,
+        "kind": "text",
+        "allowedAnswers": ["yes"],
+        "modificationPolicy": "nobody",
+        "mailOnComment": null,
+        "mailOnVote": null,
+        "hideResults": null,
+        "showResultEvenIfPasswords": null,
+        "votes": {},
+        "stacksOfVotes": {},
+        "choices": {},
+        "comments": {},
+        "defaultExpiracyDaysFromNow": 60
     }]
 ;

src/app/pages/answers/answers.component.html

@@ -63,6 +63,7 @@
                 [(ngModel)]="answer.text"
                 (keyup.enter)="addAnswer()"
                 (keyup)="navigateOrDelete($event,i)"
+                required='required'
                 placeholder="réponse"
             >
             <button
@@ -75,15 +76,19 @@
     <button
         class="btn btn--primary btn--outline"
         (click)="addAnswer()"
+        [ngClass]="{'btn--primary': allAnswersAreValid}"
         i18n
     >
+        <i class='fa fa-plus' ></i >
         Ajouter une proposition
     </button >
     <br >
     <button
         [routerLink]="'/step/resume'"
-        class="btn btn--full btn--primary"
+        class="btn btn--full "
         i18n
+        [ngClass]="{'btn--primary': allAnswersAreValid}"
+        [disabled]='!allAnswersAreValid'
     >
         Voyons ce que ça donne
     </button >

src/app/pages/answers/answers.component.scss

@@ -1,8 +0,0 @@
-:host {
-    .img-thumbnail {
-        width: 5em;
-        height: 5em;
-        margin: 1ch 0;
-        display: inline-block;
-    }
-}

src/app/pages/answers/answers.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core';
 import {BaseComponent} from '../base-page/base.component';
 import {ConfigService} from '../../services/config.service';
 
@@ -9,7 +9,9 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './answers.component.html',
     styleUrls: ['./answers.component.scss']
 })
-export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
+export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
+
+    private allAnswersAreValid = false;
 
     private answerList = [];
     private currentHeader: any = "";
@@ -26,8 +28,24 @@ export class AnswersComponent extends BaseComponent implements OnInit, AfterView
     ngOnInit() {
     }
 
+    ngOnChanges() {
+
+        this.checkValidAnswers();
+    }
+
+    checkValidAnswers() {
+        this.allAnswersAreValid = true;
+        this.config.answers.forEach(answer => {
+            if (!answer.text.length) {
+                this.allAnswersAreValid = false;
+                return;
+            }
+        });
+    }
+
     ngAfterViewInit() {
-        this.focusOnAnswer(0)
+        this.focusOnAnswer(0);
+        this.checkValidAnswers();
     }
 
     trackFunction(index: number, item: any): number {

src/app/pages/home/home.component.html

@@ -63,8 +63,9 @@
             for="poll_description"
             i18n
         >
-            {{"creation.description"|translate}}
+            {{"creation.description"|translate}}:
         </label >
+        <br >
         <textarea
             [(ngModel)]="config.description"
             cols="50"
@@ -91,7 +92,7 @@
 
     <button
         [routerLink]="'/step/answers'"
-        class="btn btn-block"
+        class="btn btn--primary btn--full"
         i18n
     >
         Continuer

src/app/pages/resume/resume.component.html

@@ -1,7 +1,9 @@
 <h1 >
     Récapitulatif
 </h1 >
-<h2 class="hero-title">
+<div class='card content' >
+
+    <h2 class="hero-title title" >
         {{config.title}}
     </h2 >
     <div class="creation" >
@@ -15,17 +17,29 @@
     </div >
     <section >
         <ul >
-        <li markdown *ngFor="let questions of config.answers">
+            <li
+                markdown
+                *ngFor="let questions of config.answers" >
+                <img
+                    class='img-thumbnail'
+                    src='{{questions.url}}'
+                    alt='image {{questions.url}}' >
                 {{questions.id + 1}}. {{questions.text}}
             </li >
         </ul >
-    <button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button>
     </section >
-<button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>
+
+</div >
+<button
+    [routerLink]="'/step/end'"
+    class="btn btn--primary btn--full"
+    i18n="@@confirm" >C'est parfait!
+</button >
 
 <div class="back" >
-    <a [routerLink]="'/step/visibility'"
-       class="btn btn--back">
+    <a
+        [routerLink]="'/step/answers'"
+        class="prev" >
         Retour
     </a >
 </div >

src/app/pages/resume/resume.component.scss

@@ -0,0 +1,5 @@
+.card {
+    box-shadow: 0px 0px 0.5em #ccc;
+    padding: 2em;
+    margin: 1em 0;
+}

src/app/pages/visibility/visibility.component.html

@@ -54,7 +54,8 @@
         {{"visibility.archiving"|translate}}
     </label >
 
-    <input type="date"
+    <input
+        type="date"
         id="expirationDate"
         [(ngModel)]="config.expirationDate" >
     <div class="modification" >
@@ -91,7 +92,6 @@
 
     </div >
 
-
 </section >
 <section class="access" >
     <h2 >
@@ -103,7 +103,8 @@
         {{"visibility.access_url_key"|translate}}
     </label >
     <br >
-    <input type="name"
+    <input
+        type="name"
         class="input-lg"
         name="url"
         id="url"
@@ -119,7 +120,10 @@
     <label for="passwordAccess" >
         {{"visibility.access_want"|translate}}
     </label >
-    <select name="passwordAccess" id="passwordAccess" [(ngModel)]="config.passwordAccess">
+    <select
+        name="passwordAccess"
+        id="passwordAccess"
+        [(ngModel)]="config.passwordAccess" >
         <option value="0" >  {{"visibility.access_want_no"|translate}}</option >
         <option value="1" >  {{"visibility.access_want_yes"|translate}}</option >
     </select >
@@ -128,20 +132,26 @@
         {{"visibility.access_protect"|translate}}
     </label >
 
-    <div class="enablepassword" *ngIf="config.passwordAccess == '1'">
-        <input type="password"
+    <div
+        class="enablepassword"
+        *ngIf="config.passwordAccess == '1'" >
+        <input
+            type="password"
             name="password"
             id="password"
             min="8"
             *ngIf="!showCustomPassword"
             [(ngModel)]="config.password" >
-        <input type="name"
+        <input
+            type="name"
             name="password_visible"
             id="password_visible"
             min="8"
             *ngIf="showCustomPassword"
             [(ngModel)]="config.password" >
-        <button (click)="showCustomPassword = !showCustomPassword" [disabled]="!config.password"
+        <button
+            (click)="showCustomPassword = !showCustomPassword"
+            [disabled]="!config.password"
             class="btn btn--default" >
             <i class="fa fa-eye" ></i >
             {{"visibility.see_pass"|translate}}
@@ -149,14 +159,16 @@
     </div >
 </section >
 
-<a [routerLink]="'/step/end'"
+<a
+    [routerLink]="'/step/end'"
     class="btn btn-link btn--primary" >
     {{"visibility.validate_btn"|translate}}
 </a >
 <div class="back" >
 
-    <a [routerLink]="'/step/answers'"
-       class="btn btn--back">
+    <a
+        [routerLink]="'/step/answers'"
+        class="prev" >
         Retour
     </a >
 </div >

src/assets/scss/atoms/_forms.scss

@@ -46,7 +46,6 @@ option {
     -webkit-appearance: none;
     -moz-appearance: none;
 
-    background: none;
     border-radius: 0;
 
     background-color: transparent;
@@ -164,3 +163,7 @@ select, input, textarea {
     display: block;
     width: 100%;
 }
+
+.btn, a {
+    cursor: pointer;
+}

src/assets/scss/atoms/_images.scss

@@ -1 +1,7 @@
 @charset "UTF-8";
+.img-thumbnail {
+    width: 5em;
+    height: 5em;
+    margin: 1ch 0;
+    display: inline-block;
+}