manage streams: Move stream filter to next line.

Previously, in narrow viewports, the "filter"
option would disappear, which was very confusing.

This commit moves the filter streams input to the
next line, making it visible at all viewport widths.

@showell modified the commit message and got Casper
tests passing.

Fixes #12898.

frontend_tests/casper_tests/05-subscriptions.js

@@ -153,11 +153,6 @@ casper.then(function () {
     // 4 users from Scotland are added.
     // 1 user, Cordelia, is added. Othello (subscribed to Scotland) is not added twice.
     casper.test.assertSelectorHasText('.subscriber-count-text', '5');
-    casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'});
-    casper.click('#add_new_subscription .create_stream_button');
-});
-casper.then(function () {
-    casper.click('#add_new_subscription .create_stream_button');
     casper.fill('form#stream_creation_form', {stream_name: '  '});
     casper.click('form#stream_creation_form button.button.sea-green');
 });
@@ -165,8 +160,6 @@ casper.then(function () {
     common.wait_for_text('#stream_name_error', 'A stream needs to have a name', function () {
         casper.test.assertTextExists('A stream needs to have a name', "Can't create a stream with an empty name");
         casper.click('form#stream_creation_form button.button.white');
-        casper.fill('form#add_new_subscription', {stream_name: '  '});
-        casper.click('#add_new_subscription .create_stream_button');
         casper.fill('form#stream_creation_form', {stream_name: 'Waseemio'});
         casper.click('form#stream_creation_form button.button.sea-green');
     });
@@ -185,15 +178,16 @@ casper.then(function () {
     });
 });
 casper.then(function () {
-    casper.fill('form#add_new_subscription', {stream_name: 'was'});
     casper.evaluate(function () {
-        $('#add_new_subscription input[type="text"]').expectOne()
+        $('#stream_filter input[type="text"]')
+            .expectOne()
+            .val('waseem')
             .trigger($.Event('input'));
     });
 });
-casper.waitForSelectorTextChange('form#add_new_subscription', function () {
-    casper.test.assertSelectorHasText('.stream-row.notdisplayed .stream-name', 'Verona', 'Verona stream not shown after filtering');
+casper.waitForSelectorTextChange('.streams-list', function () {
     casper.test.assertSelectorHasText('.stream-row .stream-name', 'Waseemio', 'Waseemio stream exists after filtering');
+    casper.test.assertSelectorHasText('.stream-row.notdisplayed .stream-name', 'Verona', 'Verona stream not shown after filtering');
     casper.test.assertSelectorDoesntHaveText('.stream-row.notdisplayed .stream-name', 'Waseemio', 'Waseemio stream shown after filtering');
 });
 

static/js/subs.js

@@ -456,7 +456,7 @@ exports.filter_table = function (query) {
 let subscribed_only = true;
 
 exports.get_search_params = function () {
-    const search_box = $("#add_new_subscription input[type='text']");
+    const search_box = $("#stream_filter input[type='text']");
     const input = search_box.expectOne().val().trim();
     const params = {
         input: input,
@@ -563,11 +563,16 @@ exports.setup_page = function (callback) {
         exports.actually_filter_streams();
         stream_create.set_up_handlers();
 
-        $("#add_new_subscription input[type='text']").on("input", function () {
+        $("#stream_filter input[type='text']").on("input", function () {
             // Debounce filtering in case a user is typing quickly
             filter_streams();
         });
 
+        $("#clear_search_stream_name").on("click", function () {
+            $("#stream_filter input[type='text']").val("");
+            filter_streams();
+        });
+
         if (callback) {
             callback();
         }

static/styles/subscriptions.scss

@@ -531,14 +531,38 @@ form#add_new_subscription {
 }
 
 #search_stream_name {
-    width: 190px;
+    width: 100%;
     padding: 3px 5px;
-    margin: 2px 0px;
+    margin: 8px 0px;
+    margin-left: 10px;
+    margin-right: -15px !important;
     display: inline-block;
     border-radius: 5px;
     box-shadow: none;
 }
 
+.stream_name_search_section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 0;
+    height: auto;
+    border-bottom: 1px solid hsl(0, 0%, 87%);
+}
+
+.streams-list {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    height: calc(100% - 85px);
+    width: 100%;
+}
+
+#clear_search_stream_name {
+    right: 5px !important;
+}
+
 .stream-title {
     font-size: 1.3em;
     font-weight: 400;
@@ -574,14 +598,6 @@ form#add_new_subscription {
     }
 }
 
-.streams-list {
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    height: calc(100% - 45px);
-    width: 100%;
-}
-
 .stream-row {
     padding: 15px 10px 11px 10px;
     border-bottom: 1px solid hsl(0, 0%, 93%);
@@ -1045,18 +1061,9 @@ ul.grey-box {
             width: calc(60% - 1px);
         }
     }
-
-    #search_stream_name {
-        width: 100px;
-        margin-top: 2px;
-        margin-bottom: 0px;
-    }
 }
 
 @media (max-width: 1033px) {
-    #search_stream_name {
-        display: none;
-    }
 
     .search-container {
         text-align: center;
@@ -1069,7 +1076,7 @@ ul.grey-box {
     }
 }
 
-@media (max-width: 700px) {
+@media (max-width: 750px) {
     .subscriptions-container {
         position: relative;
         overflow: hidden;

static/templates/subscription_table_body.hbs

@@ -11,8 +11,6 @@
             <div class="left">
                 <div class="search-container">
                     <form id="add_new_subscription" class="form-inline" action="">
-                        <input type="text" name="stream_name" id="search_stream_name"
-                          placeholder="{{t 'Filter streams' }}" value="" autocomplete="off" />
                         {{#if can_create_streams}}
                         <input type="submit" class="create_stream_button"
                           value="+" title="{{t 'Create new stream' }} (n)"/>
@@ -20,6 +18,13 @@
                         <div class="float-clear"></div>
                     </form>
                 </div>
+                <div class="input-append stream_name_search_section" id="stream_filter">
+                    <input type="text" name="stream_name" id="search_stream_name" autocomplete="off"
+                      placeholder="{{t 'Filter streams' }}" value="" form="add_new_subscription" />
+                    <button type="button" class="btn clear_search_button" id="clear_search_stream_name">
+                        <i class="fa fa-remove" aria-hidden="true"></i>
+                    </button>
+                </div>
                 <div class="streams-list" data-simplebar>
                 </div>
             </div>