funky-framadate-front/src/app/features/administration/stepper/stepper.component.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">
		<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>
		<div class="columns">
			<div class="column">
				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
			</div>
			<div class="column is-narrow 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>
</section>