center column, step 2 buttons and text
This commit is contained in:
tykayn
parent
eacaf6bc87
commit
c4dee3eaad
|
|
@ -3,40 +3,38 @@
|
|||
<form action="#" [formGroup]="pollService.form">
|
||||
<div class="min-height">
|
||||
<app-errors-list [form]="pollService.form"></app-errors-list>
|
||||
<h2 class="title is-2">
|
||||
<h3 class="title is-3">
|
||||
{{ 'creation.want' | translate }}
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="kind-of-poll columns">
|
||||
<div class="column">
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': pollService.form.value.isAboutDate != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
<label for="isAboutDate_true">
|
||||
{{ 'creation.kind.date' | translate }}
|
||||
</label>
|
||||
<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
|
||||
</div>
|
||||
</h3>
|
||||
<div class=" ">
|
||||
<div class="kind-of-poll">
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': pollService.form.value.isAboutDate != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
<img class="icon" src="assets/icons/calendar.svg" alt="icone cal" />
|
||||
<label for="isAboutDate_true">
|
||||
{{ 'creation.kind.date' | translate }}
|
||||
</label>
|
||||
<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': !pollService.form.controls.isAboutDate.value != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
<i class="fa fa-list-ul"></i>
|
||||
<label for="isAboutDate_false">
|
||||
{{ 'creation.kind.classic' | translate }}
|
||||
</label>
|
||||
<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': !pollService.form.controls.isAboutDate.value != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
<img class="icon" src="assets/icons/bar-chart-2.svg" alt="icone chart" />
|
||||
|
||||
<label for="isAboutDate_false">
|
||||
{{ 'creation.kind.classic' | translate }}
|
||||
</label>
|
||||
<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,53 @@
|
|||
@import '../../../../../../styles/variables';
|
||||
|
||||
.poll-kind {
|
||||
.title {
|
||||
margin-bottom: 32px;
|
||||
font-size: 32px;
|
||||
line-height: 36.8px;
|
||||
}
|
||||
}
|
||||
.kind-of-poll {
|
||||
margin-top: 5em;
|
||||
min-height: 30vh;
|
||||
|
||||
.fa {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: $d-grey;
|
||||
background: $d-blue30;
|
||||
border: solid white 1px;
|
||||
border-radius: 8px;
|
||||
transition: background-color ease 1.5s;
|
||||
color: $font-color;
|
||||
&.is-selected {
|
||||
background: $secondary_color;
|
||||
border: solid $primary-color 1px;
|
||||
color: $white;
|
||||
label {
|
||||
color: $white;
|
||||
}
|
||||
.fa {
|
||||
color: $white;
|
||||
}
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 1rem;
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
&:hover {
|
||||
background: $secondary_color;
|
||||
|
||||
img {
|
||||
margin-right: 11px;
|
||||
margin-left: 0;
|
||||
margin-top: -2px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
border: solid $primary-color 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: solid $primary-color 1px;
|
||||
color: $white;
|
||||
transition: background-color ease 0.25s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="contained-in-main-column">
|
||||
<button
|
||||
*ngIf="display_previous_button"
|
||||
class="button-previous is-secondary pull-left"
|
||||
class="button-previous is-secondary"
|
||||
[routerLink]="['/administration/step/' + previous_step_number]"
|
||||
>
|
||||
{{ 'nav.previous' | translate }}
|
||||
|
|
|
|||
|
|
@ -1 +1,9 @@
|
|||
@import '../../../../styles/variables';
|
||||
|
||||
.bottom-step-buttons {
|
||||
width: 100vw;
|
||||
|
||||
.button-previous {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
"want": "I want to create a poll",
|
||||
"advanced": "More options",
|
||||
"kind": {
|
||||
"classic": "classic",
|
||||
"date": "special dates"
|
||||
"classic": "Classic poll",
|
||||
"date": "Date poll"
|
||||
},
|
||||
"choose_title": "Provide a name for your poll",
|
||||
"choose_title_placeholder": "title",
|
||||
|
|
@ -48,6 +48,12 @@
|
|||
"description_placeholder": "description",
|
||||
"description_constraint": "max chars"
|
||||
},
|
||||
"popup": {
|
||||
"cancel": {
|
||||
"title": "Vous allez annuler votre sondage",
|
||||
"main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant.\nSouhaitez-vous vraiment annuler?"
|
||||
}
|
||||
},
|
||||
"dates": {
|
||||
"title": "Config especially for the dates",
|
||||
"hours_different": "I want to put",
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@
|
|||
"dialog_content": "Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.",
|
||||
"advanced": "Options avancées",
|
||||
"kind": {
|
||||
"classic": "Propositions",
|
||||
"date": "Date"
|
||||
"classic": "Sondage classique",
|
||||
"date": "Sondage date"
|
||||
},
|
||||
"choose_title": "Renseignez un nom pour votre sondage",
|
||||
"choose_title_label": "Nom de votre sondage (obligatoire)",
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@ mat-checkbox {
|
|||
.step {
|
||||
max-width: $main-column-width;
|
||||
margin: 0 auto;
|
||||
padding: 9rem 0;
|
||||
padding: 7rem 0;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
@extend .top-padding-nav;
|
||||
|
|
@ -307,10 +307,6 @@ mat-checkbox {
|
|||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
p,
|
||||
* {
|
||||
max-width: $main-column-width-inner;
|
||||
}
|
||||
.icon {
|
||||
width: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ body {
|
|||
|
||||
h3 {
|
||||
font-family: $title_font;
|
||||
font-size: 32px;
|
||||
line-height: 36.8px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
|
|||
|
|
@ -98,12 +98,8 @@ main {
|
|||
.contained-in-main-column {
|
||||
max-width: $main-column-width;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
display: block;
|
||||
.bottom-step-buttons & {
|
||||
max-width: $main-column-width-inner;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
.contained-desktop,
|
||||
.stuff {
|
||||
|
|
|
|||
|
|
@ -27,10 +27,11 @@ $d-primary-intense: #3e3882; // bleu 800
|
|||
$d-blue-700: #4f47af; // bleu 700
|
||||
$d-primary: #6359cf; // bleu 600
|
||||
$d-grey: #e3e3ea;
|
||||
$d-blue30: #d6d2e0; // bleu 300
|
||||
$d-blue30: #f6f5fd; // bleu 300
|
||||
$d-rule: #e2e0fa; // bleu 100
|
||||
$d-neutral: #b5b5c6;
|
||||
$d-border: #4e4c59;
|
||||
$d-black: #383838;
|
||||
$d-alt: #a9607f;
|
||||
|
||||
$d-info: #ecf4ff;
|
||||
|
|
@ -48,7 +49,7 @@ $primary_color: $d-primary;
|
|||
$primary: $d-primary;
|
||||
$secondary_color: $d-primary-intense;
|
||||
$bg-grey: $d-blue30;
|
||||
$font_color: $black;
|
||||
$font_color: $d-black;
|
||||
$logo_color: $d-primary;
|
||||
$logo_color_2: $d-primary-intense;
|
||||
$legend_color: $d-info-text;
|
||||
|
|
|
|||
Loading…
Reference in New Issue