From 2437c7e57806ef1d7ba80431b0da67c28a3e94df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?=
 <contact@yaroslavps.com>
Date: Tue, 9 Oct 2018 23:36:17 +0300
Subject: optimize floating sidebar mode for small screens

---
 weblog/static/weblog/css/weblog.css |  9 +++++++++
 weblog/static/weblog/js/weblog.js   | 28 +++++++++++++++-------------
 2 files changed, 24 insertions(+), 13 deletions(-)

(limited to 'weblog/static')

diff --git a/weblog/static/weblog/css/weblog.css b/weblog/static/weblog/css/weblog.css
index cd94bd8..52d396b 100755
--- a/weblog/static/weblog/css/weblog.css
+++ b/weblog/static/weblog/css/weblog.css
@@ -366,4 +366,13 @@ hr{
         border: 0;
         content: " ";
     }
+
+    .weblog-sidebar.floating-sidebar.float{
+        position: fixed;
+        top: 0;
+    }
+    .sidebar-filler{
+        width: 0;
+        display: none;
+    }
 }
diff --git a/weblog/static/weblog/js/weblog.js b/weblog/static/weblog/js/weblog.js
index 3e9ceba..b7e6ba3 100755
--- a/weblog/static/weblog/js/weblog.js
+++ b/weblog/static/weblog/js/weblog.js
@@ -13,19 +13,21 @@ function toggleNode(caller){
 }
 
 function floatSidebar(){
-    var sidebar = document.querySelector(".weblog-sidebar.floating-sidebar");
-    var sidebar_filler = document.querySelector(".sidebar-filler");
-    var blog_content = document.querySelector(".blog-content");
-    var offset = document.querySelector("nav").offsetHeight +
-        document.querySelector(".breadcrumb").offsetHeight;
-    if((document.body.scrollTop > offset || document.documentElement.scrollTop > offset)){
-        sidebar.classList.add("float");
-        sidebar_filler.classList.remove("hidden");
-        sidebar.style.left = blog_content.offsetLeft + blog_content.offsetWidth + "px";
-    }
-    else{
-        sidebar.classList.remove("float");
-        sidebar_filler.classList.add("hidden");
+    if (screen.width > 760){
+        var sidebar = document.querySelector(".weblog-sidebar.floating-sidebar");
+        var sidebar_filler = document.querySelector(".sidebar-filler");
+        var blog_content = document.querySelector(".blog-content");
+        var offset = document.querySelector("nav").offsetHeight +
+            document.querySelector(".breadcrumb").offsetHeight;
+        if((document.body.scrollTop > offset || document.documentElement.scrollTop > offset)){
+            sidebar.classList.add("float");
+            sidebar_filler.classList.remove("hidden");
+            sidebar.style.left = blog_content.offsetLeft + blog_content.offsetWidth + "px";
+        }
+        else{
+            sidebar.classList.remove("float");
+            sidebar_filler.classList.add("hidden");
+        }
     }
 }
 
-- 
cgit v1.2.3