From bbee27caa91c8296417ea1b8e4df64a58b379a96 Mon Sep 17 00:00:00 2001
From: Pierre Rudloff <contact@rudloff.pro>
Date: Thu, 1 Jun 2017 01:04:39 +0200
Subject: [PATCH] Language switcher CSS

---
 css/style.css            | 44 ++++++++++++++++++++++++++++++++++++++++
 templates/inc/header.tpl |  9 ++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 42b1bc9..6a1f06e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -598,6 +598,50 @@ h1 {
 .locales {
     float: left;
     text-align: left;
+    padding-left: 1em;
+    padding-top: 1em;
+    font-size: 12px;
+}
+
+.locales a,
+.locales a:visited {
+    text-decoration: none;
+    color: #737881;
+}
+
+.supportedLocales {
+    display: none;
+    list-style-type: none;
+    padding-left: 0;
+    background-color: #f5f5f6;
+    margin: 0;
+}
+
+.supportedLocales li {
+    border-bottom: thin solid #ebebeb;
+}
+
+.supportedLocales li a {
+    padding: 1em;
+    padding-right: 2em;
+    display: block;
+}
+
+.supportedLocales li:hover {
+    background-color: #ECECEC;
+}
+
+.localesBtn {
+    padding: 1em;
+    display: inline-block;
+}
+
+.localesBtn:focus {
+    background-color: rgb(245, 245, 246);
+}
+
+.localesBtn:focus + .supportedLocales {
+    display: block;
 }
 
 @media (max-width: 640px) {
diff --git a/templates/inc/header.tpl b/templates/inc/header.tpl
index cf36d8b..4792f8a 100644
--- a/templates/inc/header.tpl
+++ b/templates/inc/header.tpl
@@ -5,11 +5,16 @@
         <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" target="_blank">{t}Share on Facebook{/t}<div class="facebookmask"></div></a>
     </div>
     {if isset($supportedLocales)}
-        <ul class="locales">
+    <div class="locales">
+        <a href="#" class="localesBtn">{$locale->getCountry()->getEmoji()}</a>
+        <ul class="supportedLocales">
             {foreach $supportedLocales as $supportedLocale}
-                <li><a hreflang="{$supportedLocale->getBcp47()}" lang="{$supportedLocale->getBcp47()}" href="{path_for name='locale' data=['locale'=>$supportedLocale->getIso15897()]}">{$supportedLocale->getCountry()->getEmoji()} {$supportedLocale->getFullName()}</a></li>
+                {if $supportedLocale != $locale}
+                    <li><a hreflang="{$supportedLocale->getBcp47()}" lang="{$supportedLocale->getBcp47()}" href="{path_for name='locale' data=['locale'=>$supportedLocale->getIso15897()]}">{$supportedLocale->getCountry()->getEmoji()} {$supportedLocale->getFullName()}</a></li>
+                {/if}
             {/foreach}
         </ul>
     {/if}
+</div>
 </header>
 <div class="wrapper">