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

---
 setup.py                            |  2 +-
 weblog/static/weblog/css/weblog.css |  9 +++++++++
 weblog/static/weblog/js/weblog.js   | 28 +++++++++++++++-------------
 weblog/templates/weblog/weblog.html | 12 ++++++++++++
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/setup.py b/setup.py
index edbc79d..40e12d0 100755
--- a/setup.py
+++ b/setup.py
@@ -10,7 +10,7 @@ os.chdir(os.path.normpath(os.path.join(os.path.abspath(__file__), os.pardir)))
 
 setup(
     name='w3blog',
-    version='0.5-testing.1',
+    version='0.5-testing.2',
     packages=find_packages(),
     include_package_data=True,
     license='BSD License',
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");
+        }
     }
 }
 
diff --git a/weblog/templates/weblog/weblog.html b/weblog/templates/weblog/weblog.html
index e1907c6..25ef953 100755
--- a/weblog/templates/weblog/weblog.html
+++ b/weblog/templates/weblog/weblog.html
@@ -51,6 +51,18 @@
             sidebar_filler.style.height = "10px";
             window.addEventListener("scroll", floatSidebar);
         });
+        window.addEventListener("resize", function(){
+            if (screen.width > 760){
+                var sb_width = document.querySelector(".weblog-sidebar.floating-sidebar").offsetWidth;
+                var sidebar_filler = document.querySelector(".sidebar-filler");
+                sidebar_filler.style.width = sb_width+"px";
+                sidebar_filler.style.height = "10px";
+            }
+            else{
+                var sidebar_filler = document.querySelector(".sidebar-filler");
+                sidebar_filler.style.width = 0;
+            }
+        });
     </script>
 {% endif %}
 {% endblock %}
-- 
cgit v1.2.3