]> git.mxchange.org Git - friendica.git/commitdiff
Merge pull request #3472 from rabuzarus/feature/frio/fixedaside2
authorTobias Diekershoff <tobias.diekershoff@gmx.net>
Wed, 17 May 2017 09:27:37 +0000 (11:27 +0200)
committerGitHub <noreply@github.com>
Wed, 17 May 2017 09:27:37 +0000 (11:27 +0200)
Frio: better UX for aside bar

view/theme/frio/css/style.css
view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js [new file with mode: 0644]
view/theme/frio/js/theme.js
view/theme/frio/templates/head.tpl

index 01cab105bc4602d610923f2f6bffeede36188b1f..8cc8997930ed7792b179cd26536b89fea4f1ba34 100644 (file)
@@ -100,6 +100,36 @@ code {
 }
 .help-content-wrapper code, .help-aside-wrapper code {display: inline}
 
+/**
+ * mobile aside
+ */
+@media screen and (max-width: 990px) {
+    aside{
+        position: fixed!important;
+        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);
+        opacity: 0;
+        transition: opacity 0.5s;
+    }
+    aside.canvas-slid::before {
+        opacity: 1;
+    }
+
+    /* prevent page scroll when the aside is opened **/
+    body.aside-out { overflow: hidden; }
+}
 /*
 * standard page elements
 */
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 (file)
index 0000000..e2a3c6d
--- /dev/null
@@ -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("<div />"))&&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"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
+h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!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<K;n++)d=this[n],J(b(d));return this}}).call(this);
index b46599eddf11b85464ffb7c3215b66aa406627ad..0329ae6c82cb16a287a6238b2d007a41f9dfbfe0 100644 (file)
@@ -315,6 +315,44 @@ $(document).ready(function(){
        $(document).on('change', 'textarea', function(event) {
                autosize.update(event.target);
        });
+
+       /*
+        * 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({
+                       offset_top: 100, // px, header + tab bar + spacing
+                       recalc_every: 10
+               });
+               // recalculate sticky aside on clicks on <a> elements
+               // this handle height changes on expanding submenus
+               $("aside").on("click", "a", 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) {
index 882d2215cfe58396913d0fb40ec5aa026be46eef..2cf71da03575c3af72eae4ccfc9e6cba364c24ca 100644 (file)
@@ -82,6 +82,7 @@
 <script type="text/javascript" src="view/theme/frio/frameworks/jsmart/jsmart.custom.js"></script>
 <script type="text/javascript" src="view/theme/frio/frameworks/jquery-scrollspy/jquery-scrollspy.js"></script>
 <script type="text/javascript" src="view/theme/frio/frameworks/autosize/autosize.min.js"></script>
+<script type="text/javascript" src="view/theme/frio/frameworks/sticky-kit/jquery.sticky-kit.min.js"></script>
 
 {{* own js files *}}
 <script type="text/javascript" src="view/theme/frio/js/theme.js"></script>