fixes padding on mobile, added separator on team switch dropdown, focus search input

app/assets/javascripts/navigation.js

@@ -94,9 +94,20 @@
       });
   }
 
+  function focusSearchInput() {
+    var searchIco = $('#search-ico');
+    searchIco
+      .on('shown.bs.dropdown', function() {
+        searchIco
+          .find('input.form-control')
+          .focus();
+      });
+  }
+
   // init
   loadDropdownNotifications();
   loadUnseenNotificationsNumber();
   toggleNotificationBellPosition();
+  focusSearchInput();
   initGlobalSwitchForm();
 })();

app/assets/stylesheets/themes/scinote.scss

@@ -563,6 +563,20 @@ a[data-toggle="tooltip"] {
   }
 }
 
+@media(max-width:1000px) {
+  .search-dropdown {
+    width: 270px;
+
+    .form-group {
+      padding-left: 15px;
+    }
+  }
+}
+
+@media(max-width:425px) {
+  .search-dropdown {}
+}
+
  // Global team switch
 #team-switch {
   border-left: 1px solid $color-alto;

app/views/shared/_navigation.html.erb

@@ -87,6 +87,7 @@
                 </li>
               <% end %>
             <% end %>
+            <li role="separator" class="divider"></li>
             <li>
               <%= link_to new_organization_path do %>
                 <span class="glyphicon glyphicon-plus"></span>
@@ -98,7 +99,8 @@
         <% end %>
 
         <!-- search -->
-        <li class="dropdown">
+        <li class="dropdown"
+            id="search-ico">
           <a href="#"
              class="dropdown-toggle"
              data-toggle="dropdown"
@@ -120,8 +122,7 @@
                     <input class="form-control"
                            type="text"
                            name="q"
-                           placeholder="<%= t('nav.search') %>"
-                           autofocus>
+                           placeholder="<%= t('nav.search') %>">
                      <span class="input-group-btn visible-xs visible-sm">
                       <button id="search-button"
                               class="btn btn-default"