responsive home and stepper nav

src/app/core/components/header/header.component.html

@@ -1,28 +1,13 @@
 <header class="big-header">
 	<div class="contained-desktop">
 		<div class="container">
-			<div class="columns">
+			<a class="logo-home-link navbar-item pull-left" routerLink="/">
-				<div class="column">
+				<img class="header-app-logo app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
-					<nav class="navbar" role="navigation" aria-label="main navigation">
-						<div class="navbar-brand">
-							<a class="logo-home-link navbar-item" routerLink="/">
-								<img
-									class="header-app-logo app-logo logo"
-									*ngIf="appLogo"
-									src="{{ appLogo }}"
-									alt="{{ appTitle }}"
-								/>
 			</a>
-							<a class="logo-home-link navbar-item" routerLink="/">
+
-								<span class="app-title">
+			<div class="create-section" *ngIf="environment.display_header_create_button">
-									{{ appTitle }}
-								</span>
-							</a>
-						</div>
-						<div class="navbar-start">
 				<span class="navbar-item">
 					<a
-									*ngIf="environment.display_header_create_button"
 						class="button is-primary"
 						role="button"
 						routerLink="/administration"
@@ -35,21 +20,14 @@
 					</a>
 				</span>
 			</div>
-						<div class="navbar-end">
+			<div class="pull-right">
-							<!-- navbar items -->
-							<span class="navbar-item is-visible-desktop">
 				<app-language-selector></app-language-selector>
-							</span>
 			</div>
-						<!-- navbar items -->
+		</div>
 		<div class="mobile-menu" *ngIf="mobileMenuVisible">
 			<!--			menu mobile-->
 			<app-language-selector></app-language-selector>
 		</div>
-					</nav>
-				</div>
-			</div>
-		</div>
 		<div
 			*ngIf="environment.showDemoWarning"
 			class="demo demo-warning well debug has-text-white-bis has-background-warning-dark padded marged"

src/app/core/components/header/header.component.scss

@@ -1,5 +1,7 @@
 @import '../../../../styles/variables';
-
+.big-header {
+	height: $home-nav-height;
+}
 .app-title {
 	color: $white !important;
 	line-height: 4rem;

src/app/core/components/home/home.component.ts

@@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
 		this.titleService.setTitle(environment.appTitle + ' - Landing ');
 	}
 	ngOnInit() {
-		this.openModalFindPoll();
+		// this.openModalFindPoll();
 	}
 
 	searchMyPolls() {

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

@@ -73,17 +73,17 @@
 						</span>
 					</a>
 
-					<span *ngIf="pollService.step_current > 1">
+					<div *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>
+					</div>
-					<span class="step-counter-text"
+					<div class="step-counter-text">
-						>{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
+						{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
-					</span>
+					</div>
 				</h1>
 			</div>
 			<div class="column has-text-right is-narrow">

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

@@ -25,9 +25,6 @@
 		display: inline-block !important;
 		overflow: hidden;
 	}
-	.step-counter-text {
-		display: block;
-	}
 
 	.columns,
 	.column {
@@ -125,7 +122,7 @@
 		font-size: 0.85rem;
 		color: #767486;
 		margin-bottom: 0;
-		padding-top: 0.5rem;
+		padding-left: 0;
 		display: block;
 		font-weight: bold;
 	}
@@ -135,8 +132,13 @@
 	}
 
 	.step-counter-text {
+		color: $d-primary-intense;
+		font-size: 1rem;
+		line-height: 1.25rem;
 		font-weight: 600;
-		color: $d-blue-700;
+		display: block;
+		float: left;
+		width: 100%;
 	}
 
 	.top {

src/styles/partials/_forms.scss

@@ -295,12 +295,6 @@ mat-checkbox {
 		line-height: 32px;
 	}
 
-	.step-counter-text {
-		color: $d-primary-intense;
-		font-size: 1rem;
-		line-height: 1.25rem;
-	}
-
 	.columns {
 		margin-left: 0;
 		margin-right: 0;

src/styles/partials/_responsive.scss

@@ -1,7 +1,13 @@
+@import '../variables';
+
 // small screens
 @media (max-width: 487px) {
+	.big-header {
+		height: $home-nav-height-small;
+	}
+
 	.step {
-		padding: 0.25rem;
+		padding: $stepper-nav-height 0.25rem;
 	}
 	.bottom-step-buttons {
 		padding: 0;

src/styles/partials/global.scss

@@ -21,11 +21,10 @@ form {
 }
 
 main {
-	min-height: 90vh;
+	min-height: 60vh;
 }
 
 .min-height {
-	margin-top: 1em;
 	margin-bottom: 1em;
 	min-height: 50vh;
 }
@@ -57,9 +56,9 @@ main {
 		margin: 0 auto;
 		padding: 0;
 
-		//.column {
+		.column {
 			//	padding: 0;
-		//	width: 50% !important;
+			width: 50% !important;
 			//	float: left;
 			//
 			//	&:nth-of-type(1) {
@@ -89,7 +88,7 @@ main {
 			//	.is-half-offseted {
 			//		float: right;
 			//	}
-		//}
+		}
 	}
 }
 .top-padding-nav {

src/styles/variables.scss

@@ -80,6 +80,8 @@ $header-nav-height: 4.85rem;
 $header-nav-inner-height: 4.5rem;
 $widescreen-width-main-column: 75rem;
 $stepper-nav-height: 4.5rem;
+$home-nav-height: 4.5rem;
+$home-nav-height-small: 3.5rem;
 // datepicker
 $cell-size: 30px;
 $cell-size-desktop: 40px;