From f635400d94e04fac2e5cad5755b552ad0cf0e375 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 9 Feb 2022 14:27:22 +0100
Subject: [PATCH] better responsive stepper bar

---
 .../components/header/header.component.scss   |  5 +-
 .../stepper/stepper.component.html            | 18 ++---
 .../stepper/stepper.component.scss            | 39 ++++++++++-
 .../language-selector.component.scss          |  4 +-
 src/styles/partials/_responsive.scss          | 24 +++++++
 src/styles/partials/global.scss               | 66 +++++++++----------
 src/styles/variables.scss                     |  5 +-
 7 files changed, 112 insertions(+), 49 deletions(-)

diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index 0fa533b1..356c1cce 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/src/app/core/components/header/header.component.scss
@@ -5,8 +5,9 @@
 	line-height: 4rem;
 	display: inline-block;
 }
-.navbar {
-	background: white;
+.header-app-logo {
+	width: $logo-side;
+	height: $logo-side;
 }
 .navbar-item {
 	a {
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index ad156dfb..0a5f5a77 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -52,24 +52,26 @@
 	</div>
 
 	<div class="step-info">
-		<div class="columns half-columns">
+		<div class="columns">
 			<div class="column">
 				<a
 					class="logo-home-link navbar-item pull-left is-hidden-mobile"
-					[routerLink]="['/']"
+					routerLink="/"
 					routerLinkActive="active"
 				>
 					<img
-						class="stepper-app-logo logo"
+						class="stepper-app-logo"
 						*ngIf="environment.appLogo"
 						src="{{ environment.appLogo }}"
 						alt="accueil {{ environment.appTitle }}"
 					/>
 				</a>
-				<h1>
-					<span class="step-title-poll" *ngIf="pollService.step_current == 1">
-						{{ 'creation.title' | translate }}
-					</span>
+				<h1 class="title-section">
+					<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
+						<span class="step-title-poll" *ngIf="pollService.step_current == 1">
+							{{ 'creation.title' | translate }}
+						</span>
+					</a>
 
 					<span *ngIf="pollService.step_current > 1">
 						<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
@@ -84,7 +86,7 @@
 					</span>
 				</h1>
 			</div>
-			<div class="column has-text-right">
+			<div class="column has-text-right is-narrow">
 				<app-language-selector class="nav-button"></app-language-selector>
 				<button
 					class="nav-button cancel-button"
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 6a2917a4..e5f8d2b2 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -14,11 +14,31 @@
 		}
 	}
 
+	.title-section {
+		display: inline-block;
+		width: 40%;
+		float: left;
+	}
+	.step-title-poll {
+		max-width: 18ch;
+		text-overflow: ellipsis;
+		display: inline-block !important;
+		overflow: hidden;
+	}
+	.step-counter-text {
+		display: block;
+	}
+
 	.columns,
 	.column {
+		padding-top: 0;
 		padding-bottom: 0;
 	}
 
+	.columns {
+		padding-top: 1rem;
+	}
+
 	.step-bar-container {
 		margin: 0;
 		width: 100%;
@@ -59,13 +79,16 @@
 		height: $stepper-nav-height / 2;
 		display: inline-block;
 		padding-left: 1em;
+
 		&:nth-last-of-type(1) {
 			margin-right: 0;
 		}
+
 		&app-language-selector {
 			padding-top: 1rem;
 		}
 	}
+
 	.cancel-button {
 		line-height: $stepper-nav-height / 2;
 		height: $stepper-nav-height / 2;
@@ -79,6 +102,7 @@
 			background: $primary_color;
 		}
 	}
