Move language selection into the mobile menu (fixes #489)

_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>

_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;
 	}

_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,

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);
 }