source: tailbone/tailbone/templates/themes/falafel/base.mako @ 0a68ff6

Last change on this file since 0a68ff6 was 0a68ff6, checked in by Lance Edgar <ledgar@…>, 8 months ago

Add 'falafel' theme, based on bobcat

but with more aggressive approach, includes no jQuery UI JS/CSS (and is
somewhat broken accordingly, for now)

  • Property mode set to 100644
File size: 11.8 KB
Line 
1## -*- coding: utf-8; -*-
2<%namespace file="/grids/nav.mako" import="grid_index_nav" />
3<%namespace file="/feedback_dialog.mako" import="feedback_dialog" />
4<%namespace name="base_meta" file="/base_meta.mako" />
5<!DOCTYPE html>
6<html lang="en">
7  <head>
8    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
9    <title>${base_meta.global_title()} &raquo; ${capture(self.title)|n}</title>
10    ${base_meta.favicon()}
11    ${self.header_core()}
12
13    % if background_color:
14        <style type="text/css">
15          body, .navbar, .footer {
16              background-color: ${background_color};
17          }
18        </style>
19    % endif
20
21    % if not request.rattail_config.production():
22        <style type="text/css">
23          body, .navbar, .footer {
24            background-image: url(${request.static_url('tailbone:static/img/testing.png')});
25          }
26        </style>
27    % endif
28
29    ${self.head_tags()}
30  </head>
31
32  <body>
33    <header>
34
35      <nav class="navbar" role="navigation" aria-label="main navigation">
36        <div class="navbar-menu">
37          <div class="navbar-start">
38
39            % for topitem in menus:
40                % if topitem.is_link:
41                    ${h.link_to(topitem.title, topitem.url, target=topitem.target, class_='navbar-item')}
42                % else:
43                    <div class="navbar-item has-dropdown is-hoverable">
44                      <a class="navbar-link">${topitem.title}</a>
45                      <div class="navbar-dropdown">
46                        % for subitem in topitem.items:
47                            % if subitem.is_sep:
48                                <hr class="navbar-divider">
49                            % else:
50                                ${h.link_to(subitem.title, subitem.url, class_='navbar-item', target=subitem.target)}
51                            % endif
52                        % endfor
53                      </div>
54                    </div>
55                % endif
56            % endfor
57
58          </div><!-- navbar-start -->
59          <div class="navbar-end">
60
61            ## User Menu
62            % if request.user:
63                <div class="navbar-item has-dropdown is-hoverable">
64                  % if messaging_enabled:
65                      <a class="navbar-link ${'root-user' if request.is_root else ''}">${request.user}${" ({})".format(inbox_count) if inbox_count else ''}</a>
66                  % else:
67                      <a class="navbar-link ${'root-user' if request.is_root else ''}">${request.user}</a>
68                  % endif
69                  <div class="navbar-dropdown">
70                    % if request.is_root:
71                        ${h.link_to("Stop being root", url('stop_root'), class_='navbar-item root-user')}
72                    % elif request.is_admin:
73                        ${h.link_to("Become root", url('become_root'), class_='navbar-item root-user')}
74                    % endif
75                    % if messaging_enabled:
76                        ${h.link_to("Messages{}".format(" ({})".format(inbox_count) if inbox_count else ''), url('messages.inbox'), class_='navbar-item')}
77                    % endif
78                    ${h.link_to("Change Password", url('change_password'), class_='navbar-item')}
79                    ${h.link_to("Logout", url('logout'), class_='navbar-item')}
80                  </div>
81                </div>
82            % else:
83                ${h.link_to("Login", url('login'), class_='navbar-item')}
84            % endif
85
86          </div><!-- navbar-end -->
87        </div>
88      </nav>
89
90      <nav class="level">
91        <div class="level-left">
92
93          ## App Logo / Name
94          <div class="level-item">
95            <a class="home" href="${url('home')}">
96              <div id="header-logo">${base_meta.header_logo()}</div>
97              <span class="global-title">${base_meta.global_title()}</span>
98            </a>
99          </div>
100
101          ## Current Context
102          <div id="current-context" class="level-item">
103            % if master:
104                <span>&raquo;</span>
105                % if master.listing:
106                    <span>${index_title}</span>
107                % else:
108                    ${h.link_to(index_title, index_url)}
109                    % if parent_url is not Undefined:
110                        <span>&raquo;</span>
111                        ${h.link_to(parent_title, parent_url)}
112                    % elif instance_url is not Undefined:
113                        <span>&raquo;</span>
114                        ${h.link_to(instance_title, instance_url)}
115                    % endif
116                    % if master.viewing and grid_index:
117                        ${grid_index_nav()}
118                    % endif
119                % endif
120            % elif index_title:
121                <span>&raquo;</span>
122                <span>${index_title}</span>
123            % endif
124          </div>
125
126        </div><!-- level-left -->
127        <div class="level-right">
128
129          ## Theme Picker
130          % if expose_theme_picker and request.has_perm('common.change_app_theme'):
131              <div class="level-item">
132                ${h.form(url('change_theme'), method="post")}
133                ${h.csrf_token(request)}
134                Theme:
135                <div class="theme-picker">
136                  <div class="select">
137                    ${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
138                  </div>
139                </div>
140                ${h.end_form()}
141              </div>
142          % endif
143
144          ## Help Button
145          % if help_url is not Undefined and help_url:
146              <div class="level-item">
147                ${h.link_to("Help", help_url, target='_blank', class_='button')}
148              </div>
149          % endif
150
151          ## Feedback Button
152          <div class="level-item" id="feedback-app">
153            <button class="button is-primary" @click="showFeedback()">Feedback</button>
154          </div>
155
156          ## Feedback Dialog
157          ${feedback_dialog()}
158
159        </div><!-- level-right -->
160      </nav><!-- level -->
161    </header>
162
163    ## Page Title
164    <section id="content-title" class="hero is-primary">
165      <div class="container">
166        % if capture(self.content_title):
167
168            % if show_prev_next is not Undefined and show_prev_next:
169                <div style="float: right;">
170                  % if prev_url:
171                      ${h.link_to("« Older", prev_url, class_='button autodisable')}
172                  % else:
173                      ${h.link_to("« Older", '#', class_='button', disabled='disabled')}
174                  % endif
175                  % if next_url:
176                      ${h.link_to("Newer »", next_url, class_='button autodisable')}
177                  % else:
178                      ${h.link_to("Newer »", '#', class_='button', disabled='disabled')}
179                  % endif
180                </div>
181            % endif
182
183            <h1 class="title">${self.content_title()}</h1>
184        % endif
185      </div>
186    </section>
187
188    <div class="content-wrapper">
189
190    ## Page Body
191    <section id="page-body">
192
193      % if request.session.peek_flash('error'):
194          % for error in request.session.pop_flash('error'):
195              <div class="notification is-warning">
196                <!-- <button class="delete"></button> -->
197                ${error}
198              </div>
199          % endfor
200      % endif
201
202      % if request.session.peek_flash():
203          % for msg in request.session.pop_flash():
204              <div class="notification is-info">
205                <!-- <button class="delete"></button> -->
206                ${msg}
207              </div>
208          % endfor
209      % endif
210
211      ${self.body()}
212    </section>
213
214    ## Footer
215    <footer class="footer">
216      <div class="content">
217        ${base_meta.footer()}
218      </div>
219    </footer>
220
221    </div><!-- content-wrapper -->
222
223    ${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
224
225  </body>
226</html>
227
228<%def name="title()"></%def>
229
230<%def name="content_title()">
231  ${self.title()}
232</%def>
233
234<%def name="header_core()">
235
236  ${self.core_javascript()}
237  ${self.extra_javascript()}
238  ${self.core_styles()}
239  ${self.extra_styles()}
240
241  ## TODO: should this be elsewhere / more customizable?
242  % if dform is not Undefined:
243      <% resources = dform.get_widget_resources() %>
244      % for path in resources['js']:
245          ${h.javascript_link(request.static_url(path))}
246      % endfor
247      % for path in resources['css']:
248          ${h.stylesheet_link(request.static_url(path))}
249      % endfor
250  % endif
251</%def>
252
253<%def name="core_javascript()">
254  ${self.jquery()}
255
256  ## Vue.js
257  ${h.javascript_link('https://unpkg.com/vue')}
258
259  ## Buefy 0.7.3
260  ${h.javascript_link('https://unpkg.com/buefy@0.7.3/dist/buefy.min.js')}
261
262  ## ${h.javascript_link(request.static_url('tailbone:static/js/lib/jquery.loadmask.min.js'))}
263  ## ${h.javascript_link(request.static_url('tailbone:static/js/lib/jquery.ui.timepicker.js'))}
264  <script type="text/javascript">
265    var session_timeout = ${request.get_session_timeout() or 'null'};
266    var logout_url = '${request.route_url('logout')}';
267    var noop_url = '${request.route_url('noop')}';
268    % if expose_theme_picker and request.has_perm('common.change_app_theme'):
269        $(function() {
270            $('#theme-picker').change(function() {
271                $(this).parents('form:first').submit();
272            });
273        });
274    % endif
275  </script>
276  ## ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
277  ## ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
278  ## ${h.javascript_link(request.static_url('tailbone:static/js/jquery.ui.tailbone.js') + '?ver={}'.format(tailbone.__version__))}
279</%def>
280
281<%def name="jquery()">
282
283  ## jQuery 1.12.4
284  ${h.javascript_link('https://code.jquery.com/jquery-1.12.4.min.js')}
285
286  ## jQuery 1.11.4
287  ## ${h.javascript_link('https://code.jquery.com/ui/{}/jquery-ui.min.js'.format(request.rattail_config.get('tailbone', 'jquery_ui.version', default='1.11.4')))}
288
289</%def>
290
291<%def name="extra_javascript()"></%def>
292
293<%def name="core_styles()">
294
295  ## Bulma 0.7.4
296  ${h.stylesheet_link('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css')}
297
298  ## Buefy 0.7.3
299  ${h.stylesheet_link('https://unpkg.com/buefy@0.7.3/dist/buefy.min.css')}
300
301##   ${self.jquery_theme()}
302##   ${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.loadmask.css'))}
303##   ${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.timepicker.css'))}
304##   ${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.tailbone.css') + '?ver={}'.format(tailbone.__version__))}
305
306  ${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/base.css') + '?ver={}'.format(tailbone.__version__))}
307  ${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
308  ${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
309##   ${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
310  ${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
311  ${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}
312</%def>
313
314<%def name="jquery_theme()">
315  ${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
316</%def>
317
318<%def name="extra_styles()"></%def>
319
320<%def name="head_tags()"></%def>
321
322<%def name="wtfield(form, name, **kwargs)">
323  <div class="field-wrapper${' error' if form[name].errors else ''}">
324    <label for="${name}">${form[name].label}</label>
325    <div class="field">
326      ${form[name](**kwargs)}
327    </div>
328  </div>
329</%def>
Note: See TracBrowser for help on using the repository browser.