Add html code for voting

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { VotingGraphComponent } from './pages/voting-graph/voting-graph.componen
 import { VotingChoiceComponent } from './pages/voting-choice/voting-choice.component';
 import { PasswordComponent } from './pages/password/password.component';
 import { HomeComponent } from './pages/home/home.component';
+import { VoteChoiceComponent } from './vote-choice/vote-choice.component';
 
 registerLocaleData(localeFr, 'fr');
 
@@ -52,6 +53,7 @@ registerLocaleData(localeFr, 'fr');
     VotingChoiceComponent,
     PasswordComponent,
     HomeComponent,
+    VoteChoiceComponent,
 
   ],
   imports: [

src/app/pages/kind/kind.component.html

@@ -142,7 +142,7 @@
 
 <section>
     <h1>Molecules</h1>
-
+<framadate-vote-choice></framadate-vote-choice>
     <article>
         <h2>Useful classes</h2>
 

src/app/vote-choice/vote-choice.component.html

@@ -0,0 +1,15 @@
+<div class="choice_container">
+  <section id="info">
+  <h2>Jeudi <span>17</span> aout</h2>
+  <h2>08:00</h2>
+  </section>
+  <section id="nombre_vote">
+    <p>14</p><img src="../../assets/img/votant-sur.svg">
+    <p>76</p><img src="../../assets/img/votant-pas-sur.svg">
+    </section>
+<section id="vote">
+  <img src="../../assets/img/check.svg">
+  <img src="../../assets/img/check-2.svg">
+  <img src="../../assets/img/croix.svg">
+  </section>
+  </div>

src/app/vote-choice/vote-choice.component.scss

@@ -0,0 +1,5 @@
+.choice_container{
+  width:320px;
+  height:172px;
+  box-shadow: 0 3px 6px 0 rgba(black, 0.2);
+}

src/app/vote-choice/vote-choice.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VoteChoiceComponent } from './vote-choice.component';
+
+describe('VoteChoiceComponent', () => {
+  let component: VoteChoiceComponent;
+  let fixture: ComponentFixture<VoteChoiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VoteChoiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VoteChoiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/vote-choice/vote-choice.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'framadate-vote-choice',
+  templateUrl: './vote-choice.component.html',
+  styleUrls: ['./vote-choice.component.scss']
+})
+export class VoteChoiceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/img/check-2.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15">
+    <g fill="#F5A623" fill-rule="evenodd">
+        <path d="M13.412 0C16.749 1.504 19 4.347 19 7.607c0 3.11-2.051 5.843-5.14 7.393l-.053-1.766c2.095-1.366 3.353-3.41 3.353-5.627 0-2.34-1.402-4.484-3.696-5.841L13.412 0zM5.588 0C2.251 1.504 0 4.347 0 7.607 0 10.717 2.051 13.45 5.14 15l.053-1.766C3.098 11.868 1.84 9.824 1.84 7.607c0-2.34 1.402-4.484 3.696-5.841L5.588 0z"/>
+        <path d="M8.326 12.692L4.648 8.588a.891.891 0 0 1 .038-1.114.681.681 0 0 1 .999-.043l2.641 2.947 4.989-5.565a.681.681 0 0 1 .999.043.891.891 0 0 1 .038 1.114l-6.026 6.722z"/>
+    </g>
+</svg>

src/assets/img/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12">
+    <path fill="#429A00" fill-rule="evenodd" d="M6.133 12L.281 5.903a1.257 1.257 0 0 1 .062-1.656 1.136 1.136 0 0 1 1.589-.064l4.201 4.378L14.068.293a1.136 1.136 0 0 1 1.59.064c.432.45.458 1.172.06 1.656L6.134 12z"/>
+</svg>

src/assets/img/croix.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <path fill="#CD0000" fill-rule="evenodd" d="M7.314 6.05l4.465-4.461A.918.918 0 0 0 10.484.294L6.018 4.71 1.525.22A.92.92 0 0 0 .229 1.516l4.484 4.536-4.392 4.333a.918.918 0 1 0 1.296 1.295L6 7.299l4.355 4.353a.92.92 0 0 0 1.295-1.295L7.314 6.05z"/>
+</svg>

