styling the poll choices #93

src/app/components/stream/status/poll/poll.component.html

@@ -1,8 +1,16 @@
 <div class="poll">
     <div *ngFor="let o of poll.options">
-        <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> 
+        <!-- <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/>
+        <br /> -->
+
+        <label class="poll__container">{{o.title}}
+            <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}">
+            <span class="poll__container__checkmark" [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span>
+        </label>
+    </div>
+    <div class="poll__voting">
+        <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>
-    <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>

src/app/components/stream/status/poll/poll.component.scss

@@ -19,14 +19,109 @@
     &__label {
         cursor: pointer;
     }
+
+    &__voting {
+        margin-top: 10px;
+    }
+
+    &__container {
+        display: block;
+        position: relative;
+        padding-left: 25px;
+        margin: 0 0 5px 5px;
+        cursor: pointer;
+        // font-size: 22px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &:hover &__input~&__checkmark {
+            background-color: #ccc;
+        }
+
+        & &__input:checked~&__checkmark {
+            background-color: rgb(62, 75, 100);
+        }
+
+        &__input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+        }
+
+        &__checkmark--box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 20px;
+            width: 20px;
+            background-color: #eee;
+
+            &:after {
+                content: "";
+                position: absolute;
+                display: none;
+            }
+        }
+
+        &__checkmark--round {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 20px;
+            width: 20px;
+            background-color: #eee;
+            border-radius: 50%;
+        }
+
+        & &__input:checked:checked~&__checkmark:after {
+            display: block;
+        }
+
+        & &__checkmark--box:after {
+            left: 7px;
+            top: 5px;
+            width: 5px;
+            height: 10px;
+            border: solid white;
+            border-width: 0 3px 3px 0;
+            -webkit-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        &__checkmark--round:after {
+            content: "";
+            position: absolute;
+            display: none;
+        }
+
+        & &__checkmark--round:after {
+            top: 6px;
+            left: 6px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: white;
+        }
+    }
 }
 
 .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-touch-callout: none;
-      -webkit-user-select: none; /* Safari */
+    /* iOS Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
+    -webkit-user-select: none;
-         -moz-user-select: none; /* Firefox */
+    /* Safari */
-          -ms-user-select: none; /* Internet Explorer/Edge */
+    -khtml-user-select: none;
-              user-select: none; /* Non-prefixed version, currently
+    /* 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 */
-  }
+}

src/app/components/stream/status/poll/poll.component.ts

@@ -8,15 +8,22 @@ import { Poll } from '../../../../services/models/mastodon.interfaces';
     styleUrls: ['./poll.component.scss']
 })
 export class PollComponent implements OnInit {
-    // choiceType: string = 'radio';
+    pollName: string;
-    choiceType: string = 'checkbox';
+
+    choiceType: string;// = 'radio';
+    //choiceType: string = 'checkbox';
 
     @Input() poll: Poll;
 
     constructor() { }
 
     ngOnInit() {
-
+        this.pollName = this.poll.id;
+        if(this.poll.multiple){
+            this.choiceType = 'checkbox';
+        } else {
+            this.choiceType = 'radio';
+        }
     }
 
 }