Fix top nav behavior when window is narrow.
[arvados.git] / apps / workbench / app / views / layouts / application.html.erb
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta charset="utf-8">
5   <title>
6     <% if content_for? :page_title %>
7     <%= yield :page_title %> / <%= Rails.configuration.site_name %>
8     <% else %>
9     <%= Rails.configuration.site_name %>
10     <% end %>
11   </title>
12   <meta name="viewport" content="width=device-width, initial-scale=1.0">
13   <link rel="icon" href="/favicon.ico" type="image/x-icon">
14   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
15   <meta name="description" content="">
16   <meta name="author" content="">
17   <%= stylesheet_link_tag    "application", :media => "all" %>
18   <%= javascript_include_tag "application" %>
19   <%= csrf_meta_tags %>
20   <%= yield :head %>
21   <%= javascript_tag do %>
22   <%= yield :js %>
23   <% end %>
24   <style>
25     <%= yield :css %>
26     body {
27     min-height: 100%;
28     height: 100%;
29     }
30
31     body > div.container-fluid {
32     padding-top: 70px; /* 70px to make the container go all the way to the bottom of the navbar */
33     }
34     
35     body > div.container-fluid > div.col-sm-9.col-sm-offset-3 {
36     overflow: auto;
37     }
38
39     @media (max-width: 979px) { body { padding-top: 0; } }
40
41     .navbar .nav li.nav-separator > span.glyphicon.glyphicon-arrow-right {
42     padding-top: 1.25em;
43     }
44
45     /* Setting the height needs to be fixed with javascript. */
46     .dropdown-menu {
47     padding-right: 20px;
48     max-height: 440px;
49     width: 400px;
50     overflow-y: auto;
51     }
52
53     @media (min-width: 768px) {
54     .left-nav {
55     position: fixed;
56     }
57     }
58     @media (max-width: 767px) {
59     .breadcrumbs {
60     display: none;
61     }
62     }
63     .arvados-nav-container {
64     top: 70px; 
65     height: calc(100% - 70px); 
66     overflow: auto; 
67     z-index: 2;
68     }
69     .arvados-nav-active {
70     background: rgb(66, 139, 202);
71     }
72     .arvados-nav-active a {
73     color: white;
74     }
75   </style>
76 </head>
77 <body>
78
79   <div class="navbar navbar-default navbar-fixed-top">
80     <div class="container-fluid">
81       <div class="navbar-header">
82         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#workbench-navbar.navbar-collapse">
83           <span class="sr-only">Toggle navigation</span>
84           <span class="icon-bar"></span>
85           <span class="icon-bar"></span>
86           <span class="icon-bar"></span>
87         </button>
88         <a class="navbar-brand" href="/"><%= Rails.configuration.site_name rescue Rails.application.class.parent_name %></a>
89       </div>
90
91       <div class="collapse navbar-collapse" id="workbench-navbar">
92       <ul class="nav navbar-nav navbar-left breadcrumbs">
93         <% if current_user %>
94         <% if content_for?(:breadcrumbs) %>
95           <%= yield(:breadcrumbs) %>
96         <% else %>
97           <li class="nav-separator"><span class="glyphicon glyphicon-arrow-right"></span></li>
98           <li>
99             <%= link_to(
100                         controller.model_class.to_s.pluralize.underscore.gsub('_', ' '),
101                         url_for({controller: params[:controller]})) %>
102           </li>
103           <% if params[:action] != 'index' %>
104             <li class="nav-separator">
105               <span class="glyphicon glyphicon-arrow-right"></span>
106             </li>
107             <li>
108 <%= link_to controller.breadcrumb_page_name, request.fullpath %>
109             </li>
110           <% end %>
111         <% end %>
112         <% end %>
113       </ul>
114   
115       <ul class="nav navbar-nav navbar-right">
116
117         <% if current_user %>
118         <li>
119           <div class="loading" style="transform: translate(-20px,20px) scale(0.1,0.1); -ms-transform: translate(-20px,20px) scale(0.1,0.1); -webkit-transform: translate(-20px,20px) scale(0.1,0.1); display: none">
120             <%= render partial: 'loading' %>
121           </div>
122         </li>
123
124         <!-- XXX placeholder for this when search is implemented
125         <li>
126           <form class="navbar-form" role="search">
127             <div class="input-group" style="width: 220px">
128               <input type="text" class="form-control" placeholder="search">
129               <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
130             </div>
131           </form>
132         </li>
133         -->
134
135         <!-- XXX placeholder for this when persistent selection is implemented
136         <li class="dropdown">
137           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
138             <span class="glyphicon glyphicon-paperclip"></span>
139             <span class="badge badge-alert"><%= @selection_count %></span>
140             <span class="caret"></span>
141           </a>
142           <ul class="dropdown-menu" role="menu">
143               <li style="padding: 10px">No selections.</li>
144           </ul>
145         </li>        
146         -->
147
148         <li class="dropdown">
149           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
150             <span class="glyphicon glyphicon-envelope"></span>
151             <span class="badge badge-alert"><%= @notification_count %></span>
152             <span class="caret"></span>
153           </a>
154           <ul class="dropdown-menu" role="menu">
155             <% if @notifications.length > 0 %>
156               <% @notifications.each_with_index do |n, i| %>
157                 <% if i > 0 %><li class="divider"></li><% end %>
158                 <li style="padding: 10px"><%= n.call(self) %></li>
159               <% end %>
160             <% else %>
161               <li style="padding: 10px">No notifications.</li>
162             <% end %>
163           </ul>
164         </li>        
165
166         <li class="dropdown">
167           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
168             <span class="glyphicon glyphicon-user"></span><span class="caret"></span>
169           </a>
170           <ul class="dropdown-menu" role="menu">
171             <li role="presentation" class="dropdown-header"><%= current_user.email %></li>
172             <li role="presentation" class="divider"></li>
173             <li role="presentation"><a href="/authorized_keys" role="menuitem">Manage ssh keys</a></li>
174             <li role="presentation"><a href="/api_client_authorizations" role="menuitem">Manage API tokens</a></li>
175             <li role="presentation" class="divider"></li>
176             <li role="presentation"><a href="<%= logout_path %>" role="menuitem">Log out</a></li>
177           </ul>
178         </li>
179         <% else -%>
180           <li><a href="<%= $arvados_api_client.arvados_login_url(return_to: root_url) %>">Log in</a></li>
181         <% end -%>
182       </ul>
183       </div><!-- /.navbar-collapse -->
184     </div><!-- /.container-fluid -->
185   </div>
186
187   <div class="container-fluid">
188       <div class="col-sm-9 col-sm-offset-3">
189         <div id="content">
190           <%= yield %>
191         </div>
192       </div>
193       <div class="col-sm-3 left-nav">
194         <div class="arvados-nav-container">
195         <% if current_user %>
196         <div class="well">
197         <ul class="arvados-nav">
198           <li class="<%= 'arvados-nav-active' if params[:action] == 'home' %>">
199             <a href="/">Dashboard</a>
200           </li>
201           
202           <% [['Data', [['humans'],
203                         ['traits'],
204                         ['specimens'],
205                         ['collections', 'Files'],
206                         ['links', 'Metadata']]],
207               ['Compute', [['pipeline_templates', 'Pipelines'],
208                            ['repositories', 'Code repositories'],
209                            ['virtual_machines']]],
210               ['Activity', [['pipeline_instances', 'Recent pipelines'],
211                             ['jobs', 'Recent jobs']]],
212               ['System', [['users'],
213                          ['groups'],
214                          ['nodes', 'Compute nodes'],
215                          ['keep_disks']]]].each do |j| %>   
216             <li><%= j[0] %>
217               <ul>
218               <% j[1].each do |k| %>
219                 <% unless k[0] == 'users' and !current_user.andand.is_admin %>
220                   <li class="<%= 'arvados-nav-active' if (params[:controller] == k[0] && params[:action] != 'home') %>">
221                     <a href="/<%= k[0] %>">
222                       <%= if k[1] then k[1] else k[0].capitalize.gsub('_', ' ') end %>
223                     </a>
224                   </li>
225                 <% end %>
226               <% end %>
227               </ul>
228             </li>
229           <% end %>
230
231           <li>Help
232             <ul>
233               <li><%= link_to 'Tutorials and User guide', "#{Rails.configuration.arvados_docsite}/user", target: "_blank" %></li>
234               <li><%= link_to 'API Reference', "#{Rails.configuration.arvados_docsite}/api", target: "_blank" %></li>
235               <li><%= link_to 'SDK Reference', "#{Rails.configuration.arvados_docsite}/sdk", target: "_blank" %></li>
236               <li><%= link_to 'Admin guide', "#{Rails.configuration.arvados_docsite}/admin", target: "_blank" %></li>
237             </ul>
238           </li>
239         </ul>
240         </div>
241         <% end %>
242       </div>
243         </div>
244   </div>
245
246   <%= piwik_tracking_tag %>
247   <%= javascript_tag do %>
248   <%= yield :footer_js %>
249   <% end %>
250 </body>
251 </html>