rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Turn on Bulma CSS framework for 'bobcat' theme

Browse source 
still trying to match the default theme here, but only in spirit, and giving
priority to doing things "the bulma way" if possible
This commit is contained in:
Lance Edgar 2018-11-28 20:00:22 -06:00
parent 9913586155
commit 103f006cc0
3 changed files with 409 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
tailbone/static/themes/bobcat/css/base.css Normal file
View file

@ -0,0 +1,115 @@
/* /\****************************** */
/* * General */
/* ******************************\/ */
/* * { */
/* margin: 0px; */
/* } */
/* body { */
/* font-family: Verdana, Arial, sans-serif; */
/* font-size: 11pt; */
/* } */
/* a { */
/* color: #0972a5; */
/* text-decoration: none; */
/* } */
/* a:hover { */
/* text-decoration: underline; */
/* } */
/* h1 { */
/* margin-bottom: 15px; */
/* } */
/* h2 { */
/* font-size: 12pt; */
/* margin: 20px auto 10px auto; */
/* } */
/* li { */
/* line-height: 2em; */
/* } */
/* p { */
/* margin-bottom: 5px; */
/* } */
/* .left { */
/* float: left; */
/* text-align: left; */
/* } */
/* .right { */
/* text-align: right; */
/* } */
/* .wrapper { */
/* overflow: auto; */
/* } */
/* div.buttons { */
/* clear: both; */
/* margin-top: 10px; */
/* } */
/* div.dialog { */
/* display: none; */
/* } */
/* div.flash-message { */
/* background-color: #dddddd; */
/* margin-bottom: 8px; */
/* padding: 3px; */
/* } */
/* div.flash-messages div.ui-state-highlight { */
/* padding: .3em; */
/* margin-bottom: 8px; */
/* } */
/* div.error-messages div.ui-state-error { */
/* padding: .3em; */
/* margin-bottom: 8px; */
/* } */
/* .flash-messages, */
/* .error-messages { */
/* margin: 0.5em 0 0 0; */
/* } */
/* ul.error { */
/* color: #dd6666; */
/* font-weight: bold; */
/* padding: 0px; */
/* } */
/* ul.error li { */
/* list-style-type: none; */
/* } */
/* /\****************************** */
/* * jQuery UI tweaks */
/* ******************************\/ */
/* ul.ui-menu { */
/* max-height: 30em; */
/* } */
/******************************
* tweaks for root user
******************************/
.menubar .root-user .ui-button-text,
.menubar .root-user.ui-menu-item a {
background-color: red;
color: black;
font-weight: bold;
}
.menubar .root-user.ui-menu-item a {
padding-left: 1em;
}

218
tailbone/static/themes/bobcat/css/layout.css Normal file
View file

