From c642e208dd88113c855d39694dd263bb4917940a Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Fri, 21 Oct 2016 09:33:18 +0200
Subject: [PATCH] styled global team switch and search [fixes SCI-593]

---
 app/assets/stylesheets/themes/scinote.scss |  17 +-
 app/views/shared/_navigation.html.erb      | 200 ++++++++++++++-------
 2 files changed, 147 insertions(+), 70 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index fd4050810..7e29049dd 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -554,10 +554,25 @@ a[data-toggle="tooltip"] {
   }
 }
 
-// Global team switch
+.search-dropdown {
+  padding-right: 25px;
+  width: 250px;
+
+  input {
+    width: 230px;
+  }
+}
+
+ // Global team switch
 #team-switch {
+  border-left: 1px solid $color-alto;
+  border-right: 1px solid $color-alto;
   word-wrap: break-word;
 
+  .dropdown-menu {
+    width: 100%;
+  }
+
   i {
     margin-right: 5px;
   }
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index 17f79fa50..791d55719 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -55,55 +55,16 @@
 
       <!-- profile info -->
       <ul class="nav navbar-nav navbar-right">
-        <!-- notifications -->
-        <li class="dropdown">
-          <a href="#"
-             id="notifications-dropdown"
-             class="dropdown-toggle"
-             data-toggle="dropdown"
-             role="button"
-             aria-haspopup="true"
-             aria-expanded="false"
-             data-href="<%= recent_notifications_url(current_user) %>">
-            <%= fa_icon 'bell'%>
-            <span id="count-notifications"
-                  data-href="<%= unseen_notification_url(current_user) %>"></span>
-          </a>
-          <ul class="dropdown-menu dropdown-notifications">
-            <li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= link_to t('nav.user.settings'), preferences_path %></span></li>
-            <li class="notifications-no-recent"><em><%= t('notifications.no_recent') %></em></li>
-            <li class="notifications-dropdown-footer"><%= link_to t('notifications.show_all'), notifications_path %></li>
-          </ul>
-        </li>
-
-        <!-- help -->
-        <li class="dropdown">
-          <a href="#" id="help-link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-            <span class="glyphicon glyphicon-info-sign"></span>
-          </a>
-          <ul class="dropdown-menu">
-            <li><%= link_to t('nav.help.tutorials'),
-                              Constants::TUTORIALS_URL,
-                              target: "_blank" %></li>
-            <li><%= link_to t('nav.help.faq'),
-                              Constants::FAQ_URL,
-                              target: "_blank" %></li>
-            <li><%= link_to t('nav.help.support'),
-                              Constants::SUPPORT_URL,
-                              target: "_blank" %></li>
-            <li><%= link_to t('nav.help.plans'),
-                              Constants::PLANS_URL,
-                              target: "_blank" %></li>
-            <li><%= link_to t('nav.help.contact'),
-                              Constants::CONTACT_URL,
-                              target: "_blank" %></li>
-          </ul>
-        </li>
 
         <!-- Global team switch -->
         <% if current_user.organizations.length > 0 %>
         <li class="dropdown" id="team-switch">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+          <a href="#"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false">
             <%= fa_icon 'users' %>
             <span>
               <%= truncate_organization_name(current_organization.name) %>
@@ -112,8 +73,8 @@
 
           <ul class="dropdown-menu ">
             <%= form_for(current_user,
-                        url: user_current_organization_path,
-                        method: :post) do |f| %>
+                         url: user_current_organization_path,
+                         method: :post) do |f| %>
               <%= hidden_field(:user, :current_organization_id) %>
               <% current_user.organizations.each do |org| %>
                 <% next unless org != current_organization %>
@@ -136,37 +97,138 @@
         </li>
         <% end %>
 
