From 5ef591369c599e8052eec87233f8378c92b22bcb Mon Sep 17 00:00:00 2001
From: Saivann <saivann@gmail.com>
Date: Mon, 8 Jul 2013 15:24:58 -0400
Subject: [PATCH] Improve menu design for mobiles

---
 _layouts/base.html |  4 ++--
 _less/screen.less  | 25 ++++++++++++++++---------
 js/main.js         | 16 ++++++++++++++++
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index 5f61df9a..27960bcf 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -66,7 +66,7 @@ menu:
     </ul>
     {% else %}
     <ul id="menusimple">
-      <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
+      <li><a href="#" onclick="mobilehover(event);">{% translate menu-intro layout %}</a>
         <ul>
           <li{% if page.id == 'bitcoin-for-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>
           <li{% if page.id == 'bitcoin-for-businesses' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}">{% translate menu-bitcoin-for-businesses layout %}</a></li>
@@ -74,7 +74,7 @@ menu:
           <li{% if page.id == 'how-it-works' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate how-it-works url %}">{% translate menu-how-it-works layout %}</a></li>
         </ul>
       </li>
-      <li><a href="#" onclick="return false;">{% translate menu-resources layout %}</a>
+      <li><a href="#" onclick="mobilehover(event);">{% translate menu-resources layout %}</a>
         <ul>
           <li{% if page.id == 'vocabulary' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate vocabulary url %}">{% translate menu-vocabulary layout %}</a></li>
           <li{% if page.id == 'resources' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate resources url %}">{% translate menu-resources layout %}</a></li>
diff --git a/_less/screen.less b/_less/screen.less
index 0d2ccaaa..6d091d15 100644
--- a/_less/screen.less
+++ b/_less/screen.less
@@ -267,7 +267,7 @@ li p{
 	font-size:110%;
 	display:block;
 	text-decoration:none;
-	padding:6px 10px 3px 10px;
+	padding:6px 10px 4px 10px;
 	color:#2c6fad;
 	white-space:nowrap;
 }
@@ -287,10 +287,6 @@ li p{
 	min-width:120%;
 	padding:5px 0px;
 	margin:0px;
-	border-radius:5px;
-	-webkit-border-radius:5px;
-	border-top-left-radius:0px;
-	-webkit-border-top-left-radius:0px;
 }
 #menusimple li:hover ul{
 	display:block;
@@ -311,6 +307,7 @@ li p{
 	color:#2c6fad;
 	font-size:100%;
 	width:100%;
+	margin:1px 0px;
 	padding:6px 10px 3px 10px;
 }
 #menusimple li ul li:hover a,
@@ -971,15 +968,25 @@ h2 .rssicon{
 		margin:0px 0px 10px 0px;
 		height:auto;
 	}
-	#menusimple li a{
-		padding:6px 6px 3px 6px;
+	#menusimple li a,
+	#menusimple li ul li a,
+	#menusimple li ul li a:active,
+	#menusimple li ul li a:visited,
+	#menusimple li ul li a:link{
+		padding:10px 6px 8px 6px;
+		display:block;
 	}
 	#menusimple li{
-		margin:6px;
+		display:block;
+		margin:4px;
 		position:static;
 	}
 	#menusimple li ul{
-		min-width:140px;
+		min-width:0;
+		position:relative;
+	}
+	#menusimple ul.hover{
+		display:block;
 	}
 	#menufor{
 		position:static;
diff --git a/js/main.js b/js/main.js
index 85097541..e37f67f5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -105,6 +105,22 @@ cancelEvent(e);
 }
 
 
+function mobilehover(e){
+//Add a delay before hidding menu for mobiles to prevent accidental clicks
+var t=getEventTarget(e);
+while(t.nodeName!='LI'||!t.parentNode.id)t=t.parentNode;
+var p=t.getElementsByTagName('UL')[0];
+p.className='hover';
+setTimeout(function(){
+for(var i=0,nd=t.parentNode.getElementsByTagName('UL'),n=nd.length;i<n;i++){
+	if(nd[i]==p)continue;
+	nd[i].className='';
+}
+},1);
+cancelEvent(e);
+}
+
+
 function boxshow(e){
 var p=t=getEventTarget(e);
 while(p.nodeName!='DIV')p=p.parentNode;