From d5cd84d22b4e25a9310c14763086e42a97fb9c9e Mon Sep 17 00:00:00 2001 From: Juan Ferrer Toribio Date: Tue, 15 Dec 2015 16:22:46 +0100 Subject: [PATCH] =?UTF-8?q?Dise=C3=B1o=20responsive=20mejorado,=20a=C3=B1a?= =?UTF-8?q?didos=20efectos=20mediante=20transiciones=20CSS,=20errores=20en?= =?UTF-8?q?=20Safari=20solucionados,=20errores=20de=20estilo=20solucionado?= =?UTF-8?q?s,=20CSS=20optimizado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- debian/changelog | 2 +- web/forms/account/conf/ui.xml | 2 +- web/forms/admin/connections/connections.js | 16 +- web/forms/admin/connections/ui.xml | 2 +- web/forms/cms/home/style.css | 18 +- web/forms/cms/home/ui.xml | 46 ++--- web/forms/ecomerce/catalog/catalog.js | 4 +- web/forms/ecomerce/catalog/style.css | 30 +-- web/forms/ecomerce/catalog/ui.xml | 4 +- web/forms/ecomerce/checkout/style.css | 6 +- web/forms/ecomerce/confirm/confirm.js | 22 ++- web/forms/ecomerce/confirm/style.css | 22 +-- web/forms/ecomerce/confirm/ui.xml | 34 ++-- web/image/dark/{order.svg => place.svg} | 0 web/image/{order.svg => place.svg} | 0 web/image/youtube.svg | 16 +- web/js/hedera/app.js | 66 ++++++- web/js/hedera/form.js | 2 +- web/js/hedera/gui.css | 123 +++++++------ web/js/hedera/gui.js | 108 +++-------- web/js/hedera/gui.xml | 26 ++- web/js/hedera/login.css | 82 +++++---- web/js/hedera/login.js | 2 +- web/js/hedera/login.xml | 2 +- web/js/hedera/report.js | 4 - web/js/hedera/style.css | 47 ++--- web/js/htk/field/select.js | 202 ++++++++------------- web/js/htk/popup.js | 197 +++++++++++++++----- web/js/htk/style.css | 61 +++++-- 29 files changed, 620 insertions(+), 526 deletions(-) rename web/image/dark/{order.svg => place.svg} (100%) rename web/image/{order.svg => place.svg} (100%) diff --git a/debian/changelog b/debian/changelog index ac49c216..6fe5db8a 100644 --- a/debian/changelog +++ b/debian/changelog @@ -1,4 +1,4 @@ -hedera-web (1.305-deb8) stable; urgency=low +hedera-web (1.312-deb8) stable; urgency=low * Initial Release. diff --git a/web/forms/account/conf/ui.xml b/web/forms/account/conf/ui.xml index a2773aa0..6473c5ce 100755 --- a/web/forms/account/conf/ui.xml +++ b/web/forms/account/conf/ui.xml @@ -25,7 +25,7 @@
diff --git a/web/forms/admin/connections/connections.js b/web/forms/admin/connections/connections.js index 928cef6c..ba3fd12f 100755 --- a/web/forms/admin/connections/connections.js +++ b/web/forms/admin/connections/connections.js @@ -3,16 +3,22 @@ Vn.Connections = new Class ({ Extends: Vn.Form - ,_intervalId: null - - ,activate: function () + ,_timeoutId: null + + ,onModelStatusChange: function (model, status) { - this._intervalId = setInterval (this.onRefreshClick.bind (this), 60000); + if (!model.ready) + return; + + if (this._timeoutId) + clearTimeout (this._timeoutId); + + this._timeoutId = setTimeout (this.onRefreshClick.bind (this), 60000); } ,deactivate: function () { - clearTimeout (this._intervalId); + clearTimeout (this._timeoutId); } ,onRefreshClick: function () diff --git a/web/forms/admin/connections/ui.xml b/web/forms/admin/connections/ui.xml index 4d4ff1ee..6e8a7880 100755 --- a/web/forms/admin/connections/ui.xml +++ b/web/forms/admin/connections/ui.xml @@ -21,7 +21,7 @@
- + SELECT s.id, e.user_id, c.Cliente, e.date_time login, is_new, s.date_time last_activity, a.platform, a.browser, a.version diff --git a/web/forms/cms/home/style.css b/web/forms/cms/home/style.css index 9dac9a27..8f75629b 100755 --- a/web/forms/cms/home/style.css +++ b/web/forms/cms/home/style.css @@ -1,14 +1,22 @@ /* News panel */ -.home -{ - margin: .5em; -} .column { + margin: .5em; max-width: 120em; } +.action-bar button.start-order +{ + background-color: #EF5350; + margin: .7em .4em; + padding: .5em; + box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.4); +} +.action-bar button.start-order:hover +{ + background-color: #F44336; +} /* New */ @@ -19,7 +27,7 @@ color: #222; border: none; border-radius: 0.1em; - box-shadow: 0 0.2em 0.2em #CCC; + box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.2); margin: .5em; } .new .top diff --git a/web/forms/cms/home/ui.xml b/web/forms/cms/home/ui.xml index fae1dc95..1189ba9b 100755 --- a/web/forms/cms/home/ui.xml +++ b/web/forms/cms/home/ui.xml @@ -4,6 +4,7 @@
- - + + + + SELECT title, date_time, text, image, id FROM news + WHERE tag != 'course' + ORDER BY priority, date_time DESC + + - SELECT title, date_time, text, image, id FROM news - WHERE tag != 'course' - ORDER BY priority, date_time DESC - - - -
-
-
-

-
- +
+
+
+

+
+ +
+
- -
-
- - +
+ + +
diff --git a/web/forms/ecomerce/catalog/catalog.js b/web/forms/ecomerce/catalog/catalog.js index 6529fe68..c98a68b7 100755 --- a/web/forms/ecomerce/catalog/catalog.js +++ b/web/forms/ecomerce/catalog/catalog.js @@ -179,7 +179,7 @@ Vn.Catalog = new Class { if (!this._menuShown) return; - + this.gui.hideBackground (); Vn.Node.removeClass (this.$('right-panel'), 'show'); document.removeEventListener ('click', this.hideMenuCallback); @@ -469,7 +469,7 @@ Vn.Filter = new Class this.parent (props); } - ,_onClick: function () + ,_onClick: function (e) { if (this._model && this._model.status === Db.Model.Status.CLEAN) this._model.refresh (); diff --git a/web/forms/ecomerce/catalog/style.css b/web/forms/ecomerce/catalog/style.css index 25cf129b..3b05f6c1 100755 --- a/web/forms/ecomerce/catalog/style.css +++ b/web/forms/ecomerce/catalog/style.css @@ -1,30 +1,13 @@ .catalog { - position: relative; - width: 100%; - height: 100%; - min-height: 25em; -} -.catalog div.center -{ - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 17em; + margin-right: 17em; } /* Main */ -.catalog div.main +.catalog > .main { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: auto; - padding: .4em; + padding: .5em; } .htk-toast { @@ -43,7 +26,7 @@ .right-panel { - position: absolute; + position: fixed; top: 3.9em; bottom: 0; right: 0; @@ -96,7 +79,6 @@ } .right-panel select { - margin: 0 auto; width: 100%; } .vn-filter > ul @@ -308,9 +290,9 @@ td.third-category transform: translateZ(0) translateX(-17em); -webkit-transform: translateZ(0) translateX(-17em); } - .catalog div.center + .catalog { - right: 0; + margin-right: 0; } } diff --git a/web/forms/ecomerce/catalog/ui.xml b/web/forms/ecomerce/catalog/ui.xml index 25a86f42..e068abc6 100755 --- a/web/forms/ecomerce/catalog/ui.xml +++ b/web/forms/ecomerce/catalog/ui.xml @@ -121,9 +121,7 @@
-
-
-
+
diff --git a/web/forms/ecomerce/checkout/style.css b/web/forms/ecomerce/checkout/style.css index 854768e3..9fa8fdb3 100755 --- a/web/forms/ecomerce/checkout/style.css +++ b/web/forms/ecomerce/checkout/style.css @@ -18,9 +18,9 @@ { font-size: 1.4em; } -.answers select +.answers .htk-select { - min-width: 8em; + max-width: 8em; display: block; margin: 0 auto; font-size: 1.6em; @@ -78,7 +78,7 @@ { color: white; } -.htk-assistant button +.htk-assistant .thin { float: right; } diff --git a/web/forms/ecomerce/confirm/confirm.js b/web/forms/ecomerce/confirm/confirm.js index 2f0b9e89..7650911b 100755 --- a/web/forms/ecomerce/confirm/confirm.js +++ b/web/forms/ecomerce/confirm/confirm.js @@ -62,27 +62,29 @@ Vn.Confirm = new Class ,onConfirm: function (query, resultSet) { + this.disableButtons (false); + var res = resultSet.fetchResult (); - var debt = resultSet.fetchValue (); if (res) { Vn.Cookie.unset ('order'); - this.pay = debt > this.$('order-form').get ('credit'); - this.popup = new Htk.Popup (); - this.popup.setChildNode (this.$('success-dialog')); - this.popup.showCenter (); + var debt = resultSet.fetchValue (); + this._pay = debt > this.$('order-form').get ('credit'); + + this.$('success-dialog').show (); } - else - this.disableButtons (false); } ,onAcceptClick: function () { - this.popup.hide (); - - if (this.pay) + this.$('success-dialog').hide (); + } + + ,onPopupClose: function () + { + if (this._pay) Vn.Tpv.pay (this.conn, this.$('total').value, this.$('order-form').get ('company_id')); else diff --git a/web/forms/ecomerce/confirm/style.css b/web/forms/ecomerce/confirm/style.css index 7676263c..975a4f62 100755 --- a/web/forms/ecomerce/confirm/style.css +++ b/web/forms/ecomerce/confirm/style.css @@ -14,11 +14,10 @@ .confirm .form { margin: 0 auto; - padding: 3em 4em; + padding: 2.5em 3em; color: #555; } -.confirm .form p, -.confirm .form select, +.confirm .form p.important, .confirm .form button { font-size: 1.4em; @@ -31,10 +30,6 @@ { margin: .2em 0; } -.confirm .form p.small -{ - font-size: 1em; -} .button-bar { margin-top: 2em; @@ -52,26 +47,17 @@ .success-dialog { - padding: 2em; - min-width: 30em; + padding: 1em; max-width: 35em; -} -.success-dialog * -{ font-weight: normal; color: #555; } -.success-dialog p, -.success-dialog button -{ - font-size: 1.4em; -} .success-dialog img { float: left; height: 3em; margin-top: 0; - margin-right: 1.5em; + margin-right: 1em; } .success-dialog p { diff --git a/web/forms/ecomerce/confirm/ui.xml b/web/forms/ecomerce/confirm/ui.xml index 4bf79116..86c05146 100755 --- a/web/forms/ecomerce/confirm/ui.xml +++ b/web/forms/ecomerce/confirm/ui.xml @@ -40,33 +40,33 @@
-

+

Arrival

-

+

Agency

-

+

-

+

-

+

,

-

+

Total

-

+

(TaxBase + VAT )

@@ -83,15 +83,17 @@
-
-
- _Ok -

OrderPlacedSuccessfully

+ +
+
+ _Ok +

OrderPlacedSuccessfully

+
+
+
- -
-
+ diff --git a/web/image/dark/order.svg b/web/image/dark/place.svg similarity index 100% rename from web/image/dark/order.svg rename to web/image/dark/place.svg diff --git a/web/image/order.svg b/web/image/place.svg similarity index 100% rename from web/image/order.svg rename to web/image/place.svg diff --git a/web/image/youtube.svg b/web/image/youtube.svg index 80fc42d6..c38c48c4 100644 --- a/web/image/youtube.svg +++ b/web/image/youtube.svg @@ -13,7 +13,7 @@ height="23.999996" id="svg11927" version="1.1" - inkscape:version="0.48.5 r10040" + inkscape:version="0.91 r13725" sodipodi:docname="youtube.svg"> @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="7.919596" - inkscape:cx="64.326307" - inkscape:cy="46.777283" + inkscape:zoom="34.458339" + inkscape:cx="12" + inkscape:cy="11.999998" inkscape:current-layer="layer1" showgrid="false" units="mm" @@ -37,7 +37,7 @@ fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="1920" - inkscape:window-height="1014" + inkscape:window-height="1016" inkscape:window-x="1920" inkscape:window-y="27" inkscape:window-maximized="1" /> @@ -49,7 +49,7 @@ image/svg+xml - + @@ -59,8 +59,8 @@ id="layer1" transform="translate(-65.660672,-187.08936)"> diff --git a/web/js/hedera/app.js b/web/js/hedera/app.js index b256cf8c..ca483d23 100644 --- a/web/js/hedera/app.js +++ b/web/js/hedera/app.js @@ -18,17 +18,20 @@ Vn.App = new Class }); this._isGuest.on ('changed', this._onGuestChange, this); - this._conn = new Db.Conn (); + var conn = new Db.Conn (); + this.link ({_conn: conn}, {'error': this._onConnError}); } ,run: function () { + var guest = Vn.Cookie.check ('hedera_guest'); + if (Vn.Cookie.check ('vn_pass')) { this._conn.open (null, null, null, this._onAutoLogin.bind (this)); } - else if (this._isGuest.value || Vn.Cookie.check ('hedera_guest')) + else if (this._isGuest.value || guest) { this._guestLogin (); } @@ -38,6 +41,9 @@ Vn.App = new Class login.on ('login', this._onLogin, this); login.show (); } + + if (guest) + Vn.Cookie.unset ('hedera_guest'); } ,_onGuestChange: function () @@ -62,7 +68,6 @@ Vn.App = new Class if (!success) { this._isGuest.value = false; - Vn.Cookie.unset ('hedera_guest'); this.run (); } else @@ -117,6 +122,61 @@ Vn.App = new Class { this.unref (); } + + ,_onConnError: function (conn, error) + { + if (error instanceof Vn.Error) + switch (error.domain) + { + case 'Auth': + Htk.Toast.showError (_('You\'ve been too idle')); + if (this._gui) + this._gui.logout (); + break; + case 'Version': + this._newVersion (error); + break; + case 'User': + Htk.Toast.showError (error.message); + break; + default: + console.error (error.message); + Htk.Toast.showError (_('There was an internal error')); + } + else + { + console.error (error); + Htk.Toast.showError (_('There was an internal error')); + this._notifyError (error); + } + } + + ,_newVersion: function (error) + { + if (this.newVersionBlock || this.skipVersion) + return; + + this.newVersionBlock = true; + + var reload; + var message = _('New version available') +"\n\n"+ error.message; + + if (error.code == 'criticalVersion') + { + alert (message) + reload = true; + } + else + { + reload = confirm (message); + this.skipVersion = true; + } + + if (reload) + location.reload (); + + this.newVersionBlock = false; + } ,_notifyError: function (error) { diff --git a/web/js/hedera/form.js b/web/js/hedera/form.js index f7e400d0..720cd96f 100755 --- a/web/js/hedera/form.js +++ b/web/js/hedera/form.js @@ -54,7 +54,7 @@ Vn.Form = new Class if (this.node) { - this.gui.formHolder.appendChild (this.node); + this.gui.setForm (this.node); this.gui.setTitle (res.$('title')); this.gui.setActions (res.$('actions')); this.activate (); diff --git a/web/js/hedera/gui.css b/web/js/hedera/gui.css index c3b48b55..27c910d9 100755 --- a/web/js/hedera/gui.css +++ b/web/js/hedera/gui.css @@ -1,39 +1,38 @@ .vn-gui { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + height: inherit; } /* Font */ .vn-gui .welcome, +.vn-gui .supplant > span, .vn-gui .menu-title, .vn-gui .main-menu a { font-size: 1.1em; } -/* Header */ +/* Navigation bar */ -.vn-gui .top-bar, +.vn-gui .navbar, .vn-gui .exit { height: 3.9em; } -.vn-gui .top-bar +.vn-gui .navbar { - position: relative; + position: fixed; background-color: #009688; - width: 100%; + left: 15em; + top: 0; + right: 0; z-index: 1; overflow: hidden; box-shadow: 0 0.1em 0.1em rgba(1, 1, 1, 0.3); } -.vn-gui .top-bar +.vn-gui .navbar { color: white; } @@ -68,7 +67,7 @@ padding-right: 0; margin: 0; } -.vn-gui .top-bar > .htk-spinner +.vn-gui .navbar > .htk-spinner { float: left; margin: 1.05em .8em; @@ -124,27 +123,40 @@ height: 1.4em; } -/* Body */ +/* Background */ -.vn-gui > .body +.vn-gui > .background { - position: absolute; + z-index: 10; + position: fixed; top: 0; - bottom: 0; - left: 15em; - right: 0; -} -.vn-gui .content -{ - position: absolute; - top: 3.9em; - bottom: 0; left: 0; right: 0; + bottom: 0; + visibility: hidden; + background-color: rgba(1, 1, 1, 0.7); + opacity: 0; +} +.vn-gui > .background.show +{ + visibility: visible; + transition: opacity 200ms ease-out; + opacity: 1; } /* Left panel */ +.vn-gui .left-panel +{ + z-index: 20; + position: fixed; + left: 0; + bottom: 0; + top: 0; + background-color: white; + z-index: 20; + box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.4); +} .vn-gui .menu-header { background-color: #333; @@ -171,8 +183,6 @@ } .vn-gui .supplant > span { - font-size: 1.1em; - max-width: 10em; display: inline-block; text-overflow: ellipsis; @@ -184,34 +194,12 @@ float: right; padding: .2em; } -.vn-gui .background -{ - z-index: 10; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(10, 10, 10, 0.6); - display: none; -} .vn-gui .left-panel, .vn-gui .main-menu > li, .vn-gui ul.submenu { width: 15em; } -.vn-gui .left-panel -{ - z-index: 20; - position: absolute; - left: 0; - bottom: 0; - top: 0; - background-color: white; - z-index: 20; - box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.4); -} .vn-gui .menu-overflow { position: absolute; @@ -313,28 +301,41 @@ height: 1.8em; } -/* Form holder */ +/* Body */ +.vn-gui > .body +{ + margin-left: 15em; + padding-top: 3.9em; + height: inherit; + box-sizing: border-box; + height: inherit; +} .vn-gui .form-holder { - position: absolute; - top: 0em; - bottom: 0; - right: 0; - left: 0; - overflow: auto; + position: relative; + height: inherit; + opacity: 0; + transform: translateZ(0) translateX(-2em); +} +.vn-gui .form-holder.show +{ + transition: 250ms ease-out all; + opacity: 1; + transform: translateZ(0) translateX(0em); } /* Transitions */ .vn-gui > .body { - transition-property: left, right; + transition-property: margin-left, margin-right; transition-duration: 200ms; } -.vn-gui .top-bar +.vn-gui >.navbar { - transition: background-color 300ms; + transition-property: left, background-color; + transition-duration: 200ms; } /* Desktop */ @@ -360,10 +361,14 @@ { display: none; } - .vn-gui > .body + .vn-gui > .navbar { left: 0; } + .vn-gui > .body + { + margin-left: 0; + } .vn-gui .menu-button { display: block; diff --git a/web/js/hedera/gui.js b/web/js/hedera/gui.js index 8960bd21..9ab55c77 100755 --- a/web/js/hedera/gui.js +++ b/web/js/hedera/gui.js @@ -13,10 +13,7 @@ Vn.Gui = new Class ,set: function (x) { this.link ({_conn: x}, - { - 'error': this.onConnError - ,'loading-changed': this._onConnLoadChange - }); + {'loading-changed': this._onConnLoadChange }); var sql = 'SELECT default_form, image_dir, image_host FROM config;' +'SELECT production_domain, test_domain FROM config;' @@ -48,7 +45,6 @@ Vn.Gui = new Class this.builderInit ('js/hedera/gui.xml'); this.loadingCount = 0; - this.formHolder = this.$('form-holder'); this.hash = Vn.Hash; this.hashParam = new Vn.HashParam ({key: 'form'}); @@ -88,6 +84,11 @@ Vn.Gui = new Class Vn.Node.remove (this.node); } + ,logout: function () + { + this.onLogoutClick (); + } + ,onLogoutClick: function () { this._conn.close (this.onConnClose.bind (this)); @@ -100,12 +101,12 @@ Vn.Gui = new Class ,showBackground: function () { - Vn.Node.show (this.$('background')); + Vn.Node.addClass (this.$('background'), 'show'); } ,hideBackground: function () { - Vn.Node.hide (this.$('background')); + Vn.Node.removeClass (this.$('background'), 'show'); } ,showMenu: function () @@ -197,54 +198,6 @@ Vn.Gui = new Class this._onFormChange (); } - - ,notifyError: function (error) - { - if (error instanceof Error) - { - var httpRequest = new Vn.HttpRequest () - httpRequest.add - ({ - 'file': error.fileName - ,'line': error.lineNumber - ,'message': error.message - ,'stack': error.stack - }); - httpRequest.send ('log.php'); - } - } - - ,errorHandler: function (error) - { - if (error instanceof Vn.Error) - switch (error.domain) - { - case 'Auth': - Htk.Toast.showError (_('You\'ve been too idle')); - this.signalEmit ('logout'); - break; - case 'Version': - this.newVersion (error); - break; - case 'User': - Htk.Toast.showError (error.message); - break; - default: - console.error (error.message); - Htk.Toast.showError (_('There was an internal error')); - } - else - { - console.error (error); - Htk.Toast.showError (_('There was an internal error')); - this.notifyError (error); - } - } - - ,onConnError: function (conn, error) - { - this.errorHandler (error); - } ,_onConnLoadChange: function (conn, isLoading) { @@ -273,33 +226,6 @@ Vn.Gui = new Class this.$('loader').stop (); } - ,newVersion: function (error) - { - if (this.newVersionBlock || this.skipVersion) - return; - - this.newVersionBlock = true; - - var reload; - var message = _('New version available') +"\n\n"+ error.message; - - if (error.code == 'criticalVersion') - { - alert (message) - reload = true; - } - else - { - reload = confirm (message); - this.skipVersion = true; - } - - if (reload) - location.reload (); - - this.newVersionBlock = false; - } - //++++++++++++++++++++++++++++++++++++++++++++++++++++++ Menu ,createMenu: function (res, sectionMap, parent, ul) @@ -428,6 +354,23 @@ Vn.Gui = new Class this.activeForm = new formInfo.klass (this, formInfo); this.activeForm.open (); + + } + + ,setForm: function (form) + { + Vn.Node.removeChilds (this.$('form-holder')); + + if (form) + { + this.$('form-holder').appendChild (form); + setTimeout (this._onSetFormTimeout.bind (this), 0); + } + } + + ,_onSetFormTimeout: function () + { + Vn.Node.addClass (this.$('form-holder'), 'show'); } ,setTitle: function (title) @@ -450,6 +393,7 @@ Vn.Gui = new Class { if (this.activeForm) { + Vn.Node.removeClass (this.$('form-holder'), 'show'); this.activeForm.close (); this.activeForm.unref (); this.activeForm = null; diff --git a/web/js/hedera/gui.xml b/web/js/hedera/gui.xml index c7536824..694232f4 100755 --- a/web/js/hedera/gui.xml +++ b/web/js/hedera/gui.xml @@ -1,5 +1,16 @@
+