-        <!-- greetings -->
+        <!-- search -->
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-            <span><%= t('nav.user_greeting', full_name: current_user.full_name) %></span>
-            <%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
+          <a href="#"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false">
+            <span class="glyphicon glyphicon-search"></span>
+          </a>
+          <ul class="dropdown-menu search-dropdown">
+            <li>
+              <!-- search form -->
+              <%= form_tag search_path,
+                           method: :get,
+                           id: 'search-bar',
+                           class: 'navbar-form navbar-right',
+                           role: 'search' do %>
+                <div class="form-group">
+                  <div class="input-group">
+                    <input class="form-control"
+                           type="text"
+                           name="q"
+                           placeholder="<%= t('nav.search') %>"
+                           autofocus>
+                     <span class="input-group-btn visible-xs visible-sm">
+                      <button id="search-button"
+                              class="btn btn-default"
+                              type="submit">
+                        <span class="glyphicon glyphicon-menu-right"></span>
+                      </button>
+                    </span>
+                  </div>
+                </div>
+              <% end %>
+            </li>
+          </ul>
+        </li>
+
+        <!-- notifications -->
+        <li class="dropdown">
+          <a href="#"
+             id="notifications-dropdown"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false"
+             data-href="<%= recent_notifications_url(current_user) %>">
+            <%= fa_icon 'bell'%>
+            <span id="count-notifications"
+                  data-href="<%= unseen_notification_url(current_user) %>">
+            </span>
+          </a>
+          <ul class="dropdown-menu dropdown-notifications">
+            <li class="notifications-dropdown-header">
+              <span><%= t('notifications.title') %></span>
+              <span class="pull-right">
+                <%= link_to t('nav.user.settings'), preferences_path %>
+              </span>
+            </li>
+            <li class="notifications-no-recent">
+              <em><%= t('notifications.no_recent') %></em>
+            </li>
+            <li class="notifications-dropdown-footer">
+              <%= link_to t('notifications.show_all'), notifications_path %>
+            </li>
+          </ul>
+        </li>
+
+        <!-- help -->
+        <li class="dropdown">
+          <a href="#"
+             id="help-link"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false">
+            <span class="glyphicon glyphicon-info-sign"></span>
           </a>
           <ul class="dropdown-menu">
-            <li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
-            <li><%= link_to t('nav.user.settings'), preferences_path %></li>
+            <li><%= link_to t('nav.help.tutorials'),
+                              Constants::TUTORIALS_URL,
+                              target: "_blank" %></li>
+            <li><%= link_to t('nav.help.faq'),
+                              Constants::FAQ_URL,
+                              target: "_blank" %></li>
+            <li><%= link_to t('nav.help.support'),
+                              Constants::SUPPORT_URL,
+                              target: "_blank" %></li>
+            <li><%= link_to t('nav.help.plans'),
+                              Constants::PLANS_URL,
+                              target: "_blank" %></li>
+            <li><%= link_to t('nav.help.contact'),
+                              Constants::CONTACT_URL,
+                              target: "_blank" %></li>
+          </ul>
+        </li>
+
+        <!-- greetings -->
+        <li class="dropdown">
+          <a href="#"
+             class="dropdown-toggle"
+             data-toggle="dropdown"
+             role="button"
+             aria-haspopup="true"
+             aria-expanded="false">
+            <span>
+              <%= t('nav.user_greeting', full_name: current_user.full_name) %>
+            </span>
+            <%= image_tag avatar_path(current_user, :icon_small),
+                          class: "avatar" %>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <%= link_to t('nav.user.profile'), edit_user_registration_path %>
+            </li>
+            <li>
+              <%= link_to t('nav.user.settings'), preferences_path %>
+            </li>
             <li role="separator" class="divider"></li>
-            <li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
+            <li>
+              <%= link_to t('nav.user.logout'),
+                          destroy_user_session_path,
+                          method: :delete %>
+            </li>
           </ul>
         </li>
       </ul>
-
-      <!-- search form -->
-      <%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
-        <div class="form-group">
-          <div class="input-group">
-            <input class="form-control" type="text" name="q" placeholder="<%= t('nav.search') %>">
-            <span class="input-group-btn">
-              <button id="search-button" class="btn btn-default" type="submit">
-                <span class="glyphicon glyphicon-search"></span>
-              </button>
-            </span>
-          </div>
-        </div>
-      <% end %>
     </div>
     <% end %>
-
   </div>
 </nav>
 <div id="loading-animation"></div>