src/assets/img/votant-pas-sur.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#4A4A4A" fill-rule="nonzero" d="M16.556 13.749a10.963 10.963 0 0 0-16.112 0 .965.965 0 0 0-.25.639v3.833a.958.958 0 0 0 .959.946h14.694c.53 0 .959-.43.959-.959v-3.833a.965.965 0 0 0-.25-.626z"/>
+        <circle cx="8.5" cy="4.472" r="4.472" fill="#4A4A4A" fill-rule="nonzero"/>
+        <path fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width="4" d="M14.067 20.083l-2.926-3.048a.629.629 0 0 1 .03-.828.568.568 0 0 1 .795-.032l2.1 2.189 3.968-4.134a.568.568 0 0 1 .795.032c.216.225.23.586.03.828l-4.792 4.993z"/>
+        <path fill="#F5A623" fill-rule="nonzero" d="M14.067 20.083l-2.926-3.048a.629.629 0 0 1 .03-.828.568.568 0 0 1 .795-.032l2.1 2.189 3.968-4.134a.568.568 0 0 1 .795.032c.216.225.23.586.03.828l-4.792 4.993zM19 12.083c1.792.903 3 2.609 3 4.564 0 1.867-1.101 3.506-2.76 4.436l-.028-1.06c1.125-.819 1.8-2.046 1.8-3.376 0-1.403-.753-2.69-1.984-3.504L19 12.083z"/>
+        <path fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width="3" d="M10 12.083c-1.792.903-3 2.609-3 4.564 0 1.867 1.101 3.506 2.76 4.436l.028-1.06c-1.125-.819-1.8-2.046-1.8-3.376 0-1.403.753-2.69 1.984-3.504l.028-1.06z"/>
+        <path fill="#F5A623" fill-rule="nonzero" d="M10 12.083c-1.792.903-3 2.609-3 4.564 0 1.867 1.101 3.506 2.76 4.436l.028-1.06c-1.125-.819-1.8-2.046-1.8-3.376 0-1.403.753-2.69 1.984-3.504l.028-1.06z"/>
+    </g>
+</svg>

src/assets/img/votant-sur.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="21" viewBox="0 0 20 21">
+    <defs>
+        <path id="a" d="M8.667 10.205c2.13-.029 4.221.541 6.03 1.638l.336.212-4.56 5.008L7.9 14.338a1.887 1.887 0 0 0-2.017-.472 1.84 1.84 0 0 0-1.216 1.653c-.024.44.114.873.385 1.22l.108.126 2.047 2.165H1.493a1.325 1.325 0 0 1-1.286-1.18L.2 17.718v-3.537a.65.65 0 0 1 .133-.4 10.822 10.822 0 0 1 7.655-3.573l.339-.007zm8.466 5.046v2.468c0 .71-.572 1.291-1.293 1.312h-2.127l3.42-3.78zM8.66.361c2.507 0 4.54 2 4.54 4.469 0 2.468-2.033 4.47-4.54 4.47S4.12 7.297 4.12 4.83 6.153.36 8.66.36z"/>
+    </defs>
+    <g fill="none" fill-rule="nonzero">
+        <use fill="#4A4A4A" xlink:href="#a"/>
+        <path fill="#429A00" d="M19.18 10.25a.673.673 0 0 0-.947.053l-7.746 8.531-3.467-3.668a.67.67 0 0 0-.94-.072.651.651 0 0 0 0 .932l4.453 4.725 8.694-9.595a.649.649 0 0 0-.047-.905z"/>
+    </g>
+</svg>

src/assets/scss/variables.scss

@@ -10,6 +10,7 @@ $dark-lavender: #7d6c99;
 $dusty-orange: #f18647;
 $violet: #bd10e0;
 $red: #cd0000;
+$cool-grey: #aeafb1;
 
 // interpretations in app
 $primary_color: $ugly-purple;
@@ -17,6 +18,7 @@ $secondary_color: $lavender-pink;
 $font_color: $black;
 $logo_color: $dark-lavender;
 $logo_color_2: $camo;
+$choice_select_border_color: $cool-grey;
 
 // FONT
 $default_font : "pt_sans";