style to fix button nav

src/app/app.component.ts

@@ -72,9 +72,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 
 			this.onHomePage = evt.url === '/';
 
-			let mainelem = this.document.querySelector('#big_container');
+			window.scrollTo(0, 0);
-			console.log('mainelem', mainelem);
-			window.scrollTo(0, mainelem.offsetTop);
 		});
 
 		if (!environment.production) {

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -21,7 +21,8 @@
 				<div class="columns">
 					<div class="column">
 						<label class="pull-left" for="dateChoices_{{ id }}">
-							Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
+							Date {{ id + 1 }}
+							<!--							- {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
 						</label>
 						<span class="format-helper pull-right">JJ/MM/AAAA</span>
 					</div>

src/app/features/administration/form/date/list/day/day-list.component.scss

@@ -1,5 +1,7 @@
 @import '../../../../../../../styles/variables';
-
+.day-list-container {
+	padding-bottom: 2rem;
+}
 .day-weekend {
 	background: #dccfed;
 }

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -80,11 +80,11 @@
 					</div>
 				</div>
 			</div>
-			<app-nav-steps
-				[next_step_number]="pollService.step_current + 1"
-				[previous_step_number]="pollService.step_current - 1"
-				[is_finish_step]="true"
-			></app-nav-steps>
 		</div>
 	</div>
+	<app-nav-steps
+		[next_step_number]="pollService.step_current + 1"
+		[previous_step_number]="pollService.step_current - 1"
+		[is_finish_step]="true"
+	></app-nav-steps>
 </div>

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -41,10 +41,9 @@
 				</div>
 			</div>
 		</div>
-		<app-nav-steps
-			class="is-fixed-top"
-			[next_step_number]="pollService.step_current + 1"
-			[previous_step_number]="pollService.step_current - 1"
-		></app-nav-steps>
 	</form>
+	<app-nav-steps
+		[next_step_number]="pollService.step_current + 1"
+		[previous_step_number]="pollService.step_current - 1"
+	></app-nav-steps>
 </div>

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

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

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

@@ -1,10 +1 @@
 @import '../../../../styles/variables';
-.bottom-step-buttons {
-	padding: 8px 16px;
-}
-.button {
-	&.is-secondary {
-		color: $secondary_color !important;
-		border-color: $secondary_color !important;
-	}
-}

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

@@ -53,11 +53,7 @@
 	<div class="step-info">
 		<div class="columns half-columns">
 			<div class="column">
-				<a
+				<a class="navbar-item pull-left is-hidden-mobile" [routerLink]="['/']" routerLinkActive="active">
-					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">

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

@@ -4,7 +4,7 @@
 #creation_stepper {
 	@extend .fixed-box;
 	background: $white;
-	height: 56px;
+	height: 64px;
 
 	a {
 		@extend .clickable;

src/styles.scss

@@ -44,26 +44,26 @@
 @import './styles/themes/all';
 // most general dom elements
 @import './styles/partials/global';
-@import './styles/partials/logo';
-@import './styles/partials/navigation';
 
 // main content elements
 @import './styles/partials/main';
 @import './styles/partials/tables';
 @import './styles/partials/buttons';
-// @import './styles/partials/links';
+@import './styles/partials/logo';
+@import './styles/partials/navigation';
+@import './styles/partials/links';
 @import './styles/partials/forms';
 @import './styles/partials/form-controls';
 @import './styles/partials/images';
-// responsive, mobile first goal
+// responsive, mobile first
 @import './styles/partials/responsive';
 
 // reset suggested by material-angular
-html,
+//html,
-body {
+//body {
-	height: 100%;
+//	height: 100%;
-}
+//}
 body {
 	margin: 0;
-	font-family: Roboto, 'Helvetica Neue', sans-serif;
+	font-family: $default_font;
 }

src/styles/partials/_forms.scss

@@ -201,11 +201,9 @@ mat-checkbox {
 	}
 }
 
-.admin-form {
+.step {
-	.step {
+	max-width: $main-column-width;
-		max-width: $main-column-width;
+	margin: 0 auto;
-		margin: 0 auto;
-	}
 }
 
 .fa {

src/styles/partials/_links.scss

@@ -1,50 +1 @@
 @charset "UTF-8";
-a {
-	color: $primary !important;
-	@extend .button, .is-hoverable;
-
-	&:hover,
-	&:focus {
-		color: $dark !important;
-		background: $pale-purple;
-	}
-
-	&.active {
-		color: $dark !important;
-
-		&:hover,
-		&:focus {
-			color: $white !important;
-			background: $pale-purple;
-		}
-	}
-	.fa {
-		margin-right: 1ch;
-	}
-}
-.button,
-.btn {
-	.fa {
-		margin-right: 1ch;
-	}
-}
-.list-my-polls {
-	a {
-		@extend .is-block;
-	}
-
-	sub {
-		margin-left: 2em;
-	}
-}
-
-.preview-url {
-	a {
-		overflow: hidden;
-		@extend .text-ellipsis;
-	}
-
-	framadate-copy-text {
-		float: right;
-	}
-}

src/styles/partials/_navigation.scss

@@ -109,16 +109,25 @@ 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;
-	width: 100%;
 	z-index: 10;
 	height: auto;
 	background: $white;
-	padding: 0.85rem;
+
+	padding: 8px 16px;
+	position: fixed !important;
+	width: 100vw;
+	position: fixed;
+	right: 0;
+
 	.button {
-		width: 100%;
+		display: inline-block;
-		display: block;
+	}
+	.button {
+		&.is-secondary {
+			color: $secondary_color !important;
+			border-color: $secondary_color !important;
+		}
 	}
 }

src/styles/partials/global.scss

@@ -41,7 +41,7 @@ main {
 
 .columns {
 	&.half-columns {
-		max-width: $main-column-width;
+		max-width: 100%;
 		margin: 0 auto;
 		padding: 0;
 
@@ -73,8 +73,6 @@ main {
 		}
 
 		.button {
-			width: 100%;
-
 			.is-half-offseted {
 				float: right;
 			}

src/styles/variables.scss

@@ -68,5 +68,5 @@ $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 
 // sizes and breakpoints
-$main-column-width: 900px;
+$main-column-width: 400px;
-$mobile-size: 380px;
+$mobile-size: 400px;