style on selected items in consultation page

This commit is contained in:
tykayn 2021-04-24 13:04:21 +02:00 committed by Baptiste Lemoine
parent d84809d62a
commit 0c08e802c9
3 changed files with 27 additions and 2 deletions

View File

@ -11,7 +11,7 @@ import { PollService } from '../../core/services/poll.service';
styleUrls: ['./consultation.component.scss'], styleUrls: ['./consultation.component.scss'],
}) })
export class ConsultationComponent implements OnInit, OnDestroy { export class ConsultationComponent implements OnInit, OnDestroy {
public isCompactMode = false; public isCompactMode = true;
public poll: Poll; public poll: Poll;
public pollSlug: string; public pollSlug: string;
public passHash: string; public passHash: string;

View File

@ -1,4 +1,9 @@
<div class="box" *ngFor="let choice of poll.choices"> <div
class="box"
*ngFor="let choice of poll.choices"
[ngClass]="{ 'active has-background-success': choice.enabled }"
(click)="choice.enabled = !choice.enabled"
>
<div class="columns is-vcentered is-mobile"> <div class="columns is-vcentered is-mobile">
<div class="column"> <div class="column">
<label class="label">{{ choice.name }}</label> <label class="label">{{ choice.name }}</label>

View File

@ -0,0 +1,20 @@
@import '../../../../styles/variables';
.box {
border-left: 3px solid white;
cursor: pointer;
* {
cursor: pointer;
}
&:hover {
border-left-color: #d198d4;
background: #ccc;
}
&:focus,
&:active {
background: #d198d4;
}
&.active {
border-left-color: yellowgreen !important;
}
}