UI updates. Menu fixes

css/jquery-ui.css

@@ -559,11 +559,16 @@ button.ui-button::-moz-focus-inner {
 	font-weight: normal;
 }
 .ui-menu .ui-menu-item a.ui-state-focus,
-.ui-menu .ui-menu-item a.ui-state-active {
+ .ui-menu .ui-menu-item a.ui-state-active{
 	font-weight: normal;
-	margin: -1px;
+	background-image: url(../img/headers/ui/organic/negative.png);
+}
+.ui-menu .ui-menu-item a.ui-state-active,
+ .ui-menu .ui-menu-item a.ui-state-hover:active,
+ .ui-menu .ui-menu-item a.ui-state-focus:active{
+	background: #008aaa !important;
+	color: #333;
 }
-
 .ui-menu .ui-state-disabled {
 	font-weight: normal;
 	margin: .4em 0 .2em;

css/style.css

@@ -47,6 +47,7 @@ div#topbar{
   	background-size: auto 100%;
 	color: black;
 	overflow: hidden;
+	min-height: 50px;
 	box-shadow: 0 1px 3px 1px rgba(0,0,0,0.3);
 }
 div.topbar-left{
@@ -60,22 +61,22 @@ div#topbar .menuitem{
 	vertical-align: middle;
 	margin-left: -1px;
 	float: left;
-	font-size: 20px;
-	line-height: 35px;
+	font-size: 25px;
+	line-height: 50px;
 	overflow: hidden;
 	cursor: pointer;
 	min-width: 35px;
-	height: 35px;
+	height: 50px;
 }
 div#topbar .menuitem:not(.topbar-home):not(.topbar-back){
 	background: url(../img/headers/ui/separator.png) no-repeat scroll left center transparent;
 }
-div#topbar .menuitem:hover{
+div#topbar .menuitem:hover,div#topbar .menuitem:not(.topbar-home):not(.topbar-back):hover{
 	background-image: url(../img/headers/ui/negative.png);
+	background-repeat: repeat-x;
 }
 div#topbar .menuitem:active{
-	border-color: #008aaa;
-	background: #008aaa;
+	background: #008aaa !important;
 	color: #333;
 }
 div#topbar .menu{
@@ -105,25 +106,6 @@ div#loading{
 	background-repeat: no-repeat;
 	background-position: center;
 }
-span.icon-bugs{
-	background-image: url('../img/bug.png');
-	background-size: 100%;
-	background-repeat: no-repeat;
-	display: block;
-	width: 35px;
-	height: 35px;
-	font-size: 13px;
-	float: left;
-}
-span.icon-bugs-invert{
-	background-image: url('../img/bug-invert.png');
-	background-size: 100%;
-	background-repeat: no-repeat;
-	display: block;
-	float: left;
-	width: 35px;
-	height: 35px;
-}
 .screen-small, .screen-large{
 	display: none;
 }
@@ -202,15 +184,13 @@ span.icon-bugs-invert{
 		top: 0;
 		padding: 0 !important;
 	}
-	a.topbar-back{
-	}
 	div#topbar{
 		min-height: 35px;
 	}
 	div.topbar-right{
 		min-height: 35px;
 		width: 100%;
-		padding-top: 35px;
+		padding-top: 50px;
 	}
 	.topbar-back,.topbar-history{
 		background: url(../img/headers/ui/separator.png) no-repeat scroll right center transparent;
@@ -221,13 +201,10 @@ span.icon-bugs-invert{
 }
 @media screen and (min-width: 768px){
 	div#topbar .menuitem{
-		font-size: 15px;
+		/*font-size: 15px;*/
 		padding-left: 5px;
 		padding-right: 5px;
 	}
-	div#topbar .menuitem:hover + a{
-		border-left-color: black;
-	}
 	a.topbar-back{
 		display: none !important;
 	}

data/pages/topbar.template

@@ -8,12 +8,12 @@
 -->
 <div class="topbar-left">
 	<a class="topbar-home menuitem" href="#page-index">
