optimize floating sidebar mode for small screens

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 %}