Fixes to room search (#2343)

app/assets/javascripts/room.js

@@ -352,7 +352,11 @@ function checkIfAutoJoin() {
 }
 
 function filterRooms() {
-  const search_term = $('#room-search').val().toLowerCase(),
+  let search = $('#room-search').val()
+
+  if (search == undefined) { return }
+
+  let search_term = search.toLowerCase(),
         rooms = $('#room_block_container > div:not(:last-child)');
         clear_room_search = $('#clear-room-search');
 
@@ -367,3 +371,8 @@ function filterRooms() {
     room.style.display = (text.toLowerCase().indexOf(search_term) < 0) ? 'none' : 'block';
   })
 }
+
+function clearRoomSearch() {
+  $('#room-search').val(''); 
+  filterRooms()
+}

app/assets/stylesheets/admins.scss

@@ -24,7 +24,7 @@
   }
 }
 
-#clear-search, #clear-room-search {
+#clear-search {
   z-index: 9;
   position: absolute;
   right: 55px;
@@ -35,10 +35,6 @@
   }
 }
 
-.room-search {
-  margin: 50px 0 25px 0;
-}
-
 .tag i {
   color: white !important;
 }

app/assets/stylesheets/rooms.scss

@@ -133,3 +133,14 @@
   text-overflow: ellipsis;
   padding-right: 75px;
 }
+
+#clear-room-search {
+  z-index: 9;
+  position: absolute;
+  right: 15px;
+  top: 8px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

app/views/rooms/show.html.erb

@@ -21,7 +21,7 @@
 <% end %>
 <div class="background pb-1">
   <div class="container">
-    <div class="row pt-7 pt-sm-9">
+    <div class="row pt-7 pt-sm-9 mb-7">
       <div class="col-lg-9 col-sm-12">
         <div id="room-title" class="display-3 form-inline <%= 'edit_hover_class' if current_user.main_room != @room %>" data-path="<%= update_settings_path(@room) %>">
            <h1 contenteditable=false id="user-text" class="display-3 text-left mb-3 font-weight-400"><%= title(@room.name) %></h1>
@@ -82,21 +82,19 @@
       </div>
     </div>
 
-    <% if current_user.ordered_rooms.length > 6 %>
-      <div class="input-group room-search">
-        <input id="room-search" type="text" class="form-control" placeholder="<%= t("room.search") %>" onChange="filterRooms()" onKeyUp="filterRooms()"></input>
-        <span id="clear-room-search" class="text-primary" onclick="$('#room-search').val(''); filterRooms()">
-          <i class="fas fa-times"></i>
-        </span>
-        <span class="input-group-append">
-          <button class="btn btn-outline-primary" type="button" onclick="filterRooms()">
+    <% if current_user.ordered_rooms.length > 5 %>
+      <div class="input-icon invite-link-input mb-3">
+        <span class="input-icon-addon">
           <i class="fas fa-search"></i>
-          </button>
+          </span>
+        <input id="room-search" type="text" placeholder="<%= t("room.search") %>" class="form-control w-100" onChange="filterRooms()" onKeyUp="filterRooms()">
+        <span id="clear-room-search" class="text-primary" onclick="clearRoomSearch()">
+          <i class="fas fa-times"></i>
         </span>
       </div>
     <% end %>
 
-    <div id="room_block_container" class="row pt-7 pb-5">
+    <div id="room_block_container" class="row mb-5">
       <% if current_user.role.get_permission("can_create_rooms") %>
         <% current_user.ordered_rooms.each do |room| %>
           <div class="col-lg-4 col-md-6 col-sm-12">