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 %>