tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

center column, step 2 buttons and text

Browse Source
This commit is contained in:
Tykayn 2022-02-02 16:28:52 +01:00 committed by tykayn
parent eacaf6bc87
commit c4dee3eaad
10 changed files with 94 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,40 +3,38 @@
<form action="#" [formGroup]="pollService.form"> <form action="#" [formGroup]="pollService.form">
<div class="min-height"> <div class="min-height">
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<h2 class="title is-2"> <h3 class="title is-3">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</h2> </h3>
<div class="container"> <div class=" ">
<div class="kind-of-poll columns"> <div class="kind-of-poll">
<div class="column"> <div
<div class="button input-radio is-fullwidth"
class="button input-radio is-fullwidth" [ngClass]="{
[ngClass]="{ 'is-selected': pollService.form.value.isAboutDate != false
'is-selected': pollService.form.value.isAboutDate != false }"
}" (click)="pollService.form.controls.isAboutDate.setValue(true)"
(click)="pollService.form.controls.isAboutDate.setValue(true)" >
> <img class="icon" src="assets/icons/calendar.svg" alt="icone cal" />
<i class="fa fa-calendar"></i> <label for="isAboutDate_true">
<label for="isAboutDate_true"> {{ 'creation.kind.date' | translate }}
{{ 'creation.kind.date' | translate }} </label>
</label> <input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
</div>
</div> </div>
<div class="column">
<div <div
class="button input-radio is-fullwidth" class="button input-radio is-fullwidth"
[ngClass]="{ [ngClass]="{
'is-selected': !pollService.form.controls.isAboutDate.value != false 'is-selected': !pollService.form.controls.isAboutDate.value != false
}" }"
(click)="pollService.form.controls.isAboutDate.setValue(false)" (click)="pollService.form.controls.isAboutDate.setValue(false)"
> >
<i class="fa fa-list-ul"></i> <img class="icon" src="assets/icons/bar-chart-2.svg" alt="icone chart" />
<label for="isAboutDate_false">
{{ 'creation.kind.classic' | translate }} <label for="isAboutDate_false">
</label> {{ 'creation.kind.classic' | translate }}
<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" /> </label>
</div> <input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
</div> </div>
</div> </div>
</div> </div>

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

@ -1,31 +1,53 @@
@import '../../../../../../styles/variables'; @import '../../../../../../styles/variables';
.poll-kind {
.title {
margin-bottom: 32px;
font-size: 32px;
line-height: 36.8px;
}
}
.kind-of-poll { .kind-of-poll {
margin-top: 5em;
min-height: 30vh; min-height: 30vh;
.fa { .fa {
margin-right: 1em; margin-right: 1em;
} }
.button { .button {
background: $d-grey; background: $d-blue30;
border: solid white 1px; border: solid white 1px;
border-radius: 8px;
transition: background-color ease 1.5s; transition: background-color ease 1.5s;
color: $font-color; color: $font-color;
&.is-selected { margin-bottom: 0.85rem;
background: $secondary_color; padding: 1rem;
border: solid $primary-color 1px;
color: $white; label {
label { font-weight: 700;
color: $white; font-size: 14px;
} line-height: 16px;
.fa {
color: $white;
}
} }
&: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; border: solid $primary-color 1px;
color: $white;
transition: background-color ease 0.25s; transition: background-color ease 0.25s;
} }
} }

2
src/app/features/administration/nav-steps/nav-steps.component.html
View File

@ -2,7 +2,7 @@
<div class="contained-in-main-column"> <div class="contained-in-main-column">
<button <button
*ngIf="display_previous_button" *ngIf="display_previous_button"
class="button-previous is-secondary pull-left" class="button-previous is-secondary"
[routerLink]="['/administration/step/' + previous_step_number]" [routerLink]="['/administration/step/' + previous_step_number]"
> >
{{ 'nav.previous' | translate }} {{ 'nav.previous' | translate }}

8
src/app/features/administration/nav-steps/nav-steps.component.scss
View File

