From 5b731a60aeff2d575bcd5c377b46179918538671 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Sat, 22 Apr 2017 20:34:52 +0200 Subject: [PATCH 1/9] Frio: Fix aside in mobile view Aside is fixed to cover page, without the need to scroll back top to see it. --- view/theme/frio/css/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 3879605276..9e0fafad1b 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -100,6 +100,20 @@ code { } .help-content-wrapper code {display: inline} +/** + * mobile aside + */ +@media screen and (max-width: 990px) { + aside{ + position: fixed!important; + top: 0!important; + background-color: #fff; + width: 100%; + height: 100%; + padding-top: 100px; + z-index: 10; + } +} /* * standard page elements */ From e569e20caf6b836fa4451cc807abb49ba2656bbc Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Sat, 22 Apr 2017 20:36:48 +0200 Subject: [PATCH 2/9] Frio: sitck aside on page scroll use sticky-kit jquery library to keep aside inside viewport when user scrolls the page. --- .../frio/frameworks/sticky-kit/jquery.sticky-kit.min.js | 9 +++++++++ view/theme/frio/js/theme.js | 7 +++++++ view/theme/frio/templates/head.tpl | 1 + 3 files changed, 17 insertions(+) create mode 100644 view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js diff --git a/view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js b/view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js new file mode 100644 index 0000000000..e2a3c6de9e --- /dev/null +++ b/view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js @@ -0,0 +1,9 @@ +/* + Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net +*/ +(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k)); +if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("
"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q, +u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),eb&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}), +a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize", +y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n + {{* own js files *}} From ea9d44c20a265e7959825fc115b37e72fe848664 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Wed, 26 Apr 2017 08:56:47 +0200 Subject: [PATCH 3/9] Fix sticky aside when height change --- view/theme/frio/js/theme.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index d567333b23..7412df9b8e 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -320,7 +320,13 @@ $(document).ready(function(){ * Sticky aside on page scroll */ $("aside").stick_in_parent({ - offset_top: 100 // px, header + tab bar + spacing + offset_top: 100, // px, header + tab bar + spacing + recalc_every: 10 + }); + // recalculate sticky aside on clicks. + // this handle height changes on expanding submenus + $("aside").on("click", function(){ + $(document.body).trigger("sticky_kit:recalc"); }); }); From bd4ce2daeee6958e4c693a5b545f54b67fb4e5dc Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Wed, 26 Apr 2017 08:58:45 +0200 Subject: [PATCH 4/9] mobile aside: max-width and transparent overlay fix maximum aside with in mobile screen at 300px. This way the aside will not cover all the screen. The area not covered by aside element are dimmed by a semi-transparent overlay --- view/theme/frio/css/style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 9e0fafad1b..e65b81ac19 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -109,10 +109,22 @@ code { top: 0!important; background-color: #fff; width: 100%; + max-width: 300px; height: 100%; padding-top: 100px; z-index: 10; } + aside::before { + content: " "; + position: fixed; + display: block; + top: 0; left: 300px; right: 0; bottom: 0; + background-color: rgba(0,0,0,0.4); + } + aside + div { + display:none!important; + } + } /* * standard page elements From 0afc732059f62db60e474348b2de10d114830a3b Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Wed, 26 Apr 2017 10:16:39 +0200 Subject: [PATCH 5/9] frio mobile aside: add overlay transition --- view/theme/frio/css/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index e65b81ac19..678bb91b16 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -120,6 +120,11 @@ code { display: block; top: 0; left: 300px; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); + opacity: 0; + transition: opacity 0.5s; + } + aside.canvas-slid::before { + opacity: 1; } aside + div { display:none!important; From 0ffe426ff1bf63cf5220c4d0994071c33b3a95eb Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Thu, 27 Apr 2017 08:39:35 +0200 Subject: [PATCH 6/9] Frio: Enable stiky aside only on desktop-size windows. "Hack" to fix the "scroll back to top" problem with chrome-based browsers, sticky-kit and off-canvas aside --- view/theme/frio/css/style.css | 3 --- view/theme/frio/js/theme.js | 22 ++++++++++++---------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 678bb91b16..937e55042a 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -126,9 +126,6 @@ code { aside.canvas-slid::before { opacity: 1; } - aside + div { - display:none!important; - } } /* diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 7412df9b8e..62c45b3da2 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -317,17 +317,19 @@ $(document).ready(function(){ }); /* - * Sticky aside on page scroll + * Sticky aside on page scroll, only on desktop */ - $("aside").stick_in_parent({ - offset_top: 100, // px, header + tab bar + spacing - recalc_every: 10 - }); - // recalculate sticky aside on clicks. - // this handle height changes on expanding submenus - $("aside").on("click", function(){ - $(document.body).trigger("sticky_kit:recalc"); - }); + if ($(window).width() > 976) { + $("aside").stick_in_parent({ + offset_top: 100, // px, header + tab bar + spacing + recalc_every: 10 + }); + // recalculate sticky aside on clicks. + // this handle height changes on expanding submenus + $("aside").on("click", function(){ + $(document.body).trigger("sticky_kit:recalc"); + }); + } }); function openClose(theID) { From 1da4b9d942e4eb83f4111c9bfd0a10fb6bf1cc70 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Thu, 27 Apr 2017 19:21:14 +0200 Subject: [PATCH 7/9] frio: add comment note about sticky aside hack --- view/theme/frio/js/theme.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 62c45b3da2..a335fffbdb 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -317,7 +317,15 @@ $(document).ready(function(){ }); /* - * Sticky aside on page scroll, only on desktop + * Sticky aside on page scroll + * We enable the sticky aside only when window is wider than + * 976px - which is the maximum width where the aside is shown in + * mobile style - because on chrome-based browsers (desktop and + * android) the sticky plugin in mobile style causes the browser to + * scroll back to top the main content, making it impossible + * to navigate. + * A side effect is that the sitky aside isn't really responsive, + * since is enabled or not at page loading time. */ if ($(window).width() > 976) { $("aside").stick_in_parent({ From d162e689daf6b5f401c29f6772a6ee8b65d8f509 Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Mon, 8 May 2017 15:14:31 +0200 Subject: [PATCH 8/9] frio mobile: disable page scroll when aside is shown --- view/theme/frio/css/style.css | 2 ++ view/theme/frio/js/theme.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 937e55042a..e787384eda 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -127,6 +127,8 @@ code { opacity: 1; } + /* prevent page scroll when the aside is opened **/ + body.aside-out { overflow: hidden; } } /* * standard page elements diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index a335fffbdb..047cce16b0 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -338,6 +338,21 @@ $(document).ready(function(){ $(document.body).trigger("sticky_kit:recalc"); }); } + + /* + * Add or remove "aside-out" class to body tag + * when the mobile aside is shown or hidden. + * The class is used in css to disable scroll in page when the aside + * is shown. + */ + $("aside") + .on("shown.bs.offcanvas", function() { + $("body").addClass("aside-out"); + }) + .on("hidden.bs.offcanvas", function() { + $("body").removeClass("aside-out"); + }); + }); function openClose(theID) { From 61e8147dafc4de022e2ae9d74d106a381030e4dc Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Tue, 9 May 2017 14:53:56 +0200 Subject: [PATCH 9/9] Frio: recalculate sticky aside on click only on a tags This to prevent input elements in aside to lose focus after the recalculation. --- view/theme/frio/js/theme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 047cce16b0..0329ae6c82 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -332,9 +332,9 @@ $(document).ready(function(){ offset_top: 100, // px, header + tab bar + spacing recalc_every: 10 }); - // recalculate sticky aside on clicks. + // recalculate sticky aside on clicks on elements // this handle height changes on expanding submenus - $("aside").on("click", function(){ + $("aside").on("click", "a", function(){ $(document.body).trigger("sticky_kit:recalc"); }); }