Merge pull request #3209 from Antrikshy/sidebar-responsive-design

Sidebar now responsive as ever
learningequality · Mar 10, 2015 · c46aedc · c46aedc
2 parents 3d09e8a + 049ebeb
commit c46aedc
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 26 deletions.
diff --git a/kalite/distributed/hbtemplates/topics/sidebar.handlebars b/kalite/distributed/hbtemplates/topics/sidebar.handlebars
@@ -2,7 +2,9 @@
 
 <nav class="sidebar-panel" role="navigation">
     {{!-- TODO: Replace icon with better chevron that looks different from the one in sidebar-tab --}}
-    <div class="sidebar-back"><span class="icon icon-arrow-left2"></span></div>
+    <div class="sidebar-back">
+        <span class="icon icon-arrow-left2"></span>
+    </div>
     <div class="sidebar-content"></div>
 </nav>
 

diff --git a/kalite/distributed/static/css/distributed/sidebar.css b/kalite/distributed/static/css/distributed/sidebar.css
@@ -1,5 +1,5 @@
 .sidebar-icon {
-    font-size: 10pt;
+    font-size: 0.7em;
     padding-right: 10px;
     background-color: rgba(219, 219, 219, 0.19);
     border-radius: 3px;
@@ -31,6 +31,7 @@ Nav Panel
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     top: 0;
     bottom: 0;
+    font-size: 100%;
 }
 
 div.fade {
@@ -92,7 +93,7 @@ div.fade {
     background: #5AA685;
     color: #fff;
     font-weight: bold;
-    font-size: 30px;
+    font-size: 1.9em;
     padding: 30px 10px;
     padding-left: 14px;
     border-color: rgba(0, 0, 0, 0.5);
@@ -122,19 +123,19 @@ div.fade {
     padding-top: 20px;
     padding-bottom: 20px;
     border-left: 2px solid #587448;
-    font-size: 18px;
+    font-size: 2em;
     font-weight: bold;
     color: #CCC;
 }
 
 .sidebar-back {
     height: 100%;
-    width: 45px;
+    width: 2em;
     padding-top: 100px;
     text-align: center;
     color: #fff;
     background-color: #467471;
-    font-size: 24px;
+    font-size: 1.5em;
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     position: absolute;
     z-index: 10000;
@@ -144,7 +145,6 @@ div.fade {
 .topic-container-inner {
     float: left;
     width: 200px;
-    /*max-width: 25%;*/
     border-right: 1px solid rgba(0, 0, 0, 0.3);
 
 }
@@ -259,3 +259,39 @@ div.fade {
     display:table-cell;
     vertical-align:middle;
 }
+
+@media only screen and (min-width: 500px) {
+    .sidebar-panel { 
+        font-size: 85%;
+    }
+    .topic-container-inner:last-child {
+        width: 300px;
+    }
+}
+
+@media only screen and (min-width: 720px) {
+    .sidebar-panel { 
+        font-size: 90%;
+    }
+    .topic-container-inner:last-child {
+        width: 300px;
+    }
+}
+
+@media only screen and (min-width: 1000px) {
+    .sidebar-panel { 
+        font-size: 100%;
+    }
+    .topic-container-inner:last-child {
+        width: 400px;
+    }
+}
+
+@media only screen and (min-width: 1300px) {
+    .sidebar-panel { 
+        font-size: 105%;
+    }
+    .topic-container-inner:last-child {
+        width: 400px;
+    }
+}
diff --git a/kalite/distributed/static/js/distributed/topics/views.js b/kalite/distributed/static/js/distributed/topics/views.js
@@ -57,6 +57,17 @@ window.SidebarView = BaseView.extend({
     initialize: function(options) {
         var self = this;
 
+        // Fancy algorithm to run a resize sidebar when window width 
+        // changes significantly (100px steps) to avoid unnecessary computation
+        var windowWidth = $(window).width();
+        $(window).on("resize", function() {
+            newWindowWidth = $(window).width();
+            if (Math.floor(newWindowWidth/100) != Math.floor(windowWidth/100)) {
+                self.resize_sidebar();
+                windowWidth = $(window).width();
+            }
+        });
+
         this.entity_key = options.entity_key;
         this.entity_collection = options.entity_collection;
 
@@ -104,28 +115,33 @@ window.SidebarView = BaseView.extend({
     },
 
     resize_sidebar: function() {
-        if ($(window).width() < 1260)
-            this.resize_for_narrow();
+        if (this.state_model.get("open")) {
+            if ($(window).width() < 1260)
+                this.resize_for_narrow();
 
-        else
-            this.resize_for_wide();
+            else
+                this.resize_for_wide();
+        }
     },
 
     resize_for_narrow: _.debounce(function() {
         var current_level = this.state_model.get("current_level");
         var column_width = this.$(".topic-container-inner").width();
-        var last_column_width = 400;
+        var last_column_width = this.$(".topic-container-inner:last-child").width();
         // Hack to give the last child of .topic-container-inner to be 1.5 times the 
         // width of their parents. Also, sidebar overflow out of the left side of screen
         // is computed and set here.
 
         // THE magic variable that controls number of visible panels
-        var numOfPanelsToShow = 3;
+        var numOfPanelsToShow = 4;
+
+        if ($(window).width() < 1120)
+            numOfPanelsToShow = 3;
 
         if ($(window).width() < 920)
             numOfPanelsToShow = 2;
 
-        if ($(window).width() < 720)
+        if ($(window).width() < 620)
             numOfPanelsToShow = 1;
 
         // Used to get left value in number form
@@ -137,13 +153,13 @@ window.SidebarView = BaseView.extend({
         var sidebarPanelNewLeft = -(column_width * (current_level - numOfPanelsToShow)) + this.sidebarBack.width();
         if (sidebarPanelNewLeft > 0) sidebarPanelNewLeft = 0;
 
-        // Signature color flash
+        // Signature color flash (also hides a slight UI glitch)
         var originalBackColor = this.sidebarBack.css('background-color');
         this.sidebarBack.css('background-color', this.sidebarTab.css('background-color')).animate({'background-color': originalBackColor});
 
-        var thisTemp = this;
+        var self = this;
         this.sidebar.animate({"left": sidebarPanelNewLeft}, 115, function() {
-            thisTemp.set_sidebar_back();
+            self.set_sidebar_back();
         });
 
         this.sidebarTab.animate({left: this.sidebar.width() + sidebarPanelNewLeft}, 115);
@@ -156,9 +172,11 @@ window.SidebarView = BaseView.extend({
         var last_column_width = 400;
 
         this.width = (current_level-1) * column_width + last_column_width + 10;
-        this.$(".sidebar-panel").width(this.width);
-        this.$(".sidebar-tab").css({left: this.width});
-        this.update_sidebar_visibility();
+        this.sidebar.width(this.width);
+        this.sidebar.css({left: 0});
+        this.sidebarTab.css({left: this.width});
+
+        this.set_sidebar_back();
     }, 100),
 
     check_external_click: function(ev) {
@@ -335,13 +353,12 @@ window.TopicContainerInnerView = BaseView.extend({
         var video_ids = $.map(this.$(".icon-Video[data-content-id]"), function(el) { return $(el).data("content-id"); });
         if (video_ids.length > 0) {
             videologs = new VideoLogCollection([], {content_ids: video_ids});
-            videologs.fetch()
-                .then(function() {
-                    videologs.models.forEach(function(model) {
-                        var newClass = model.get("complete") ? "complete" : "partial";
-                        self.$("[data-video-id='" + model.get("video_id") + "']").removeClass("complete partial").addClass(newClass);
-                    });
+            videologs.fetch().then(function() {
+                videologs.models.forEach(function(model) {
+                    var newClass = model.get("complete") ? "complete" : "partial";
+                    self.$("[data-video-id='" + model.get("video_id") + "']").removeClass("complete partial").addClass(newClass);
                 });
+            });
         }
 
         // load progress data for all exercises