From 5bf278298b5e2ec1c1c65147004dd1c5eafee743 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Wed, 5 Oct 2016 12:22:27 +0200
Subject: [PATCH] fixed navbar on sceens smaller than 1000px

---
 app/assets/stylesheets/extend/bootstrap.scss |  43 +++++++
 app/views/shared/_navigation.html.erb        | 126 +++++++++----------
 2 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss
index 4159a13b1..f65cd2ee8 100644
--- a/app/assets/stylesheets/extend/bootstrap.scss
+++ b/app/assets/stylesheets/extend/bootstrap.scss
@@ -57,3 +57,46 @@
 .result-comment .col-xs-12 {
   float: none;
 }
+
+@media (max-width: 1000px) {
+  .navbar-header {
+    float: none;
+  }
+  .navbar-left,.navbar-right {
+    float: none !important;
+  }
+  .navbar-toggle {
+    display: block;
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+  }
+  .navbar-collapse {
+    border-top: 1px solid transparent;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+  }
+  .navbar-fixed-top {
+    top: 0;
+    border-width: 0 0 1px;
+  }
+  .navbar-collapse.collapse {
+    display: none!important;
+  }
+  .navbar-nav {
+    float: none!important;
+    margin-top: 7.5px;
+  }
+  .navbar-nav>li {
+    float: none;
+  }
+  .navbar-nav>li>a {
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+  .collapse.in{
+    display:block !important;
+  }
+  .container {
+    width: 100%;
+  }
+}
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index e00830dc6..325b9294f 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -28,95 +28,93 @@
         <li>
           <a href="<%= projects_path %>">
             <span class="glyphicon glyphicon-home"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.projects') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.projects') %></span>
           </a>
         </li>
         <li>
           <a href="<%= protocols_path %>">
             <span class="glyphicon glyphicon-list-alt"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.protocols') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
           </a>
         </li>
 <% if false  %>
         <li>
           <a href="#">
             <span class="glyphicon glyphicon-calendar"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.calendar') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.calendar') %></span>
           </a>
         </li>
 <% end %>
         <li>
           <a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
             <span class="glyphicon glyphicon-equalizer"></span>
-            <span class="visible-xs-inline"><%= t('nav.label.activities') %></span>
+            <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.activities') %></span>
           </a>
         </li>
       </ul>
 
-      <div>
-        <!-- profile info -->
-        <ul class="nav navbar-nav navbar-right">
-          <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"><%= t('nav.user.settings') %></span></li>
-              <li class="notifications-dropdown-footer">link to method goes here</li>
-            </ul>
-          </li>
-          <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'), TUTORIALS_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li>
-              <li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
-            </ul>
-          </li>
+      <!-- profile info -->
+      <ul class="nav navbar-nav navbar-right">
+        <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"><%= t('nav.user.settings') %></span></li>
+            <li class="notifications-dropdown-footer">link to method goes here</li>
+          </ul>
+        </li>
+        <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'), TUTORIALS_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li>
+            <li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
+          </ul>
+        </li>
 
 
-          <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>
-            </ul>
-          </li>
-        </ul>
+        <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>
+          </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" maxlength="50" 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>
+      <!-- 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" maxlength="50" 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>
-        <% end %>
-      </div>
+        </div>
+      <% end %>
     </div>
     <% end %>