@ -1 +1,9 @@
@import '../../../../styles/variables'; @import '../../../../styles/variables';
.bottom-step-buttons {
width: 100vw;
.button-previous {
margin-left: 0;
}
}

10
src/assets/i18n/EN.json
View File

@ -37,8 +37,8 @@
"want": "I want to create a poll", "want": "I want to create a poll",
"advanced": "More options", "advanced": "More options",
"kind": { "kind": {
"classic": "classic", "classic": "Classic poll",
"date": "special dates" "date": "Date poll"
}, },
"choose_title": "Provide a name for your poll", "choose_title": "Provide a name for your poll",
"choose_title_placeholder": "title", "choose_title_placeholder": "title",
@ -48,6 +48,12 @@
"description_placeholder": "description", "description_placeholder": "description",
"description_constraint": "max chars" "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": { "dates": {
"title": "Config especially for the dates", "title": "Config especially for the dates",
"hours_different": "I want to put", "hours_different": "I want to put",

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

@ -44,8 +44,8 @@
"dialog_content": "Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.", "dialog_content": "Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.",
"advanced": "Options avancées", "advanced": "Options avancées",
"kind": { "kind": {
"classic": "Propositions", "classic": "Sondage classique",
"date": "Date" "date": "Sondage 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)",

6
src/styles/partials/_forms.scss
View File

@ -290,7 +290,7 @@ mat-checkbox {
.step { .step {
max-width: $main-column-width; max-width: $main-column-width;
margin: 0 auto; margin: 0 auto;
padding: 9rem 0; padding: 7rem 0;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@extend .top-padding-nav; @extend .top-padding-nav;
@ -307,10 +307,6 @@ mat-checkbox {
font-size: 1rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
p,
* {
max-width: $main-column-width-inner;
}
.icon { .icon {
width: 1rem; width: 1rem;
} }

2
src/styles/partials/_typo.scss
View File

@ -28,6 +28,8 @@ body {
h3 { h3 {
font-family: $title_font; font-family: $title_font;
font-size: 32px;
line-height: 36.8px;
} }
h4 { h4 {

6
src/styles/partials/global.scss
View File

@ -98,12 +98,8 @@ main {
.contained-in-main-column { .contained-in-main-column {
max-width: $main-column-width; max-width: $main-column-width;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100vw;
display: block; display: block;
.bottom-step-buttons & {
max-width: $main-column-width-inner;
height: 1rem;
}
} }
.contained-desktop, .contained-desktop,
.stuff { .stuff {

5
src/styles/variables.scss
View File

@ -27,10 +27,11 @@ $d-primary-intense: #3e3882; // bleu 800
$d-blue-700: #4f47af; // bleu 700 $d-blue-700: #4f47af; // bleu 700
$d-primary: #6359cf; // bleu 600 $d-primary: #6359cf; // bleu 600
$d-grey: #e3e3ea; $d-grey: #e3e3ea;
$d-blue30: #d6d2e0; // bleu 300 $d-blue30: #f6f5fd; // bleu 300
$d-rule: #e2e0fa; // bleu 100 $d-rule: #e2e0fa; // bleu 100
$d-neutral: #b5b5c6; $d-neutral: #b5b5c6;
$d-border: #4e4c59; $d-border: #4e4c59;
$d-black: #383838;
$d-alt: #a9607f; $d-alt: #a9607f;
$d-info: #ecf4ff; $d-info: #ecf4ff;
@ -48,7 +49,7 @@ $primary_color: $d-primary;
$primary: $d-primary; $primary: $d-primary;
$secondary_color: $d-primary-intense; $secondary_color: $d-primary-intense;
$bg-grey: $d-blue30; $bg-grey: $d-blue30;
$font_color: $black; $font_color: $d-black;
$logo_color: $d-primary; $logo_color: $d-primary;
$logo_color_2: $d-primary-intense; $logo_color_2: $d-primary-intense;
$legend_color: $d-info-text; $legend_color: $d-info-text;