CSS mejorado para mobiles en login y panel izquierdo

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (1.363-deb8) stable; urgency=low
+hedera-web (1.370-deb8) stable; urgency=low
 
   * Initial Release.
 

js/hedera/gui.css

@@ -8,7 +8,7 @@
 
 .vn-gui .user-info,
 .vn-gui .menu-title,
-.vn-gui .main-menu a
+.vn-gui .main-menu
 {
 	font-size: 1.1em;
 }
@@ -31,8 +31,6 @@
 	transition-property: left, background-color, transform;
 	transition-duration: 200ms;
 	transition-timing-function: ease-in-out;
-/*	transition: transform 100ms ease-in-out;
-	-webkit-transition: transform 100ms ease-in-out;*/
 }
 .vn-gui .menu-button
 {
@@ -214,7 +212,8 @@
 
 /* Menu */
 
-.vn-gui .main-menu
+.vn-gui .main-menu,
+.vn-gui ul.submenu
 {
 	list-style-type: none;
 	padding: 0;
@@ -223,47 +222,40 @@
 .vn-gui .main-menu > li
 {
 	display: block;
-	float: left;
-	clear: both;
 	padding: 0;
 	margin: 0;
 	width: 100%;
 }
-.vn-gui .main-menu > li > a
-{
-	line-height: 2.8em;
-	width: 70%;
-	padding: 0 15%;
-}
 .vn-gui .main-menu a
 {
-	float: left;
+	width: 70%;
+	padding: 0 15%;
+	display: block;
+	line-height: 2.8em;
 }
 .vn-gui .main-menu a:hover
 {
-	background-color: #DDD /* #AC6 */;
+	background-color: rgba(1, 1, 1, 0.1);
 }
 .vn-gui .main-menu a.selected
 {
-	background-color: #EEE;
+	background-color: rgba(1, 1, 1, 0.05);
 }
 .vn-gui ul.submenu
 {
 	display: none;
+}
+.vn-gui ul.submenu.popup
+{
+	display: inline;
 	position: fixed;
 	border: none;
 	border-radius: 1px;
 	background-color: white;
 	box-shadow: 0 .2em .2em #CCC;
 	z-index: 50;
-	list-style-type: none;
-	padding-left: 0;
 	width: 15em;
-}
-.vn-gui ul.submenu a
-{
-	width: 60%;
-	padding: 0.7em 20%;
+	max-height: 30em;
 }
 
 /* Social */
@@ -316,10 +308,6 @@
 	{
 		margin-left: -3em;
 	}
-	.vn-gui ul.submenu.show
-	{
-		display: inline;
-	}
 }
 
 /* Mobile */
@@ -365,13 +353,20 @@
 	.vn-gui ul.submenu
 	{
 		display: block;
-		position: relative;
-		border: none;
-		border-radius: 0;
-		background-color: white;
-		box-shadow: none;
-		width: auto;
+		background-color: #777;
+		color:white;
+		box-shadow: inset 0 0 .2em rgba(1, 1, 1, 0.2);
+		overflow: hidden;
+	
+		max-height: 0;
+		transition: max-height 300ms ease-out;
+		webkit-transition: max-height 300ms ease-out;
 	}
+	.vn-gui .main-menu li:hover > ul.submenu
+	{
+		max-height: 20em;
+	}
+
 	.htk-toast
 	{
 		margin-left: -10.5em;

js/hedera/gui.js

@@ -70,7 +70,7 @@ module.exports = new Class
 		this._shown = true;
 	
 		Vn.includeCss ('js/hedera/gui.css');
-		document.body.appendChild (this.node);
+		this.doc.body.appendChild (this.node);
 		
 		if (Vn.isMobile ())
 		{
@@ -211,22 +211,27 @@ module.exports = new Class
 		{
 			res.row = sections[i];
 		
-			var li = document.createElement ('li');
+			var li = this.createElement ('li');
 			ul.appendChild (li);
+	
+			var text = this.createTextNode (_(res.get ('description')));
 
-			var a = document.createElement ('a');
-			a.href = Vn.Hash.make ({'form': res.get ('path')});
-			this.menuOptions[res.get ('path')] = a;
-			li.appendChild (a);
+			var a = this.createElement ('a');
+			
+			if (res.get ('path'))
+			{
+				a.href = Vn.Hash.make ({'form': res.get ('path')});
+				this.menuOptions[res.get ('path')] = a;
+			}
 
-			var text = document.createTextNode (_(res.get ('description')));
 			a.appendChild (text);
+			li.appendChild (a);
 			
 			var formId = res.get ('id');
 			
 			if (sectionMap[formId])
 			{
-				var submenu = document.createElement ('ul');
+				var submenu = this.createElement ('ul');
 				submenu.className = 'submenu';
 				li.appendChild (submenu);
 
@@ -249,7 +254,7 @@ module.exports = new Class
 		this.activeSubmenu = submenu;
 
 		var rect = parent.getBoundingClientRect ();
-		Vn.Node.addClass (submenu, 'show');
+		Vn.Node.addClass (submenu, 'popup');
 		submenu.style.left = rect.right +'px';
 		submenu.style.top = rect.top +'px';
 	}
@@ -265,9 +270,9 @@ module.exports = new Class
 	
 		if (submenu)
 		{
-			Vn.Node.removeClass (submenu, 'show');
-			submenu.style.left = 'initial';
-			submenu.style.top = 'initial';
+			Vn.Node.removeClass (submenu, 'popup');
+			submenu.style.left = '';
+			submenu.style.top = '';
 			clearTimeout (this.timeout);
 			this.activeSubmenu = null;
 			this.timeout = 0;
@@ -281,7 +286,7 @@ module.exports = new Class
 		this.menuShown = true;
 
 		this.hideMenuCallback = this.hideMenu.bind (this);
-		document.addEventListener ('click', this.hideMenuCallback);
+		this.doc.addEventListener ('click', this.hideMenuCallback);
 	}
 
 	,hideMenu: function ()
@@ -293,7 +298,7 @@ module.exports = new Class
 		Vn.Node.removeClass (this.$('left-panel'), 'show');
 		this.menuShown = false;
 		
-		document.removeEventListener ('click', this.hideMenuCallback);
+		this.doc.removeEventListener ('click', this.hideMenuCallback);
 		this.hideMenuCallback = null;
 	}
 

js/hedera/gui.xml

@@ -25,8 +25,8 @@
 					<p id="supplanted"/>
 				</div>
 			</div>
-			<a id="test-link" class="test-link" href="#"></a>
-			<ul id="main-menu" class="main-menu"></ul>
+			<a id="test-link" class="test-link" href="#"/>
+			<ul id="main-menu" class="main-menu"/>
 		</div>
 		<div class="social">
 			<htk-social-bar id="social-bar" priority="2"/>

js/hedera/login.css

@@ -36,6 +36,7 @@
 .vn-login .column
 {
 	position: relative;
+	overflow: auto;
 	margin: 0 auto;
 	max-width: 40em;
 	height: 100%;
@@ -47,33 +48,15 @@
 
 .vn-login .login
 {
-	position: relative;
-	height: 100%;
 	max-width: 15em;
 	margin: 0 auto;
+	padding-top: 6em;
 }
 .vn-login form
 {
-	position: absolute;
-	top: 50%;
-	margin-top: -20em;
 	width: 100%;
 	padding: 1em 0;
 }
-@media (max-height: 650px)
-{
-	.vn-login,
-	.vn-login .login
-	{
-		height: auto;
-	}
-	.vn-login form
-	{
-		position: relative;
-		margin-top: 3.5em;
-		top: 0;
-	}
-}
 .vn-login form > div
 {
 	margin: 1em 0;