Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

style for kind of poll button

Browse Source
This commit is contained in:
Tykayn 2021-11-16 16:35:27 +01:00 committed by tykayn
parent a3db9b7cd5
commit e99a86bb4b
4 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

@ -5,26 +5,28 @@
<h2 class="title is-2">
{{ 'creation.want' | translate }}
</h2>
<div class="kind-of-poll columns">
<div class="column">
<button
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
{{ 'creation.kind.date' | translate }}
</button>
</div>
<div class="column">
<button
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-list-ul"></i>
{{ 'creation.kind.classic' | translate }}
</button>
<div class="container">
<div class="kind-of-poll columns">
<div class="column">
<button
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
{{ 'creation.kind.date' | translate }}
</button>
</div>
<div class="column">
<button
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-list-ul"></i>
{{ 'creation.kind.classic' | translate }}
</button>
</div>
</div>
</div>
</div>

10
src/app/features/administration/form/steps/step-two/step-two.component.scss
View File

@ -1,6 +1,16 @@
@import '../../../../../../styles/variables';
.kind-of-poll {
margin-top: 5em;
.fa {
margin-right: 1em;
}
.button {
background: $d-grey;
border: solid white 1px;
&.is-selected {
border: solid $primary-color 1px;
color: $font_color;
}
}
}

31
src/app/features/administration/stepper/stepper.component.html
View File

@ -1,21 +1,4 @@
<section class="creation-stepper">
<div class="step-info">
<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</h2>
<h2 class="title is-3" *ngIf="pollService.step_current > 1">
<span class="poll-title">
{{ pollService.form.value.title }}
</span>
</h2>
<h3 class="title is-2">
Étape {{ step_current }} /
{{ step_max }}
</h3>
</div>
<div class="step-bar-container" style="width: 100%;">
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div>
<div class="shortcuts">
<a
class="shortcut"
@ -55,4 +38,18 @@
<!-- <a class="shortcut" href="#" [routerLink]="['/administration/step/6']" [ngClass]="{'is-active':pollService.step_current == 6}">6</a>-->
<!-- <a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
</div>
<div class="step-info">
<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</h2>
<h2 class="title is-3" *ngIf="pollService.step_current > 1">
<span class="poll-title">
{{ pollService.form.value.title }}
</span>
</h2>
<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
</div>
<div class="step-bar-container" style="width: 100%;">
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div>
</section>

6
src/assets/i18n/FR.json
View File

@ -28,11 +28,11 @@
},
"creation": {
"title": "Créer un sondage",
"want": "Je veux créer un sondage",
"want": "Choisissez le type de sondage",
"advanced": "Options avancées",
"kind": {
"classic": "classique",
"date": "spécial dates"
"classic": "Propositions",
"date": "Date"
},
"choose_title": "Renseignez un nom pour votre sondage",
"choose_title_label": "Nom de votre sondage (obligatoire)",