From 93fe06979c8c93698ebb3934dff229740d266d6d Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Tue, 4 Jun 2019 02:31:51 -0400
Subject: [PATCH] starting the design of polls

---
 .../stream/status/poll/poll.component.html    |  6 ++--
 .../stream/status/poll/poll.component.scss    | 32 +++++++++++++++++++
 .../stream/status/status.component.html       |  2 +-
 .../stream/status/status.component.scss       |  5 +++
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/status/poll/poll.component.html b/src/app/components/stream/status/poll/poll.component.html
index e06aa38e..05c07a80 100644
--- a/src/app/components/stream/status/poll/poll.component.html
+++ b/src/app/components/stream/status/poll/poll.component.html
@@ -1,8 +1,8 @@
 <div class="poll">
     <div *ngFor="let o of poll.options">
-        <input id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> 
-        <label for="{{o.title}}">{{o.title}}</label>
+        <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> 
+        <label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label>
         <br/>
     </div>
-    <a href >Vote</a> <span>{{poll.votes_count}} votes - X days left</span>
+    <button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!">Vote</button> <div class="poll__statistics">{{poll.votes_count}} votes - X days left</div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/poll/poll.component.scss b/src/app/components/stream/status/poll/poll.component.scss
index e69de29b..b716675a 100644
--- a/src/app/components/stream/status/poll/poll.component.scss
+++ b/src/app/components/stream/status/poll/poll.component.scss
@@ -0,0 +1,32 @@
+// @import "variables";
+// @import "commons";
+// @import "panel";
+@import "buttons";
+
+.poll {
+
+    &__btn-vote {
+        margin: 0 10px 0 0;
+        padding: 4px 15px;
+    }
+
+    &__statistics {
+        display: inline-block;
+        font-size: 0.8em;
+        color: rgb(101, 121, 160);
+    }
+
+    &__label {
+        cursor: pointer;
+    }
+}
+
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome and Opera */
+  }
\ No newline at end of file
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index bfdaca9d..1dfa129b 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -67,7 +67,7 @@
             (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
             (textSelected)="textSelected()"></app-databinded-text>
 
-        <app-poll *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
+        <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
 
         <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>
 
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 6afae100..14c2f362 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -116,6 +116,11 @@
         margin: 10px 10px 0 $avatar-column-space;
         display: block;
     }
+    &__poll {
+        word-wrap: break-word;
+        margin: 10px 10px 0 $avatar-column-space;
+        display: block;
+    }
     &__content-warning {
         min-height: 80px;
         display: block; // border: 1px solid greenyellow;