From e488a7cc9476c14d3cbe521a08c6f26fc98f6d88 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Tue, 18 Oct 2016 23:54:52 +0200
Subject: [PATCH] CSS mejorado para mobiles en login y panel izquierdo
---
debian/changelog | 2 +-
js/hedera/gui.css | 59 +++++++++++++++++++++------------------------
js/hedera/gui.js | 33 ++++++++++++++-----------
js/hedera/gui.xml | 4 +--
js/hedera/login.css | 21 ++--------------
5 files changed, 51 insertions(+), 68 deletions(-)
diff --git a/debian/changelog b/debian/changelog
index cc1e330d..969abf49 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,4 +1,4 @@
-hedera-web (1.363-deb8) stable; urgency=low
+hedera-web (1.370-deb8) stable; urgency=low
* Initial Release.
diff --git a/js/hedera/gui.css b/js/hedera/gui.css
index acf1cfd2..556778df 100644
--- a/js/hedera/gui.css
+++ b/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;
diff --git a/js/hedera/gui.js b/js/hedera/gui.js
index 9c0cae57..66e9e845 100644
--- a/js/hedera/gui.js
+++ b/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;
}
diff --git a/js/hedera/gui.xml b/js/hedera/gui.xml
index 04eb1fcc..ab26d747 100755
--- a/js/hedera/gui.xml
+++ b/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"/>
diff --git a/js/hedera/login.css b/js/hedera/login.css
index 29dc10eb..53e93656 100644
--- a/js/hedera/login.css
+++ b/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;