funky-framadate-front/src/app/features/administration/stepper/stepper.component.html

127 lines
3.5 KiB
HTML
Raw Normal View History

2021-11-17 15:06:36 +01:00
<section class="creation-stepper" id="creation_stepper">
<div class="shortcuts" *ngIf="environment.showStepperShortcuts">
2021-11-16 16:23:32 +01:00
<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
>
2021-11-17 15:06:36 +01:00
<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
>
2021-11-14 15:26:26 +01:00
</div>
2021-11-16 16:35:27 +01:00
<div class="step-info">
2021-12-09 10:38:13 +01:00
<div class="columns half-columns">
2021-12-02 16:19:08 +01:00
<div class="column">
2021-12-13 16:18:24 +01:00
<a
class="logo-home-link navbar-item pull-left is-hidden-mobile"
[routerLink]="['/']"
routerLinkActive="active"
>
<img
2021-12-13 18:30:25 +01:00
class="stepper-app-logo logo"
*ngIf="environment.appLogo"
src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}"
/>
2021-12-09 10:38:13 +01:00
</a>
2021-12-15 18:37:37 +01:00
<h1>
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</span>
2021-12-15 18:37:37 +01:00
<span *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }}
</span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
(Aucun titre)
</span>
2021-12-09 10:38:13 +01:00
</span>
2021-12-15 18:37:37 +01:00
<span class="step-counter-text" *ngIf="pollService.step_current !== 1"
>Étape {{ step_current }} sur {{ step_max }}
2021-12-09 10:38:13 +01:00
</span>
</h1>
2021-11-17 15:16:47 +01:00
</div>
2021-12-09 10:38:13 +01:00
<div class="column has-text-right">
2021-12-14 11:22:23 +01:00
<app-language-selector class="nav-button"></app-language-selector>
<button class="has-no-border nav-button cancel-button" (click)="showCancelDialog()">
2021-12-14 11:22:23 +01:00
{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
</button>
2021-11-17 15:16:47 +01:00
</div>
</div>
2021-11-16 16:35:27 +01:00
</div>
2021-12-09 11:21:41 +01:00
<div class="step-bar-container"></div>
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
2021-12-06 12:13:47 +01:00
<!-- modale pour quitter la création-->
<p-dialog
2021-12-14 11:22:23 +01:00
header="{{ 'nav.leave' | translate }}?"
2021-12-06 12:13:47 +01:00
[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">
2021-12-06 12:25:39 +01:00
<div class="column is-half-mobile">
2021-12-06 12:13:47 +01:00
<button class="button is-warning is-fullwidth cancel-button-confirm" (click)="goToHome()">
Quitter
</button>
</div>
2021-12-06 12:25:39 +01:00
<div class="column is-half-mobile">
2021-12-06 12:13:47 +01:00
<button
class="button is-primary is-fullwidth cancel-button-reject"
(click)="display_cancel_dialog = false"
>
Rester
</button>
</div>
</div>
</ng-template>
</p-dialog>
2021-11-07 14:52:49 +01:00
</section>