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">
<fieldset class="complete well">
<h2>{{ 'creation.advanced' | translate }}</h2>
<label for="descr">Description (optionnel)</label>
<br />
<textarea

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

@ -1,4 +1,4 @@
#title {
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-success [poll]="pollService.form.value"></app-success>
<div class="columns">
<div class="column"></div>
<div class="column"></div>
</div>
<div class="columns">
<div class="column">
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/1']">
<i class="fa fa-pencil"></i>
modifier le sondage
</button>
<section class="supplement container">
<div class="columns">
<div class="column">
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/1']">
<i class="fa fa-pencil"></i>
modifier le sondage
</button>
</div>
</div>
</div>
<section class="supplement">
<button class="btn btn--warning" (click)="askInitFormDefault()">
<i class="fa fa-refresh"></i>
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">
<button
class="btn"
[ngClass]="{ 'is-outlined': !advancedDisplayEnabled, 'is-info': advancedDisplayEnabled }"
class="button is-unchecked-info"
[ngClass]="{ 'is-info': !advancedDisplayEnabled, 'is-primary': 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 }}
</button>
<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
@ -54,7 +55,7 @@
</button>
</div>
<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>
Enregistrer le sondage
</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>
</div>
<input
class="input-lg"
class="input is-fullwidth"
#title
[placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title"
@ -47,21 +47,12 @@
required
maxlength="300"
></textarea>
<div class="text-info">
300 caractères maximum
</div>
</div>
<div class="column is-narrow">
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
<div
class="text-info padded"
[ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
>
<i class="fa fa-close"></i>
</button>
{{ pollService.form.value.description.length }} / 300 caractères maximum
</div>
</div>
</div>
</div>

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

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

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

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

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

@ -1,13 +1,32 @@
@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-two,
app-step-three,
app-step-four,
app-step-five {
app-step-four {
padding: 2em 2.5em;
display: block;
}
app-step-five {
app-stepper {
padding: 2em 2.5em;
display: block;
}
.container {
padding: 2em;
}
}
input,
select,

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

@ -5,22 +5,8 @@ main {
width: 100%;
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,
.search {
@extend .main-block;
@extend main;
}