From df552d5478801da60953ad54e7b2aa9f8ab41b5d Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 29 Apr 2020 11:39:02 +0200
Subject: [PATCH] working on mobile lang selector

---
 Makefile                   |  2 +-
 kit/css/header.css         | 57 ++++++++++++++++++++++++++++++++------
 kit/functions.php          |  4 +++
 kit/header.php             | 11 +++++++-
 kit/img/ios-arrow-down.svg |  1 +
 kit/img/ios-arrow-up.svg   |  1 +
 6 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 kit/img/ios-arrow-down.svg
 create mode 100644 kit/img/ios-arrow-up.svg

diff --git a/Makefile b/Makefile
index 329f946..81e5462 100644
--- a/Makefile
+++ b/Makefile
@@ -31,4 +31,4 @@ docker_up:
 
 generate_pot:
 	wp i18n make-pot kit kit/languages/kit.pot
-	# msgfmt -o generatedFile.mo yourFile.po
+	msgfmt -o kit/languages/de_DE.mo kit/languages/de_DE.po
diff --git a/kit/css/header.css b/kit/css/header.css
index 756b39d..81de2ba 100644
--- a/kit/css/header.css
+++ b/kit/css/header.css
@@ -44,6 +44,7 @@ header .header-logo-container {
   color: #333333;
   line-height: 1;
   flex-grow: 0;
+  order: 1;
 }
 
 header .header-logo-container::after {
@@ -51,11 +52,13 @@ header .header-logo-container::after {
 }
 
 header .header-button-container {
+  order: 4;
   margin-left: 3.33333rem;
 }
 
 header nav {
   flex-grow: 1;
+  order: 3;
 }
 
 header:not(.sticky-header) nav {
@@ -137,6 +140,33 @@ header:not(.sticky-header) .header-button-container {
   z-index: 1;
 }
 
+.header-lang-small {
+  display: flex;
+  flex-direction: row;
+  order: 2;
+  margin-left: 2rem;
+  display: none;
+}
+
+.header-lang-small span:hover {
+  color: red;
+}
+
+.header-lang-small li:not(.active) {
+  display: none;
+}
+
+.header-lang-small li.active {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: hidden;
+  max-width: 2.1ch;
+  font-weight: 500;
+  color: #333333;
+  margin-right: 5px;
+  text-transform: uppercase;
+}
+
 .header-lang {
   position: absolute;
   top: 5px;
@@ -150,7 +180,7 @@ header:not(.sticky-header) .header-button-container {
   border-left: 1px solid #333333;
   line-height: 1;
   display: inline;
-  padding: 0 8px;
+  padding: 0 5px 0 8px;
 }
 
 .header-lang li:first-child {
@@ -158,7 +188,6 @@ header:not(.sticky-header) .header-button-container {
 }
 
 .header-lang li span {
-
   line-height: 1rem;
   transition: color .3s;
 }
@@ -229,17 +258,27 @@ header:not(.sticky-header) .header-button-container {
     display: block;
     margin-top: 4.44444rem;
   }
+
+  header .header-logo-container {
+    flex-grow: 1;
+  }
+
+  .header-lang-small {
+    display: flex;
+    order: 3;
+  }
+
   .header-lang {
-    position: static;
-    padding: 0.72222rem 0;
-    margin-right: 10px;
-    font-size: 18px;
-  }
-  .header-lang li {
-    line-height: initial;
+    display: none;
   }
+
   .header-search {
     display: block;
+    order: 2;
+  }
+
+  .header-button-container {
+    order: 4;
   }
 }
 
diff --git a/kit/functions.php b/kit/functions.php
index 9c367c8..baefab0 100644
--- a/kit/functions.php
+++ b/kit/functions.php
@@ -157,6 +157,10 @@ function kit_customize_css()
                color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
+             .header-lang-small:hover{
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
              nav > ul > li:hover > a::after,
              nav > ul > li:active > a::after {
                border-bottom: 4px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>;
diff --git a/kit/header.php b/kit/header.php
index 7d9272c..2f15a81 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -99,7 +99,16 @@
            wpm_language_switcher ('list','name');
          };
         ?>
-    </div>
+      </div>
+
+      <div class="header-lang-small">
+        <?php
+         if ( function_exists ( 'wpm_language_switcher' ) ) {
+           wpm_language_switcher ('list','name');
+         };
+        ?>
+        <img src="<?php bloginfo('stylesheet_directory');?>/img/ios-arrow-down.svg" width=20px height=20px></img>
+      </div>
 
       <h1 class="header-logo-container">
         <a href="<?php echo home_url(); ?>">
diff --git a/kit/img/ios-arrow-down.svg b/kit/img/ios-arrow-down.svg
new file mode 100644
index 0000000..61576d7
--- /dev/null
+++ b/kit/img/ios-arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>
\ No newline at end of file
diff --git a/kit/img/ios-arrow-up.svg b/kit/img/ios-arrow-up.svg
new file mode 100644
index 0000000..08641ae
--- /dev/null
+++ b/kit/img/ios-arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"/></svg>
\ No newline at end of file