Add Bulma-style footer to bobcat theme
also refactor HTML element tree in general, for sake of bulma
This commit is contained in:
Lance Edgar
parent
103f006cc0
commit
1fa56aa683
5 changed files with 124 additions and 144 deletions
|
|
@ -160,6 +160,13 @@
|
|||
var session_timeout = ${request.get_session_timeout() or 'null'};
|
||||
var logout_url = '${request.route_url('logout')}';
|
||||
var noop_url = '${request.route_url('noop')}';
|
||||
$(function() {
|
||||
$('ul.menubar').menubar({
|
||||
buttons: true,
|
||||
menuIcon: true,
|
||||
autoExpand: true
|
||||
});
|
||||
});
|
||||
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||
$(function() {
|
||||
$('#theme-picker').change(function() {
|
||||
|
|
|
|||
|
|
@ -11,5 +11,7 @@
|
|||
<%def name="header_logo()"></%def>
|
||||
|
||||
<%def name="footer()">
|
||||
powered by ${h.link_to("Rattail", url('about'))}
|
||||
<p class="has-text-centered">
|
||||
powered by ${h.link_to("Rattail", url('about'))}
|
||||
</p>
|
||||
</%def>
|
||||
|
|
|
|||
|
|
@ -21,135 +21,124 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="body-wrapper">
|
||||
<header>
|
||||
<nav>
|
||||
<ul class="menubar">
|
||||
${main_menu_items()}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul class="menubar">
|
||||
${main_menu_items()}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="level">
|
||||
|
||||
<div class="level-left">
|
||||
|
||||
## Home
|
||||
<div class="level-item">
|
||||
<a class="home" href="${url('home')}">
|
||||
<div id="header-logo">${base_meta.header_logo()}</div>
|
||||
<span class="global-title">${base_meta.global_title()}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Current Context
|
||||
<div id="current-context" class="level-item">
|
||||
% if master:
|
||||
<span>»</span>
|
||||
% if master.listing:
|
||||
<span>${index_title}</span>
|
||||
% else:
|
||||
${h.link_to(index_title, index_url)}
|
||||
% if parent_url is not Undefined:
|
||||
<span>»</span>
|
||||
${h.link_to(parent_title, parent_url)}
|
||||
% elif instance_url is not Undefined:
|
||||
<span>»</span>
|
||||
${h.link_to(instance_title, instance_url)}
|
||||
% endif
|
||||
% if master.viewing and grid_index:
|
||||
${grid_index_nav()}
|
||||
% endif
|
||||
% endif
|
||||
% elif index_title:
|
||||
<span>»</span>
|
||||
<span>${index_title}</span>
|
||||
% endif
|
||||
</div>
|
||||
|
||||
</div><!-- level-left -->
|
||||
|
||||
<div class="level-right">
|
||||
|
||||
## Theme Picker
|
||||
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||
<div class="level-item">
|
||||
${h.form(url('change_theme'), name="theme_changer", method="post")}
|
||||
${h.csrf_token(request)}
|
||||
Theme:
|
||||
${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
|
||||
${h.end_form()}
|
||||
</div>
|
||||
% endif
|
||||
|
||||
## Help
|
||||
% if help_url is not Undefined and help_url:
|
||||
<div class="level-item">
|
||||
${h.link_to("Help", help_url, target='_blank', class_='button')}
|
||||
</div>
|
||||
% endif
|
||||
|
||||
## Feedback
|
||||
<div class="level-item">
|
||||
<button type="button" id="feedback">Feedback</button>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
|
||||
## App Logo / Name
|
||||
<div class="level-item">
|
||||
<a class="home" href="${url('home')}">
|
||||
<div id="header-logo">${base_meta.header_logo()}</div>
|
||||
<span class="global-title">${base_meta.global_title()}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</nav><!-- level -->
|
||||
## Current Context
|
||||
<div id="current-context" class="level-item">
|
||||
% if master:
|
||||
<span>»</span>
|
||||
% if master.listing:
|
||||
<span>${index_title}</span>
|
||||
% else:
|
||||
${h.link_to(index_title, index_url)}
|
||||
% if parent_url is not Undefined:
|
||||
<span>»</span>
|
||||
${h.link_to(parent_title, parent_url)}
|
||||
% elif instance_url is not Undefined:
|
||||
<span>»</span>
|
||||
${h.link_to(instance_title, instance_url)}
|
||||
% endif
|
||||
% if master.viewing and grid_index:
|
||||
${grid_index_nav()}
|
||||
% endif
|
||||
% endif
|
||||
% elif index_title:
|
||||
<span>»</span>
|
||||
<span>${index_title}</span>
|
||||
% endif
|
||||
</div>
|
||||
|
||||
</header>
|
||||
</div><!-- level-left -->
|
||||
<div class="level-right">
|
||||
|
||||
## Page Title
|
||||
<section id="content-title" class="hero is-primary">
|
||||
<div class="container">
|
||||
${self.content_title()}
|
||||
## Theme Picker
|
||||
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||
<div class="level-item">
|
||||
${h.form(url('change_theme'), name="theme_changer", method="post")}
|
||||
${h.csrf_token(request)}
|
||||
Theme:
|
||||
${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
|
||||
${h.end_form()}
|
||||
</div>
|
||||
% endif
|
||||
|
||||
## Help
|
||||
% if help_url is not Undefined and help_url:
|
||||
<div class="level-item">
|
||||
${h.link_to("Help", help_url, target='_blank', class_='button')}
|
||||
</div>
|
||||
% endif
|
||||
|
||||
## Feedback
|
||||
<div class="level-item">
|
||||
<button type="button" id="feedback">Feedback</button>
|
||||
</div>
|
||||
|
||||
</div><!-- level-right -->
|
||||
</nav><!-- level -->
|
||||
</header>
|
||||
|
||||
## Page Title
|
||||
<section id="content-title" class="hero is-primary">
|
||||
<div class="container">
|
||||
${self.content_title()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## Page Body
|
||||
<section>
|
||||
|
||||
% if request.session.peek_flash('error'):
|
||||
<div class="error-messages">
|
||||
% for error in request.session.pop_flash('error'):
|
||||
<div class="ui-state-error ui-corner-all">
|
||||
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
|
||||
${error}
|
||||
</div>
|
||||
</section>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div id="scrollpane">
|
||||
<div id="content">
|
||||
<div class="inner-content">
|
||||
% if request.session.peek_flash():
|
||||
<div class="flash-messages">
|
||||
% for msg in request.session.pop_flash():
|
||||
<div class="ui-state-highlight ui-corner-all">
|
||||
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
|
||||
${msg|n}
|
||||
</div>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if request.session.peek_flash('error'):
|
||||
<div class="error-messages">
|
||||
% for error in request.session.pop_flash('error'):
|
||||
<div class="ui-state-error ui-corner-all">
|
||||
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
|
||||
${error}
|
||||
</div>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
${self.body()}
|
||||
</section>
|
||||
|
||||
% if request.session.peek_flash():
|
||||
<div class="flash-messages">
|
||||
% for msg in request.session.pop_flash():
|
||||
<div class="ui-state-highlight ui-corner-all">
|
||||
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
|
||||
${msg|n}
|
||||
</div>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
## Feedback Dialog
|
||||
${feedback_dialog()}
|
||||
|
||||
${self.body()}
|
||||
|
||||
</div><!-- inner-content -->
|
||||
</div><!-- content -->
|
||||
</div><!-- scrollpane -->
|
||||
|
||||
</div><!-- content-wrapper -->
|
||||
|
||||
<div id="footer">
|
||||
## Footer
|
||||
<footer class="footer">
|
||||
<div class="content">
|
||||
${base_meta.footer()}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div><!-- body-wrapper -->
|
||||
|
||||
${feedback_dialog()}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -194,6 +183,16 @@
|
|||
});
|
||||
});
|
||||
% endif
|
||||
|
||||
## TODO: replace this with bulma menu!
|
||||
$(function() {
|
||||
$('ul.menubar').menubar({
|
||||
buttons: true,
|
||||
menuIcon: true,
|
||||
autoExpand: true
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
|
||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue