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

styles for steps

This commit is contained in:
Tykayn 2021-11-14 15:48:27 +01:00 committed by tykayn
parent c6d5a8fc8c
commit b3b8d46aa3
11 changed files with 112 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/features/administration/form/advanced-config/advanced-config.component.html
View File

@ -1,6 +1,5 @@
<form [formGroup]="form" class="box"> <form [formGroup]="form" class="box">
<fieldset class="complete well"> <fieldset class="complete well">
<h2>{{ 'creation.advanced' | translate }}</h2>
<label for="descr">Description (optionnel)</label> <label for="descr">Description (optionnel)</label>
<br /> <br />
<textarea <textarea

2
src/app/features/administration/form/base-config/base-config.component.scss
View File

@ -1,4 +1,4 @@
#title { #title {
display: block; display: block;
width: 80%; width: 100%;
} }

22
src/app/features/administration/form/steps/step-five/step-five.component.html
View File

@ -2,21 +2,15 @@
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<app-success [poll]="pollService.form.value"></app-success> <app-success [poll]="pollService.form.value"></app-success>
<div class="columns"> <section class="supplement container">
<div class="column"></div> <div class="columns">
<div class="column"></div> <div class="column">
</div> <button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/1']">
<i class="fa fa-pencil"></i>
<div class="columns"> modifier le sondage
<div class="column"> </button>
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/1']"> </div>
<i class="fa fa-pencil"></i>
modifier le sondage
</button>
</div> </div>
</div>
<section class="supplement">
<button class="btn btn--warning" (click)="askInitFormDefault()"> <button class="btn btn--warning" (click)="askInitFormDefault()">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
Tout réinitialiser Tout réinitialiser

9
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -34,11 +34,12 @@
<fieldset class="advanced-config"> <fieldset class="advanced-config">
<button <button
class="btn" class="button is-unchecked-info"
[ngClass]="{ 'is-outlined': !advancedDisplayEnabled, 'is-info': advancedDisplayEnabled }" [ngClass]="{ 'is-info': !advancedDisplayEnabled, 'is-primary': advancedDisplayEnabled }"
(click)="advancedDisplayEnabled = !advancedDisplayEnabled" (click)="advancedDisplayEnabled = !advancedDisplayEnabled"
> >
<i class="fa fa-save"></i> <i class="fa fa-chevron-circle-down" *ngIf="!advancedDisplayEnabled"></i>
<i class="fa fa-chevron-circle-up" *ngIf="advancedDisplayEnabled"></i>
{{ 'creation.advanced' | translate }} {{ 'creation.advanced' | translate }}
</button> </button>
<fieldset class="complete well" *ngIf="advancedDisplayEnabled"> <fieldset class="complete well" *ngIf="advancedDisplayEnabled">
@ -54,7 +55,7 @@
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<button class="btn is-primary" (click)="createPoll()" [disabled]="!pollService.form.valid"> <button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
<i class="fa fa-save"></i> <i class="fa fa-save"></i>
Enregistrer le sondage Enregistrer le sondage
</button> </button>

8
src/app/features/administration/form/steps/step-four/step-four.component.scss
View File

@ -0,0 +1,8 @@
@import '../../../../../../styles/variables';
.advanced-config {
fieldset {
background: $grey-lighter;
border-left: 3px solid $primary-color;
}
}

21
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

