From 8dadac73dd77f55c1e8cecd5e92416b70736bbab Mon Sep 17 00:00:00 2001
From: montylion <hey@montylion.dev>
Date: Mon, 23 Aug 2021 10:10:50 +0200
Subject: [PATCH] Add locale switcher on mobile

---
 public/assets/css/main.css       | 31 ++++++++++++++++++++++++++-----
 views/partials/header.handlebars | 10 +++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index a6b6917..783966f 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -541,11 +541,6 @@ footer {
 		display: none;
 	}
 
-	.locale-dropdown {
-		/* You don't really need this either on mobile IMHO */
-		display: none;
-	}
-
 	.hero-meta {
 		margin-top: 100px;
 	}
@@ -633,3 +628,29 @@ footer {
 	}
 
 }
+
+@media screen and (max-width: 500px) {
+	.selected-locale .locale-names {
+		display: none;
+	}
+
+	.selected-locale {
+		width: 80px;
+		margin-left: auto;
+		margin-right: 12px;
+	}
+
+}
+
+@media screen and (max-width: 400px) {
+	.select-box .options-container {
+	width: 125px;
+	right: 12px;
+	}
+}
+
+@media screen and (max-width: 330px) {
+	.locale-dropdown {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/views/partials/header.handlebars b/views/partials/header.handlebars
index de64dbf..4dad4a8 100644
--- a/views/partials/header.handlebars
+++ b/views/partials/header.handlebars
@@ -36,33 +36,33 @@
 			<div class="option">
 				<input type="radio" class="radio" id="en-US" name="category" />
 				<label for="en-US">
-					<div class="item"><span class="lang">🇺🇸</span>English</div>
+					<div class="item"><span class="lang">🇺🇸</span><span class="locale-names">English</span></div>
 				</label>
 			</div>
 
 			<div class="option">
 				<input type="radio" class="radio" id="es-ES" name="category" />
 				<label for="es-ES">
-					<div class="item"><span class="lang">🇪🇸</span>Español</div>
+					<div class="item"><span class="lang">🇪🇸</span><span class="locale-names">Español</span></div>
 				</label>
 			</div>
 
 			<div class="option">
 				<input type="radio" class="radio" id="it-IT" name="category" />
 				<label for="it-IT">
-					<div class="item"><span class="lang">🇮🇹</span>Italiano</div>
+					<div class="item"><span class="lang">🇮🇹</span><span class="locale-names">Italiano</span></div>
 				</label>
 			</div>
 			<div class="option">
 				<input type="radio" class="radio" id="ru-RU" name="category" />
 				<label for="ru-RU">
-					<div class="item"><span class="lang">🇷🇺</span>Pусский</div>
+					<div class="item"><span class="lang">🇷🇺</span><span class="locale-names">Pусский</span></div>
 				</label>
 			</div>
 			<div class="option">
 				<input type="radio" class="radio" id="tr-TR" name="category" />
 				<label for="tr-TR">
-					<div class="item"><span class="lang">🇹🇷</span>Türkçe</div>
+					<div class="item"><span class="lang">🇹🇷</span><span class="locale-names">Türkçe</span></div>
 				</label>
 			</div>
 		</div>