-		<span class="screen-small" style="background-image:url(img/headers/icons/menu.png);height:35px;background-position:center;"></span>
+		<span class="screen-small" style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;background-position:center;"></span>
 	</a>
 	{{#if key}}
 		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
-			<span  style="background-image:url(img/headers/icons/menu.png);height:35px;width:35px;background-position:center;float:left;"></span>			
-			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;left:0;">
+			<span  style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;width:35px;background-position:center;float:left;"></span>			
+			<ul class="menu top" style="display:none;margin-top:50px;position:absolute;left:0;">
 				<li>
 					<a href="#page-index">
 						Home
@@ -38,7 +38,7 @@
 		</span>
 	{{/if}}
 	<a class="topbar-history menuitem" href="#page-index" >
-		<div style="background-image:url(img/headers/icons/back.png);background-repeat:no-repeat;background-position:center;width:35px;height:35px;"></div>
+		<div style="background-image:url(img/headers/icons/back.png);background-repeat:no-repeat;background-position:center;width:35px;height:50px;"></div>
 	</a>
 	<a class="topbar-current menuitem" href="#{{url}}">
 		{{title}}
@@ -46,7 +46,7 @@
 </div>
 <div class="topbar-right">
 	<a class="topbar-back menuitem" href="#{{url}}">
-		<div style="background-image:url(img/headers/icons/menu.png);height:35px;background-position:center;"></div>
+		<div style="background-image:url(img/headers/icons/menu.png);background-repeat:no-repeat;height:50px;background-position:center;"></div>
 	</a>
 	<a class="topbar-current menuitem" href="#{{url}}">
 		{{title}}
@@ -60,11 +60,11 @@
 		</a>
 	{{else}}
 		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
-			<span style="background-image:url(img/headers/icons/user.png);height:20px;width:20px;background-position:center;float:left;margin-top:5px;"></span>
+			<span style="background-image:url(img/headers/icons/user.png);height:35px;width:35px;background-position:center;float:left;margin-top:5px;"></span>
 			<span style="float:left">
 				{{user.name}}
 			</span>
-			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;right:0;">
+			<ul class="menu top" style="display:none;margin-top:50px;position:absolute;right:0;">
 				<li>
 					<a href="#~{{user.name}}">
 						Profile

js/index.js

@@ -254,7 +254,9 @@
 					icons:{
 						submenu: "ui-icon-circle-triangle-e"
 					}
-				}).removeClass('ui-corner-all').addClass('ui-corner-bottom');
+				}).removeClass('ui-corner-all').addClass('ui-corner-bottom').parent().click(function(e){
+					e.stopPropagation();
+				});
 			},
 			form: function(selector){
 				$(selector).find('#form').position({of:selector,my:'center',at:'center'});
@@ -290,6 +292,25 @@
 		setKey(null);
 	}
 	$(document).ready(function(){
+		$.fn.serializeObject = function(){
+			var o = {},
+				a = this.serializeArray();
+			$.each(a,function(){
+				if(o[this.name] !== undefined){
+					if(!o[this.name].push){
+						o[this.name] = [o[this.name]];
+					}
+					o[this.name].push(this.value || '');
+				}else{
+					o[this.name] = this.value || '';
+				}
+			});
+			return o;
+		};
+		$.ajaxSetup({
+			async: false,
+			cache: false
+		});
 		templates = $.localStorage('templates');
 		if(templates === null){
 			templates = [];
@@ -343,6 +364,9 @@
 			nativeparentscrolling: false,
 			preservenativescrolling: false
 		});
+		$('#content,#topbar').click(function(){
+			$('.menu').hide();
+		});
 		document.addEventListener('touchmove',function(e){
 			e.preventDefault();
 		});
@@ -404,23 +428,9 @@
 			flag('manifesto',true);
 		}
 	});
-	$.fn.serializeObject = function(){
-		var o = {},
-			a = this.serializeArray();
-		$.each(a,function(){
-			if(o[this.name] !== undefined){
-				if(!o[this.name].push){
-					o[this.name] = [o[this.name]];
-				}
-				o[this.name].push(this.value || '');
-			}else{
-				o[this.name] = this.value || '';
-			}
-		});
-		return o;
-	};
-	$.ajaxSetup({
-		async: false,
-		cache: false
+	shortcut.add('Shift+f12',function(){
+		templates = [];
+		$.localStorage('templates',null);
+		console.log('Templates cleared.');
 	});
 })(jQuery,History);