+
 	.cancel-button-reject-bottom {
 		background: $secondary_color;
 		color: $white;
@@ -91,6 +115,7 @@
 		display: block;
 		background: $white;
 		height: $header-nav-inner-height;
+
 		i {
 			margin-left: 1ch;
 		}
@@ -117,15 +142,18 @@
 	.top {
 		height: 2rem;
 	}
+
 	.cancel-button-reject {
 		background: none;
 		color: $primary_color;
 		margin-right: -1rem;
+
 		i {
 			color: $primary_color;
 			margin-left: 1ch;
 		}
 	}
+
 	.cancel-button-confirm {
 		color: $secondary_color;
 		margin-right: 0;
@@ -137,13 +165,20 @@
 	display: inline-block;
 }
 
+.logo-home-link {
+	padding: 0;
+}
+
 .stepper-app-logo {
 	max-width: $main-column-width-inner;
 	max-height: $main-column-width-inner;
-	height: 3rem;
-	width: 3rem;
+	margin: 10px 16px;
+	height: $logo-side;
+	width: $logo-side;
 	display: inline-block;
 }
+
 #display_cancel_popup_button {
 	min-width: 7em; // to adapt other lang without making the nav move
+	z-index: 10;
 }
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
index 57f46584..3d68d9c8 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
@@ -33,6 +33,6 @@
 	border: none;
 	padding: 0 1rem;
 	display: block;
-	line-height: $header-nav-height;
-	height: $header-nav-height;
+	line-height: 2rem;
+	height: 4rem;
 }
diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss
index 9dc2e8bf..3e16b294 100644
--- a/src/styles/partials/_responsive.scss
+++ b/src/styles/partials/_responsive.scss
@@ -1,4 +1,26 @@
 // small screens
+@media (max-width: 487px) {
+	.step {
+		padding: 0.25rem;
+	}
+	.bottom-step-buttons {
+		padding: 0;
+		.contained-in-main-column {
+			padding: 0.5rem;
+		}
+	}
+	#creation_stepper {
+		.step-info {
+			height: 4.5rem;
+		}
+		.cancel-button {
+			padding: 0.5rem 0.75rem;
+			min-width: 1em;
+			line-height: 1.5rem;
+			margin-top: 0;
+		}
+	}
+}
 @media (min-width: 380px) {
 	.feedback-container {
 		//position: fixed;
@@ -9,6 +31,7 @@
 			td {
 				width: $cell-size-desktop;
 			}
+
 			td span,
 			.p-ripple {
 				width: $cell-size-desktop;
@@ -17,6 +40,7 @@
 		}
 	}
 }
+
 // wide screen like desktop
 @media (min-width: $widescreen) {
 	.step {
diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss
index 852f9e8d..8ab8000d 100644
--- a/src/styles/partials/global.scss
+++ b/src/styles/partials/global.scss
@@ -57,39 +57,39 @@ main {
 		margin: 0 auto;
 		padding: 0;
 
-		.column {
-			padding: 0;
-			width: 50% !important;
-			float: left;
-
-			&:nth-of-type(1) {
-				padding-right: 1.5rem;
-
-				.step-info & {
-					padding: 0;
-				}
-			}
-
-			&:nth-of-type(2) {
-				padding-left: 1.5rem;
-			}
-
-			&.is-fullwidth {
-				width: 100% !important;
-				padding-right: 0 !important;
-
-				.button:nth-of-type(1) {
-					width: 50%;
-					float: right;
-				}
-			}
-		}
-
-		.button {
-			.is-half-offseted {
-				float: right;
-			}
-		}
+		//.column {
+		//	padding: 0;
+		//	width: 50% !important;
+		//	float: left;
+		//
+		//	&:nth-of-type(1) {
+		//		padding-right: 1.5rem;
+		//
+		//		.step-info & {
+		//			padding: 0;
+		//		}
+		//	}
+		//
+		//	&:nth-of-type(2) {
+		//		padding-left: 1.5rem;
+		//	}
+		//
+		//	&.is-fullwidth {
+		//		width: 100% !important;
+		//		padding-right: 0 !important;
+		//
+		//		.button:nth-of-type(1) {
+		//			width: 50%;
+		//			float: right;
+		//		}
+		//	}
+		//}
+		//
+		//.button {
+		//	.is-half-offseted {
+		//		float: right;
+		//	}
+		//}
 	}
 }
 .top-padding-nav {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 8fc32894..eeee4a52 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -74,9 +74,10 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 $large-column-width: 588px;
 $main-column-width: 25rem;
 $main-column-width-inner: 23.75rem;
+$logo-side: 31px;
 $mobile-size: 25rem;
-$header-nav-height: 3.85rem;
-$header-nav-inner-height: 3.5rem;
+$header-nav-height: 4.85rem;
+$header-nav-inner-height: 4.5rem;
 $widescreen-width-main-column: 75rem;
 $stepper-nav-height: 4.5rem;
 // datepicker