From 9cbca21aeba3baa64a3053bac5d4b03303e855e9 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 14 Feb 2022 11:36:41 +0100
Subject: [PATCH] fix position bottom buttons on mobile, add long lang in
 bigger screen for selector

---
 .../language-selector.component.html              | 10 ++++++++--
 .../language-selector.component.scss              | 15 ++++++++++-----
 src/styles/partials/_navigation.scss              |  1 +
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html
index bb88eac0..7d238486 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.html
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html
@@ -3,10 +3,16 @@
 		id="lang_button_popup{{ idSuffix }}"
 		class="lang-button"
 		(click)="openDialogLang()"
-		[attr.aria-label]="'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate"
+		[attr.aria-label]="'LANGUAGES.' + currentLang.toUpperCase() | translate"
 	>
 		<i class="fa fa-language"></i>
-		{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
+
+		<span class="short-lang is-hidden-tablet">
+			{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
+		</span>
+		<span class="long-lang is-hidden-mobile">
+			{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
+		</span>
 	</button>
 	<p-dialog
 		[modal]="true"
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 fe81d319..77c657ca 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
@@ -11,17 +11,22 @@
 }
 
 #lang_button_popup {
-	background: transparent !important;
+	background: transparent;
+	margin-right: 0.5rem;
+	&:hover {
+		background: $secondary_color;
+		color: $white;
+
+		.fa {
+			color: $white;
+		}
+	}
 }
 
 .language-selector-container {
 	cursor: pointer;
 	color: $primary-color;
 
-	&:hover {
-		color: $secondary_color;
-	}
-
 	i {
 		color: $primary-color;
 	}
diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss
index e80e313a..15eb3223 100644
--- a/src/styles/partials/_navigation.scss
+++ b/src/styles/partials/_navigation.scss
@@ -71,6 +71,7 @@ a span.ui-steps-number {
 	width: 100%;
 	position: fixed;
 	right: 0;
+	left: 0;
 	padding: 1rem 0.5rem;
 
 	.button {