displace buttons for nav and stepper

src/app/features/administration/nav-steps/nav-steps.component.html

@@ -1,30 +1,32 @@
 <div class="bottom-step-buttons">
-	<div class="columns">
-		<div class="column">
-			<button
-				*ngIf="display_previous_button"
-				class="button button-previous is-secondary is-fullwidth"
-				[routerLink]="['/administration/step/' + previous_step_number]"
-			>
-				Précédent
-			</button>
-		</div>
-		<div class="column">
-			<button
-				*ngIf="display_next_button"
-				class="button button-next is-fullwidth"
-				[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
-				[routerLink]="['/administration/step/' + next_step_number]"
-				(click)="runEndAction()"
-			>
-				<span *ngIf="is_finish_step">
-					<i class="fa fa-save"></i>
-					Enregistrer le sondage
-				</span>
-				<span *ngIf="!is_finish_step">
-					Suivant
-				</span>
-			</button>
+	<div class="container">
+		<div class="columns half-columns">
+			<div class="column is-narrow-mobile">
+				<button
+					*ngIf="display_previous_button"
+					class="button button-previous is-secondary is-fullwidth"
+					[routerLink]="['/administration/step/' + previous_step_number]"
+				>
+					Précédent
+				</button>
+			</div>
+			<div class="column is-narrow-mobile">
+				<button
+					*ngIf="display_next_button"
+					class="button button-next is-fullwidth"
+					[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
+					[routerLink]="['/administration/step/' + next_step_number]"
+					(click)="runEndAction()"
+				>
+					<span *ngIf="is_finish_step">
+						<i class="fa fa-save"></i>
+						Enregistrer le sondage
+					</span>
+					<span *ngIf="!is_finish_step">
+						Suivant
+					</span>
+				</button>
+			</div>
 		</div>
 	</div>
 </div>

src/app/features/administration/stepper/stepper.component.html

@@ -51,22 +51,29 @@
 		>
 	</div>
 	<div class="step-info">
-		<div class="columns">
-			<div class="column is-narrow is-hidden-mobile">
-				<a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
-					<img src="assets/img/icone_home.png" alt="logo framadate" />
-				</a>
-			</div>
+		<div class="columns half-columns">
 			<div class="column">
+				<a
+					class="navbar-item is-block pull-left is-hidden-mobile"
+					[routerLink]="['/']"
+					routerLinkActive="active"
+				>
+					<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
+				</a>
 				<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 }}
+					<span class="poll-title-filled" *ngIf="pollService.form.value.title.length">
+						{{ pollService.form.value.title }}
+					</span>
+					<span class="poll-title-empty" *ngIf="!pollService.form.value.title.length">
+						(Aucun titre)
+					</span>
 				</h2>
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
-			<div class="column has-text-right is-narrow">
+			<div class="column has-text-right">
 				<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
 			</div>
 		</div>

src/app/features/administration/stepper/stepper.component.scss

@@ -61,7 +61,7 @@
 	}
 
 	.step-info {
-		padding: 0.85rem 0.85rem 2rem;
+		padding: 9px 10px;
 		background: $white;
 
 		i {

src/styles/partials/_navigation.scss

@@ -108,6 +108,7 @@ a span.ui-steps-number {
 }
 
 .bottom-step-buttons {
+	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.05);
 	position: fixed;
 	bottom: 0;
 	left: 0;

src/styles/partials/global.scss

@@ -34,3 +34,15 @@ main {
 		}
 	}
 }
+
+.columns {
+	&.half-columns {
+		max-width: 900px;
+		margin: 0 auto;
+		.column {
+			padding: 0;
+			width: 50% !important;
+			float: left;
+		}
+	}
+}