forked from tykayn/funky-framadate-front
styles for steps
This commit is contained in:
tykayn
parent
c6d5a8fc8c
commit
b3b8d46aa3
@ -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
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#title {
|
||||
display: block;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<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>
|
||||
|
||||
<section class="supplement">
|
||||
</div>
|
||||
<button class="btn btn--warning" (click)="askInitFormDefault()">
|
||||
<i class="fa fa-refresh"></i>
|
||||
Tout réinitialiser
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
@import '../../../../../../styles/variables';
|
||||
|
||||
.advanced-config {
|
||||
fieldset {
|
||||
background: $grey-lighter;
|
||||
border-left: 3px solid $primary-color;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
.fa {
|
||||
.kind-of-poll {
|
||||
margin-top: 5em;
|
||||
.fa {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,42 +15,49 @@
|
||||
</div>
|
||||
</section>
|
||||
<div class="container padded">
|
||||
<div class="has-text-centered">
|
||||
<div class=" ">
|
||||
<div class="main-block">
|
||||
<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)
|
||||
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>
|
||||
<div>
|
||||
Pour accéder au sondage et à tous ses paramètres :
|
||||
<br />
|
||||
<a class="button is-info" routerLink="/admin/{{ pollService.form.value.admin_key }}"
|
||||
<pre class="is-default" routerLink="{{ pollService.getAdministrationUrlFromForm() }}"
|
||||
>{{ pollService.getAdministrationUrlFromForm() }}
|
||||
</a>
|
||||
</pre
|
||||
>
|
||||
<app-copy-text [textToCopy]="pollService.getAdministrationUrlFromForm()"></app-copy-text>
|
||||
</p>
|
||||
</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.
|
||||
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" i18n>{{ 'resume.users' | translate }}</h2>
|
||||
<h2 class="title is-2">
|
||||
<i class="fa fa-ellipsis-v"></i>
|
||||
{{ 'resume.users' | translate }}
|
||||
</h2>
|
||||
<p>
|
||||
Pour voir le sondage :
|
||||
<br />
|
||||
@ -62,6 +69,8 @@
|
||||
<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" />-->
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,8 @@ button {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
a {
|
||||
max-width: 35em;
|
||||
padding: 1em;
|
||||
max-width: 20em;
|
||||
@extend .truncate;
|
||||
}
|
||||
.truncate {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user