tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

style for kind of poll button

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"> <h2 class="title is-2">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</h2> </h2>
<div class="kind-of-poll columns"> <div class="container">
<div class="column"> <div class="kind-of-poll columns">
<button <div class="column">
class="button is-fullwidth" <button
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }" class="button is-fullwidth"
(click)="pollService.form.controls.isAboutDate.setValue(true)" [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 }} <i class="fa fa-calendar"></i>
</button> {{ 'creation.kind.date' | translate }}
</div> </button>
<div class="column"> </div>
<button <div class="column">
class="button is-fullwidth" <button
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }" class="button is-fullwidth"
(click)="pollService.form.controls.isAboutDate.setValue(false)" [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 }} <i class="fa fa-list-ul"></i>
</button> {{ 'creation.kind.classic' | translate }}
</button>
</div>
</div> </div>
</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 { .kind-of-poll {
margin-top: 5em; margin-top: 5em;
.fa { .fa {
margin-right: 1em; 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"> <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"> <div class="shortcuts">
<a <a
class="shortcut" 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/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>--> <!-- <a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
</div> </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> </section>

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

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