@ -0,0 +1,218 @@
/* /\****************************** */
/* * Main Layout */
/* ******************************\/ */
/* html, body, #body-wrapper { */
/* height: 100%; */
/* } */
/* body > #body-wrapper { */
/* height: auto; */
/* min-height: 100%; */
/* } */
/* #body-wrapper { */
/* margin: 0 1em; */
/* width: auto; */
/* } */
/* #header { */
/* height: 50px; */
/* line-height: 50px; */
/* } */
/* #body { */
/* padding-top: 10px; */
/* padding-bottom: 5em; */
/* } */
/******************************
* header
******************************/
header nav.level {
background-color: #eaeaea;
/* height: 60px; */
line-height: 60px;
padding-left: 0.5em;
padding-right: 0.5em;
}
header nav.level #header-logo {
display: inline-block;
}
header nav.level .global-title {
font-size: 2em;
font-weight: bold;
}
header nav.level #current-context {
font-size: 2em;
font-weight: bold;
}
header nav.level #current-context span {
margin-right: 10px;
}
/* header .global .grid-nav { */
/* display: inline-block; */
/* font-size: 16px; */
/* font-weight: bold; */
/* line-height: 60px; */
/* margin-left: 5em; */
/* } */
/* header .global .grid-nav .ui-button, */
/* header .global .grid-nav span.viewing { */
/* margin-left: 1em; */
/* } */
#content-title h1 {
font-size: 2em;
}
/* /\****************************** */
/* * Logo */
/* ******************************\/ */
/* #logo { */
/* display: block; */
/* margin: 40px auto; */
/* } */
/* /\**************************************** */
/* * content */
/* ****************************************\/ */
/* body > #body-wrapper { */
/* margin: 0px; */
/* position: relative; */
/* } */
/* .content-wrapper { */
/* height: 100%; */
/* padding-bottom: 30px; */
/* } */
/* #scrollpane { */
/* height: 100%; */
/* } */
/* #scrollpane .inner-content { */
/* padding: 0 0.5em 0.5em 0.5em; */
/* } */
/******************************
* context menu
******************************/
/* TODO: should deprecate / remove in favor of some bulma approach (section?) */
#context-menu {
float: right;
/* list-style-type: none; */
margin: 0.5em;
text-align: right;
white-space: nowrap;
}
/* /\****************************** */
/* * Panels */
/* ******************************\/ */
/* .panel-wrapper { */
/* float: left; */
/* margin-right: 15px; */
/* width: 40%; */
/* } */
/* .panel, */
/* .panel-grid { */
/* border-left: 1px solid Black; */
/* margin-bottom: 15px; */
/* } */
/* .panel { */
/* border-bottom: 1px solid Black; */
/* border-right: 1px solid Black; */
/* padding: 0px; */
/* } */
/* .panel h2, */
/* .panel-grid h2 { */
/* border-bottom: 1px solid Black; */
/* border-top: 1px solid Black; */
/* padding: 5px; */
/* margin: 0px; */
/* } */
/* .panel-grid h2 { */
/* border-right: 1px solid Black; */
/* } */
/* .panel-body { */
/* overflow: auto; */
/* 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-dialog {
display: none;
}
#feedback-dialog p {
margin-top: 1em;
}
#feedback-dialog .red {
color: red;
font-weight: bold;
}
#feedback-dialog .field-wrapper {
margin-top: 1em;
padding: 0;
}
#feedback-dialog .field {
margin-bottom: 0;
margin-top: 0.5em;
}
#feedback-dialog .referrer .field {
clear: both;
float: none;
margin-top: 1em;
}
#feedback-dialog textarea {
width: auto;
}

83
tailbone/templates/themes/bobcat/base.mako
View file

@ -30,42 +30,50 @@
</ul>
</nav>
<div class="global">
<nav class="level">
<div class="level-left">
## Home
<div class="level-item">
<a class="home" href="${url('home')}">
${base_meta.header_logo()}
<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 class="global">&raquo;</span>
<span>&raquo;</span>
% if master.listing:
<span class="global">${index_title}</span>
<span>${index_title}</span>
% else:
${h.link_to(index_title, index_url, class_='global')}
${h.link_to(index_title, index_url)}
% if parent_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(parent_title, parent_url, class_='global')}
<span>&raquo;</span>
${h.link_to(parent_title, parent_url)}
% elif instance_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(instance_title, instance_url, class_='global')}
<span>&raquo;</span>
${h.link_to(instance_title, instance_url)}
% endif
% if master.viewing and grid_index:
${grid_index_nav()}
% endif
% endif
% elif index_title:
<span class="global">&raquo;</span>
<span class="global">${index_title}</span>
<span>&raquo;</span>
<span>${index_title}</span>
% endif
<div class="feedback">
% if help_url is not Undefined and help_url:
${h.link_to("Help", help_url, target='_blank', class_='button')}
% endif
<button type="button" id="feedback">Feedback</button>
</div>
</div><!-- level-left -->
<div class="level-right">
## Theme Picker
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
<div class="after-feedback">
<div class="level-item">
${h.form(url('change_theme'), name="theme_changer", method="post")}
${h.csrf_token(request)}
Theme:
@ -74,12 +82,30 @@
</div>
% endif
</div><!-- global -->
## 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
<div class="page">
## Feedback
<div class="level-item">
<button type="button" id="feedback">Feedback</button>
</div>
</div>
</nav><!-- level -->
</header>
## Page Title
<section id="content-title" class="hero is-primary">
<div class="container">
${self.content_title()}
</div>
</header>
</section>
<div class="content-wrapper">
@ -130,13 +156,11 @@
<%def name="title()"></%def>
<%def name="content_title()">
<h1>${self.title()}</h1>
<h1 class="title">${self.title()}</h1>
</%def>
<%def name="header_core()">
## ${h.stylesheet_link('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css')}
${self.core_javascript()}
${self.extra_javascript()}
${self.core_styles()}
@ -184,14 +208,17 @@
<%def name="extra_javascript()"></%def>
<%def name="core_styles()">
${h.stylesheet_link(request.static_url('tailbone:static/css/normalize.css'))}
${h.stylesheet_link('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css')}
${self.jquery_theme()}
${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.menubar.css'))}
${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.loadmask.css'))}
${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.timepicker.css'))}
${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.tailbone.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/base.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/base.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
@ -199,7 +226,7 @@
</%def>
<%def name="jquery_theme()">
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css')}
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
</%def>
<%def name="extra_styles()"></%def>