@ -11,7 +11,7 @@
<label for="title">Titre</label> <label for="title">Titre</label>
</div> </div>
<input <input
class="input-lg" class="input is-fullwidth"
#title #title
[placeholder]="'creation.choose_title_placeholder' | translate" [placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title" formControlName="title"
@ -47,21 +47,12 @@
required required
maxlength="300" maxlength="300"
></textarea> ></textarea>
<div class="text-info"> <div
300 caractères maximum class="text-info padded"
</div> [ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
</div>
<div class="column is-narrow">
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
> >
<i class="fa fa-close"></i> {{ pollService.form.value.description.length }} / 300 caractères maximum
</button> </div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,3 +1,6 @@
.fa { .kind-of-poll {
margin-right: 1em; margin-top: 5em;
.fa {
margin-right: 1em;
}
} }

99
src/app/features/administration/success/success.component.html
View File

@ -15,52 +15,61 @@
</div> </div>
</section> </section>
<div class="container padded"> <div class="container padded">
<div class="has-text-centered"> <div class=" ">
<div class="main-block"> <div class="main-block">
<div class="admin"> <div class="columns">
<h2 class="title is-2"> <div class="column">
{{ 'resume.admins' | translate }} <div class="admin">
</h2> <h2 class="title is-2">
<p> <i class="fa fa-gears"></i>
Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez {{ 'resume.admins' | translate }}
toujours les recevoir par email) </h2>
</p> <p>
<h2 class="title is-2"> Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous
Côté admin pourrez toujours les recevoir par email)
</h2> </p>
<p> <div>
Pour accéder au sondage et à tous ses paramètres : Pour accéder au sondage et à tous ses paramètres :
<br /> <br />
<a class="button is-info" routerLink="/admin/{{ pollService.form.value.admin_key }}" <pre class="is-default" routerLink="{{ pollService.getAdministrationUrlFromForm() }}"
>{{ pollService.getAdministrationUrlFromForm() }} >{{ pollService.getAdministrationUrlFromForm() }}
</a> </pre
<app-copy-text [textToCopy]="pollService.getAdministrationUrlFromForm()"></app-copy-text> >
</p> <app-copy-text [textToCopy]="pollService.getAdministrationUrlFromForm()"></app-copy-text>
<br /> </div>
<a class="button is-info" [href]="pollService.getAdministrationUrlFromForm()"> <br />
Voir le sondage coté administrateur·ice <a class="button is-info" [href]="pollService.getAdministrationUrlFromForm()">
</a> Voir le sondage coté administrateur·ice
<br /> </a>
<p class="note"> <br />
Note : Le sondage sera supprimé {{ pollService.form.value.default_expiracy_days_from_now }} jours <p class="note">
après la date de sa dernière modification. Note : Le sondage sera supprimé
<span class="expiracy-detail" *ngIf="pollService.form.value.expiracy_date"> {{ pollService.form.value.default_expiracy_days_from_now }} jours après la date de sa
Le {{ pollService.form.value.expiracy_date | date: 'short' }} dernière modification.
</span> <span class="expiracy-detail" *ngIf="pollService.form.value.expiracy_date">
</p> Le {{ pollService.form.value.expiracy_date | date: 'short' }}
</div> </span>
<div class="public"> </p>
<h2 class="title is-2" i18n>{{ 'resume.users' | translate }}</h2> </div>
<p> </div>
Pour voir le sondage : <div class="column">
<br /> <div class="public">
<a class="button is-info" [href]="pollService.getParticipationUrlFromForm()" <h2 class="title is-2">
>{{ pollService.getParticipationUrlFromForm() }} <i class="fa fa-ellipsis-v"></i>
</a> {{ 'resume.users' | translate }}
</p> </h2>
<br /> <p>
<app-copy-text [textToCopy]="pollService.getParticipationUrlFromForm()"></app-copy-text> Pour voir le sondage :
<br /> <br />
<a class="button is-info" [href]="pollService.getParticipationUrlFromForm()"
>{{ pollService.getParticipationUrlFromForm() }}
</a>
</p>
<br />
<app-copy-text [textToCopy]="pollService.getParticipationUrlFromForm()"></app-copy-text>
<br />
</div>
</div>
</div> </div>
<!-- <img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />--> <!-- <img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->

3
src/app/features/administration/success/success.component.scss
View File

@ -7,7 +7,8 @@ button {
margin-right: 1ch; margin-right: 1ch;
} }
a { a {
max-width: 35em; padding: 1em;
max-width: 20em;
@extend .truncate; @extend .truncate;
} }
.truncate { .truncate {

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

@ -1,13 +1,32 @@
@charset "UTF-8"; @charset "UTF-8";
.input:hover,
input:hover,
select:hover,
.textarea:hover,
.select select:hover,
.is-hovered.input,
input.is-hovered,
select.is-hovered,
.is-hovered.textarea,
.select select.is-hovered {
border-color: $border-color !important;
}
app-step-one, app-step-one,
app-step-two, app-step-two,
app-step-three, app-step-three,
app-step-four, app-step-four {
app-step-five {
padding: 2em 2.5em; padding: 2em 2.5em;
display: block; display: block;
} }
app-step-five {
app-stepper {
padding: 2em 2.5em;
display: block;
}
.container {
padding: 2em;
}
}
input, input,
select, select,

16
src/styles/partials/_main.scss
View File

@ -5,22 +5,8 @@ main {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.main-block {
min-height: 20em;
max-width: 40em;
margin-bottom: 10em;
margin-left: auto;
margin-right: auto;
.title {
margin-top: 2em;
margin-bottom: 2em;
}
.button {
border: 0;
}
}
.creation, .creation,
.search { .search {
@extend .main-block; @extend main;
} }