From eaf0b2262f365e514b41aa2548c8a5c04868c44c Mon Sep 17 00:00:00 2001
From: Saivann <saivann@gmail.com>
Date: Tue, 5 Aug 2014 20:23:47 -0400
Subject: [PATCH] Move language selection into the mobile menu (fixes #489)

---
 _layouts/base.html | 10 +++++-----
 _less/rtl.less     |  8 ++++++++
 _less/screen.less  | 23 +++++++++++++++--------
 js/main.js         |  2 +-
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index fc03dd0e..1036ba42 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -27,11 +27,6 @@
   </div>
 {% endcase %}
   <div class="head"><div>
-    <select id="langselect" class="langselect" onchange="window.location=this.value;">
-    {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
-          <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
-    {% endfor %}
-    </select>
     <ul class="lang">
       <li><a href="#" onclick="return false;">{{ site.langs[page.lang] }}</a>
       <ul>
@@ -47,6 +42,11 @@
     </ul>
     <a class="logo" href="/{{ page.lang }}/"><img src="/img/logotop.svg" alt="Bitcoin"></a>
     <a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" href="#"></a>
+    <div id="langselect" class="langselect"><select onchange="window.location=this.value;">
+    {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
+          <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
+    {% endfor %}
+    </select></div>
     <ul id="menusimple" class="menusimple" onclick="mobileMenuHover(event);">
       <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
         <ul>
diff --git a/_less/rtl.less b/_less/rtl.less
index 92610be7..cfe4170c 100644
--- a/_less/rtl.less
+++ b/_less/rtl.less
@@ -289,6 +289,14 @@ h2 .rssicon{
 	h1{
 		text-align:right;
 	}
+	.langselect{
+		text-align:right;
+	}
+	.langselect select{
+		text-align:right;
+		margin-left:0;
+		margin-right:10px;
+	}
 	.summary{
 		text-align:right;
 	}
diff --git a/_less/screen.less b/_less/screen.less
index 9c20ab67..2fb2f4dd 100644
--- a/_less/screen.less
+++ b/_less/screen.less
@@ -2031,14 +2031,21 @@ h2 .rssicon{
 		width:auto;
 	}
 	.langselect{
+		text-align:left;
+		background-color:#fff;
+		border-top:2px solid #ebebeb;
+	}
+	.langselect select{
+		text-align:left;
 		background-color:transparent;
 		border:0;
 		font-size:115%;
-		position:absolute;
-		right:-20px;
-		top:18px;
-		width:120px;
-		text-indent:20px;
+		padding:8px 0;
+		margin-top:12px;
+		margin-left:10px;
+		width:95%;
+		-webkit-appearance:none;
+		-moz-appearance:none;
 	}
 	.menumobile{
 		display:inline-block;
@@ -2053,12 +2060,12 @@ h2 .rssicon{
 	.lang,
 	.menusimple{
 		display:none;
-	}
-	.menusimple{
+		background-color:#fff;
 		position:static;
 		bottom:0;
-		margin:0 0 10px 0;
+		margin:0;
 		height:auto;
+		overflow:auto;
 	}
 	.menusimple li a,
 	.menusimple li ul li a,
diff --git a/js/main.js b/js/main.js
index cdee1ffb..d7590a3e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -168,7 +168,7 @@ var mm=document.getElementById('menusimple');
 var ml=document.getElementById('langselect');
 var t=document.getElementById('menumobile');
 if(mm.style.display=='block'){mm.style.display='';ml.style.display='';}
-else{mm.style.display='block';ml.style.display='inline-block';}
+else{mm.style.display='block';ml.style.display='block';}
 t.parentNode.removeChild(t);
 cancelEvent(e);
 }