settings: Make settings overlay more responsive.

This doesn't completely fix settings responsiveness, but it's a big
step along the way.  Outstanding issues include:

1. When switching tabs from settings to organization, it will launch
the first item which is more annoying in this view since it brings you
into that tab. Haven’t decided on an elegant solution to this yet.

2. Sidebar scrolling doesn’t work. I have to restructure how the top
section and bottom sections of content are displayed to fix this.
Likely by enforcing min-height of 100% - bottom height on the top piece.

3. Most of it is actually reasonably responsive but some isn’t, and
should be fixed on a case-by-case.

static/js/click_handlers.js

@@ -596,8 +596,16 @@ $(function () {
         var $this = $(this);
 
         $("#settings_overlay_container .sidebar li").removeClass("active no-border");
-            $this.addClass("active");
+        $this.addClass("active").prev().addClass("no-border");
-        $this.prev().addClass("no-border");
+
+        var $settings_overlay_container = $("#settings_overlay_container");
+        $settings_overlay_container.find(".right").addClass("show");
+        $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
+    });
+
+    $(".settings-header.mobile .icon-vector-chevron-left").on("click", function () {
+        $("#settings_page").find(".right").removeClass("show");
+        $(this).parent().removeClass("slide-left");
     });
 
     $("#settings_overlay_container .sidebar").on("click", "li[data-section]", function () {

static/styles/settings.css

@@ -795,6 +795,18 @@ input[type=checkbox].inline-block {
     border-bottom: 1px solid #ddd;
 }
 
+#settings_page .settings-header.mobile {
+    display: none;
+    border-bottom: 1px solid #ddd;
+}
+
+.settings-header.mobile .icon-vector-chevron-left {
+    float: left;
+    position: relative;
+    top: 14px;
+    left: 10px;
+}
+
 #settings_page .content-wrapper #settings_content {
     position: relative;
     width: 100%;
@@ -802,6 +814,7 @@ input[type=checkbox].inline-block {
 
     float: left;
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 #settings_page .table-striped thead th {
@@ -1064,6 +1077,24 @@ input[type=text]#settings_search {
     }
 }
 
+@media (max-width: 700px) {
+    #settings_page .settings-header.mobile {
+        display: block;
+    }
+
+    #settings_page .content-wrapper .settings-header {
+        display: none;
+    }
+
+    #settings_page .content-wrapper #settings_content {
+        height: 100%;
+    }
+
+    #settings_page .content-wrapper.right {
+        top: 47px;
+    }
+}
+
 @media (max-width: 953px) {
     #settings_content .warning {
         display: none;

static/styles/subscriptions.css

@@ -430,9 +430,8 @@ form#add_new_subscription {
     border-bottom: 1px solid #ddd;
 }
 
-.subscriptions-header .icon-vector-chevron-left {
+.subscriptions-header .icon-vector-chevron-left,
-    display: none;
+#settings_overlay_container .settings-header.mobile .icon-vector-chevron-left {
-
     position: relative;
     transform: translate(-50px, 0px);
     opacity: 0;
@@ -446,7 +445,8 @@ form#add_new_subscription {
     transition: all 0.3s ease;
 }
 
-.subscriptions-header.slide-left .icon-vector-chevron-left {
+.subscriptions-header.slide-left .icon-vector-chevron-left,
+#settings_overlay_container .settings-header.mobile.slide-left .icon-vector-chevron-left {
     transform: translate(-0px, 0px);
     opacity: 1;
 }
@@ -956,7 +956,9 @@ form#add_new_subscription {
     }
 
     #subscription_overlay .left,
-    #subscription_overlay .right {
+    #subscription_overlay .right,
+    #settings_page .left,
+    #settings_page .right {
         position: absolute;
         display: block;
         margin: 0;
@@ -974,7 +976,8 @@ form#add_new_subscription {
         text-align: left;
     }
 
-    #subscription_overlay .right {
+    #subscription_overlay .right,
+    #settings_page .right {
         position: absolute;
         left: 101%;
 
@@ -987,7 +990,8 @@ form#add_new_subscription {
         z-index: 10;
     }
 
-    #subscription_overlay .right.show {
+    #subscription_overlay .right.show,
+    #settings_page .right.show {
         left: 0%;
     }
 

templates/zerver/settings_overlay.html

@@ -1,5 +1,13 @@
 <div id="settings_page" class="new-style overlay-content">
-    <div class="sidebar">
+    <div class="settings-header mobile">
+        <div class="icon-vector-chevron-left"></div>
+        <h1>{{ _('Settings') }}</h1>
+        <div class="exit">
+            <span class="exit-sign">&times;</span>
+        </div>
+        <div class="clear-float"></div>
+    </div>
+    <div class="sidebar left">
         <div class="sidebar-list dark-grey small-text">
             <div class="center tab-container"></div>
             <ul class="settings-list">
@@ -88,7 +96,7 @@
             </ul>
         </div>
     </div>
-    <div class="content-wrapper">
+    <div class="content-wrapper right">
         <div class="settings-header">
             <h1>{{ _('Settings') }}</h1>
             <div class="exit">

tools/lib/find_add_class.py

@@ -14,21 +14,22 @@ GENERIC_KEYWORDS = [
     'disabled',
     'error',
     'expanded',
+    'fade-out',
+    'first',
     'hide',
     'in',
     'show',
     'notdisplayed',
     'popover',
     'no-border',
+    'second',
+    'selected',
+    'slide-left',
     'success',
     'text-error',
     'warning',
     'zoom-in',  # TODO: clean these up, they are confusing
     'zoom-out',
-    'first',
-    'second',
-    'selected',
-    'fade-out',
 ]
 
 def raise_error(fn, i, line):