⚡ enhance display poll page

src/app/config/mock-graph.ts

@@ -0,0 +1,52 @@
+export const mockGraphConfig = {
+    step: 0,
+    stepMax: 3,
+    pollType: "special dates",
+    title: "",
+    description: "",
+    myName: "",
+    visibility: "link_only",
+    // date specific poll
+    allowSeveralHours: "true",
+    dateLgfgfgfgist: ["jeudi", "vendredi", "samedi"], // sets of days as strings
+    timeList: ["08:00", "08:30", "09:00"], // ranges of time expressed as strings
+    answers: [
+        {
+            id: 0,
+            text: "no"
+        },
+
+        {
+            id: 1,
+            text: "yes"
+        },
+        {
+            id: 2,
+            text: "maybe"
+        },
+        {
+            id: 3,
+            text: "maybe"
+        },
+        {
+            id: 4,
+            text: "maybe"
+        },
+        {
+            id: 5,
+            text: "maybe"
+        },
+        {
+            id: 6,
+            text: "maybe"
+        },
+        {
+            id: 7,
+            text: "maybe"
+        },
+        {
+            id: 8,
+            text: "maybe"
+        }
+    ]
+};

src/app/pages/poll-display/poll-display.component.scss

@@ -1,88 +1 @@
 @import "../../../assets/scss/variables";
-
-form {
-    display: flex;
-    margin: auto;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.popup {
-    display: flex;
-    flex-direction: column;
-    z-index: 2222222222;
-}
-
-.row {
-    flex-direction: row;
-}
-
-label {
-    font-weight: 600;
-    font-size: 18px;
-}
-
-.comment, .prefered {
-    border-left: 6px solid $ugly-purple;
-    padding-left: 5px;
-    margin-top: 25px;
-    margin-bottom: 25px;
-    flex-wrap: wrap;
-}
-
-.comment {
-    display: flex;
-}
-
-.commeny span {
-    flex-direction: row;
-}
-
-.cname {
-    padding-left: 17px;
-    font-weight: bold;
-}
-
-.btn {
-    max-width: 300px;
-}
-
-.next {
-    max-width: 200px;
-}
-
-input[type=text], textarea {
-    max-width: 350px;
-}
-
-li {
-    list-style-type: none;
-}
-
-h2 {
-
-}
-
-.next {
-    align-self: flex-end;
-    margin-bottom: 50px;
-}
-
-textarea {
-    height: 213px;
-    margin-bottom: 20px;
-}
-
-.name {
-    margin-bottom: 50px;
-    margin-top: 50px;
-}
-
-label {
-    align-items: flex-start;
-}
-
-.nobold {
-    font-weight: normal;
-}

src/app/poll-graphic/poll-graphic.component.ts

@@ -1,6 +1,7 @@
 import {Component, Inject, OnInit} from "@angular/core";
 import {Chart} from "chart.js";
 import {DOCUMENT} from '@angular/common';
+import {mockGraphConfig} from "../config/mock-graph";
 
 @Component({
     selector: "framadate-poll-graphic",
@@ -21,58 +22,7 @@ export class PollGraphicComponent implements OnInit {
     }
 
     ngOnInit() {
-        var toto = {
+        var toto = mockGraphConfig;
-            step: 0,
-            stepMax: 3,
-            pollType: "special dates",
-            title: "",
-            description: "",
-            myName: "",
-            visibility: "link_only",
-            // date specific poll
-            allowSeveralHours: "true",
-            dateLgfgfgfgist: ["jeudi", "vendredi", "samedi"], // sets of days as strings
-            timeList: ["08:00", "08:30", "09:00"], // ranges of time expressed as strings
-            answers: [
-                {
-                    id: 0,
-                    text: "no"
-                },
-
-                {
-                    id: 1,
-                    text: "yes"
-                },
-                {
-                    id: 2,
-                    text: "maybe"
-                },
-                {
-                    id: 3,
-                    text: "maybe"
-                },
-                {
-                    id: 4,
-                    text: "maybe"
-                },
-                {
-                    id: 5,
-                    text: "maybe"
-                },
-                {
-                    id: 6,
-                    text: "maybe"
-                },
-                {
-                    id: 7,
-                    text: "maybe"
-                },
-                {
-                    id: 8,
-                    text: "maybe"
-                }
-            ]
-        };
 
         this.formatDataAnswers(toto);
 

src/assets/scss/atoms/_forms.scss

@@ -76,3 +76,90 @@ label {
         }
     }
 }
+
+form {
+    display: flex;
+    margin: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.popup {
+    display: flex;
+    flex-direction: column;
+    z-index: 2222222222;
+}
+
+.row {
+    flex-direction: row;
+}
+
+label {
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.comment, .prefered {
+    border-left: 6px solid $ugly-purple;
+    padding-left: 5px;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    flex-wrap: wrap;
+}
+
+.comment {
+    display: flex;
+}
+
+.commeny span {
+    flex-direction: row;
+}
+
+.cname {
+    padding-left: 17px;
+    font-weight: bold;
+}
+
+.btn {
+    max-width: 300px;
+}
+
+.next {
+    max-width: 200px;
+}
+
+input[type=text], textarea {
+    max-width: 350px;
+}
+
+li {
+    list-style-type: none;
+}
+
+h2 {
+
+}
+
+.next {
+    align-self: flex-end;
+    margin-bottom: 50px;
+}
+
+textarea {
+    height: 213px;
+    margin-bottom: 20px;
+}
+
+.name {
+    margin-bottom: 50px;
+    margin-top: 50px;
+}
+
+label {
+    align-items: flex-start;
+}
+
+.nobold {
+    font-weight: normal;
+}