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 2018-11-28 22:09:35 -06:00
parent 103f006cc0
commit 1fa56aa683
5 changed files with 124 additions and 144 deletions

View file

@ -207,15 +207,6 @@ if (session_timeout) {
$(function() {
/*
* Initialize the menu bar.
*/
$('ul.menubar').menubar({
buttons: true,
menuIcon: true,
autoExpand: true
});
/*
* enhance buttons
*/

View file

@ -161,25 +161,6 @@ header nav.level #current-context span {
/* 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
******************************/

View file

@ -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() {

View file

@ -11,5 +11,7 @@
<%def name="header_logo()"></%def>
<%def name="footer()">
<p class="has-text-centered">
powered by ${h.link_to("Rattail", url('about'))}
</p>
</%def>

View file

@ -21,8 +21,6 @@
</head>
<body>
<div id="body-wrapper">
<header>
<nav>
<ul class="menubar">
@ -31,10 +29,9 @@
</nav>
<nav class="level">
<div class="level-left">
## Home
## App Logo / Name
<div class="level-item">
<a class="home" href="${url('home')}">
<div id="header-logo">${base_meta.header_logo()}</div>
@ -68,7 +65,6 @@
</div>
</div><!-- level-left -->
<div class="level-right">
## Theme Picker
@ -94,10 +90,8 @@
<button type="button" id="feedback">Feedback</button>
</div>
</div>
</div><!-- level-right -->
</nav><!-- level -->
</header>
## Page Title
@ -107,11 +101,8 @@
</div>
</section>
<div class="content-wrapper">
<div id="scrollpane">
<div id="content">
<div class="inner-content">
## Page Body
<section>
% if request.session.peek_flash('error'):
<div class="error-messages">
@ -136,20 +127,18 @@
% endif
${self.body()}
</section>
</div><!-- inner-content -->
</div><!-- content -->
</div><!-- scrollpane -->
## Feedback Dialog
${feedback_dialog()}
</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__))}