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

<header class="creation-stepper" id="creation_stepper" role="header">
	<app-skip-links [optionnal_step]="optionnal_step"></app-skip-links>
	<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">
		<a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
			<img
				class="stepper-app-logo"
				*ngIf="environment.appLogo"
				src="{{ environment.appLogo }}"
				alt="accueil {{ environment.appTitle }}"
			/>
		</a>
		<p class="title-section">
			<span class="logo-home-link pull-left">
				<span class="step-title-poll" *ngIf="pollService.step_current == 1">
					{{ 'creation.title' | translate }}
				</span>
			</span>

			<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">
					{{ 'nav.no_title' | translate }}
				</span>
			</span>
			<span class="step-counter-text">
				{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
			</span>
		</p>
		<button
			class="is-visible-smallest-screen pull-right menu-button is-filtered-icon-primary has-background-menu"
			(click)="toggle_mobile_menu()"
		>
			<!--			{{ 'nav.menu' | translate }}-->
		</button>
		<div class="is-hidden-smallest-screen has-right-elements pull-right">
			<app-language-selector class="nav-button"></app-language-selector>
			<button
				class="is-secondary is-thin cancel-button-stepper"
				(click)="showCancelDialog()"
				id="display_cancel_popup_button"
				aria-haspopup="dialog"
			>
				{{ 'nav.leave' | translate }}
			</button>
		</div>
	</div>
	<div class="step-bar-container"></div>
	<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>

	<!--	modale pour quitter la création-->
	<dialog>
		<p-dialog
			id="close_stepper"
			[modal]="true"
			[(visible)]="display_cancel_dialog"
			[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
			[style]="{ width: '486px', 'border-radius': '1rem' }"
			[styleClass]="'roundToPercentWidth-borders'"
			[draggable]="false"
			[showHeader]="false"
			[resizable]="false"
		>
			<ng-template pTemplate="titlebar">
				<button
					id="close_dialog"
					class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
					(click)="focusOnCancelButton()"
				>
					{{ 'SENTENCES.Close' | translate }}
					<img class="icon" src="assets/icons/x_blue.svg" />
				</button>
				<h1 class="title is-1">
					{{ 'popup.cancel.title' | translate }}
				</h1>
				<p class="description">
					{{ 'popup.cancel.main' | translate }}
				</p>
			</ng-template>
			<ng-template pTemplate="footer">
				<div class="">
					<div class="has-no-padding">
						<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
							{{ 'popup.cancel.reject' | translate }}
						</button>
						<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
							{{ 'popup.cancel.validate' | translate }}
						</button>
					</div>
				</div>
			</ng-template>
		</p-dialog>
	</dialog>
	<!--	menu mobile-->
	<div id="mobile_menu" *ngIf="display_mobile_menu">
		<div class="menu-content">
			<div class="padded">
				<button
					id="close_menu"
					class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
					(click)="display_mobile_menu = false"
				>
					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
				</button>

				<div class="mobile-menu-content min-height">
					<h2 class="title is-2 has-text-primary">
						{{ 'nav.menu' | translate }}
					</h2>
					<div class="marged-v">
						<div class="langs">
							<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>
						</div>
					</div>
				</div>
				<div class="actions">
					<button
						class="marged-v button is-fullwidth is-secondary"
						(click)="display_mobile_menu = false"
						id="display_cancel_popup_button_mobile"
						aria-haspopup="dialog"
					>
						{{ 'nav.leave' | translate }}
					</button>
				</div>
			</div>
		</div>
	</div>
</header>