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
|
|
@ -207,15 +207,6 @@ if (session_timeout) {
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
/*
|
|
||||||
* Initialize the menu bar.
|
|
||||||
*/
|
|
||||||
$('ul.menubar').menubar({
|
|
||||||
buttons: true,
|
|
||||||
menuIcon: true,
|
|
||||||
autoExpand: true
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* enhance buttons
|
* enhance buttons
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -161,25 +161,6 @@ header nav.level #current-context span {
|
||||||
/* padding: 5px; */
|
/* padding: 5px; */
|
||||||
/* } */
|
/* } */
|
||||||
|
|
||||||
/******************************
|
|
||||||
* footer
|
|
||||||
******************************/
|
|
||||||
|
|
||||||
/* TODO: should deprecate / remove in favor of some bulma footer */
|
|
||||||
#footer {
|
|
||||||
border-top: 1px solid lightgray;
|
|
||||||
bottom: 0;
|
|
||||||
clear: both;
|
|
||||||
font-size: 9pt;
|
|
||||||
height: 20px;
|
|
||||||
left: 0;
|
|
||||||
line-height: 20px;
|
|
||||||
margin: -4em 0 0 0;
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/******************************
|
/******************************
|
||||||
* feedback
|
* feedback
|
||||||
******************************/
|
******************************/
|
||||||
|
|
|
||||||
|
|
@ -160,6 +160,13 @@
|
||||||
var session_timeout = ${request.get_session_timeout() or 'null'};
|
var session_timeout = ${request.get_session_timeout() or 'null'};
|
||||||
var logout_url = '${request.route_url('logout')}';
|
var logout_url = '${request.route_url('logout')}';
|
||||||
var noop_url = '${request.route_url('noop')}';
|
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'):
|
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||||
$(function() {
|
$(function() {
|
||||||
$('#theme-picker').change(function() {
|
$('#theme-picker').change(function() {
|
||||||
|
|
|
||||||
|
|
@ -11,5 +11,7 @@
|
||||||
<%def name="header_logo()"></%def>
|
<%def name="header_logo()"></%def>
|
||||||
|
|
||||||
<%def name="footer()">
|
<%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>
|
</%def>
|
||||||
|
|
|
||||||
|
|
@ -21,135 +21,124 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="body-wrapper">
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul class="menubar">
|
||||||
|
${main_menu_items()}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<header>
|
<nav class="level">
|
||||||
<nav>
|
<div class="level-left">
|
||||||
<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>
|
|
||||||
|
|
||||||
|
## 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>
|
</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
|
## Theme Picker
|
||||||
<section id="content-title" class="hero is-primary">
|
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||||
<div class="container">
|
<div class="level-item">
|
||||||
${self.content_title()}
|
${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>
|
</div>
|
||||||
</section>
|
% endfor
|
||||||
|
</div>
|
||||||
|
% endif
|
||||||
|
|
||||||
<div class="content-wrapper">
|
% if request.session.peek_flash():
|
||||||
|
<div class="flash-messages">
|
||||||
<div id="scrollpane">
|
% for msg in request.session.pop_flash():
|
||||||
<div id="content">
|
<div class="ui-state-highlight ui-corner-all">
|
||||||
<div class="inner-content">
|
<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'):
|
${self.body()}
|
||||||
<div class="error-messages">
|
</section>
|
||||||
% 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
|
|
||||||
|
|
||||||
% if request.session.peek_flash():
|
## Feedback Dialog
|
||||||
<div class="flash-messages">
|
${feedback_dialog()}
|
||||||
% 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
|
|
||||||
|
|
||||||
${self.body()}
|
## Footer
|
||||||
|
<footer class="footer">
|
||||||
</div><!-- inner-content -->
|
<div class="content">
|
||||||
</div><!-- content -->
|
|
||||||
</div><!-- scrollpane -->
|
|
||||||
|
|
||||||
</div><!-- content-wrapper -->
|
|
||||||
|
|
||||||
<div id="footer">
|
|
||||||
${base_meta.footer()}
|
${base_meta.footer()}
|
||||||
</div>
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</div><!-- body-wrapper -->
|
|
||||||
|
|
||||||
${feedback_dialog()}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
@ -194,6 +183,16 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
|
## TODO: replace this with bulma menu!
|
||||||
|
$(function() {
|
||||||
|
$('ul.menubar').menubar({
|
||||||
|
buttons: true,
|
||||||
|
menuIcon: true,
|
||||||
|
autoExpand: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</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.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue