108 lines
2.9 KiB
HTML
108 lines
2.9 KiB
HTML
<section class="creation-stepper" id="creation_stepper">
|
|
<div class="shortcuts" *ngIf="environment.showStepperShortcuts">
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/1']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 1 }"
|
|
>1</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/2']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 2 }"
|
|
>2</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/3']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 3 }"
|
|
>3</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/4']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 4 }"
|
|
>4</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/5']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 5 }"
|
|
>5</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/6']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 6 }"
|
|
>6</a
|
|
>
|
|
<a
|
|
class="shortcut"
|
|
href="#"
|
|
[routerLink]="['/administration/step/7']"
|
|
[ngClass]="{ 'is-active': pollService.step_current == 7 }"
|
|
>7</a
|
|
>
|
|
</div>
|
|
<div class="step-info">
|
|
<div class="columns">
|
|
<div class="column is-narrow">
|
|
<a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
|
|
<img src="assets/img/icone_home.png" alt="logo framadate" />
|
|
</a>
|
|
</div>
|
|
<div class="column">
|
|
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
|
|
{{ 'creation.title' | translate }}
|
|
</h2>
|
|
<h2 class="step-title-poll" *ngIf="pollService.step_current >= 2">
|
|
{{ pollService.form.value.title }}
|
|
</h2>
|
|
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
|
|
</div>
|
|
<div class="column is-half has-text-right">
|
|
<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step-bar-container" style="width: 100%;">
|
|
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
|
|
</div>
|
|
|
|
<!-- modale pour quitter la création-->
|
|
<p-dialog
|
|
header="Quitter?"
|
|
[modal]="true"
|
|
[(visible)]="display_cancel_dialog"
|
|
[breakpoints]="{ '960px': '75vw' }"
|
|
[style]="{ width: '50vw' }"
|
|
[draggable]="false"
|
|
[resizable]="false"
|
|
>
|
|
<p>Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.</p>
|
|
<ng-template pTemplate="footer">
|
|
<div class="columns">
|
|
<div class="column is-half-mobile">
|
|
<button class="button is-warning is-fullwidth cancel-button-confirm" (click)="goToHome()">
|
|
Quitter
|
|
</button>
|
|
</div>
|
|
<div class="column is-half-mobile">
|
|
<button
|
|
class="button is-primary is-fullwidth cancel-button-reject"
|
|
(click)="display_cancel_dialog = false"
|
|
>
|
|
Rester
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</p-dialog>
|
|
</section>
|