Make subscriptions page responsive.

This makes the subscriptions page responsive by having the settings tab
slide over when a user taps on a stream, giving almost the whole screen
to view the settings.

static/js/subs.js

@@ -946,8 +946,8 @@ $(function () {
             $("#add_new_stream_title, .settings, #stream-creation").hide();
         },
         stream_creation: function () {
+            $("#stream_settings_title, .subscriptions-container .settings, .nothing-selected").hide();
             $("#stream-creation, #add_new_stream_title").show();
-            $("#stream_settings_title, .settings, .nothing-selected").hide();
         },
         settings: function () {
             $(".settings, #stream_settings_title").show();
@@ -974,7 +974,17 @@ $(function () {
         var stream = $.trim($("#search_stream_name").val());
         $('#create_stream_name').val(stream);
         show_new_stream_modal();
-        $('#create_stream_name').focus();
+
+        // at less than 700px we have a @media query that when you tap the
+        // #create_stream_button, the stream prompt slides in. However, when you
+        // focus  the button on that page, the entire app view jumps over to
+        // the other tab, and the animation breaks.
+        // it is unclear whether this is a browser bug or "feature", however what
+        // is clear is that this shoudn't be touched unless you're also changing
+        // the mobile @media query at 700px.
+        if (window.innerWidth > 700) {
+            $('#create_stream_name').focus();
+        }
     });
 
     $('body').on('change', '#user-checkboxes input, #make-invite-only input', update_announce_stream_state);
@@ -1191,6 +1201,16 @@ $(function () {
         $('#empty_narrow_message').show();
     });
 
+    $("#subscriptions_table").on("click", ".stream-row, #create_stream_button", function () {
+        $(".right").addClass("show");
+        $(".subscriptions-header").addClass("slide-left");
+    });
+
+    $("#subscriptions_table").on("click", ".icon-vector-chevron-left", function () {
+        $(".right").removeClass("show");
+        $(".subscriptions-header").removeClass("slide-left");
+    });
+
     $("#subscriptions_table").on("click", ".sub_setting_checkbox", function (e) {
         var control = $(e.target).closest('.sub_setting_checkbox').find('.sub_setting_control');
         // A hack.  Don't change the state of the checkbox if we

static/styles/subscriptions.css

@@ -388,6 +388,31 @@ form#add_new_subscription {
     border-bottom: 1px solid #ddd;
 }
 
+.subscriptions-header .icon-vector-chevron-left {
+    position: relative;
+    transform: translate(-50px, 0px);
+    opacity: 0;
+    color: #aaa;
+
+    float: left;
+    padding: 5px 10px;
+
+    cursor: pointer;
+
+    transition: all 0.3s ease;
+}
+
+.subscriptions-header.slide-left .icon-vector-chevron-left {
+    transform: translate(-0px, 0px);
+    opacity: 1;
+}
+
+.subscriptions-header .subscriptions-title {
+    display: inline-block;
+    transition: all 0.3s ease;
+    transform: translate(-13px, 0px);
+}
+
 .subscriptions-container .exit {
     font-weight: 400;
     position: absolute;
@@ -699,6 +724,7 @@ form#add_new_subscription {
 
 #subscription_overlay .stream-header .large-icon {
     display: inline-block;
+    vertical-align: top;
     margin-right: 5px;
     font-size: 1.5em;
 }
@@ -892,21 +918,44 @@ form#add_new_subscription {
 }
 
 @media (max-width: 700px) {
+    .subscriptions-container {
+        position: relative;
+    }
+
     #subscription_overlay .left,
     #subscription_overlay .right {
+        position: absolute;
         display: block;
+        margin: 0;
         width: 100%;
+        height: calc(100% - 45px);
+
+        border: none;
     }
 
-    #subscription_overlay .left {
-        overflow: auto;
-        height: 30%;
+    .subscriptions-container {
+        overflow: hidden;
+    }
+
+    .subscriptions-container .search-container {
+        text-align: left;
     }
 
     #subscription_overlay .right {
-        overflow: auto;
-        height: calc(70% - 45px);
+        position: absolute;
+        left: 101%;
+
+        top: 45px;
         border-top: 1px solid #ddd;
+        background-color: #fff;
+        border-top: none;
+
+        transition: all 0.3s ease;
+        z-index: 10;
+    }
+
+    #subscription_overlay .right.show {
+        left: 0%;
     }
 
     #subscription_overlay .display-type {

static/templates/subscription_table_body.handlebars

@@ -2,7 +2,8 @@
     <div class="flex">
         <div class="subscriptions-container">
             <div class="subscriptions-header">
-                {{t 'Subscriptions' }}
+                <div class="icon-vector-chevron-left"></div>
+                <span class="subscriptions-title">{{t 'Subscriptions' }}</span>
                 <div class="exit">
                     <span class="exit-sign">&times;</span>
                 </div>