fix responsive design language bar

2 files changed, 34 insertions, 1 deletions

diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index a1bda4bf..336936f3 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -1,5 +1,26 @@
       <div class="navbar navbar-fixed-top navbar-taler" role="navigation">
         <div class="navbar-header">
+                <button class="btn btn-default dropdown-toggle mobile-lang" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                  <img src="{{ url('images/'+lang+'.png') }}"/></img>
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                  <li>
+                   <a href="{{ self_localized('en') }}"><img src="{{ url('images/gb.png') }}" height="15" width="23" alt="English">English</a>
+                  </li>
+                  <li>
+                   <a href="{{ self_localized('de') }}"><img src="{{ url('images/de.png') }}" height="15" width="25" alt="Deutsch">Deutsch</a>
+                  </li>
+                  <li>
+                   <a href="{{ self_localized('fr') }}"><img src="{{ url('images/fr.png') }}" height="15" width="22" alt="Français">Français</a>
+                  </li>
+                  <li>
+                   <a href="{{ self_localized('it') }}"><img src="{{ url('images/it.png') }}" height="15" width="22" alt="Italiano">Italiano</a>
+                  </li>
+                  <li>
+                   <a href="{{ self_localized('es') }}"><img src="{{ url('images/es.png') }}" height="15" width="23" alt="Español">Español</a>
+                  </li>
+                </ul>
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
@@ -18,7 +39,7 @@
             <li class="m_developers"><a href="{{ url_localized('developers.html') }}">{{ _("Developers") }}</a></li>
             <li class="m_about"><a href="{{ url_localized('about.html') }}">{{ _("About&nbsp;us") }}</a></li>
             <li>
-              <div class="dropdown">
+              <div class="dropdown nav-lang">
                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   <img src="{{ url('images/'+lang+'.png') }}"/></img>
                   <span class="caret"></span>
diff --git a/styles.css b/styles.css
index 6b6d3c29..833df030 100644
--- a/styles.css
+++ b/styles.css
@@ -16,3 +16,15 @@ html {
 .c_intro {
   height: 100vh;
 }
+
+/* don't show the language selector in the dropdown on mobile devices,
+ * since it's in the top bar already.
+ */
+.in .nav-lang {
+  display: none;
+}
+
+.mobile-lang {
+  margin-left:5px;
+  margin-top: 8px;
+}