diff --git a/src/app/components/stream/status/poll/poll.component.html b/src/app/components/stream/status/poll/poll.component.html index 05c07a80..a7e25b38 100644 --- a/src/app/components/stream/status/poll/poll.component.html +++ b/src/app/components/stream/status/poll/poll.component.html @@ -1,8 +1,16 @@
- + + + +
+
+ +
{{poll.votes_count}} votes - X days left
-
{{poll.votes_count}} votes - X days left
\ 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 b716675a..6c6eb46f 100644 --- a/src/app/components/stream/status/poll/poll.component.scss +++ b/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-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 + -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 +} \ No newline at end of file diff --git a/src/app/components/stream/status/poll/poll.component.ts b/src/app/components/stream/status/poll/poll.component.ts index 5a8aae4d..77409030 100644 --- a/src/app/components/stream/status/poll/poll.component.ts +++ b/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'; - choiceType: string = 'checkbox'; + pollName: string; + + 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'; + } } }