optimize floating sidebar mode for small screens

3 files changed, 36 insertions, 13 deletions

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