Add initial attempt at 'better' theme

This commit is contained in:
Lance Edgar 2016-07-17 20:16:26 -05:00
parent fdf1419ea2
commit 38927ce282
8 changed files with 310 additions and 4 deletions

View file

@ -54,7 +54,6 @@ div.field-wrapper.error {
}
div.field-wrapper label {
color: #000000;
display: block;
float: left;
width: 15em;

View file

@ -0,0 +1,120 @@
/**********************************************************************
* styles for 'better' theme
**********************************************************************/
/****************************************
* core overrides
****************************************/
a {
color: #0972a5;
}
.flash-messages,
.error-messages {
margin: 0.5em 0 0 0;
}
#context-menu {
margin: 0.5em;
white-space: nowrap;
}
.form {
padding-left: 5em;
}
.newgrid-wrapper .grid-header #context-menu {
float: none;
margin: 0;
}
/****************************************
* header
****************************************/
header .global {
background-color: #eaeaea;
height: 60px;
}
header .global a.home,
header .global a.global,
header .global span.global {
display: block;
float: left;
font-size: 2em;
font-weight: bold;
line-height: 60px;
margin-left: 10px;
}
header .global a.home img {
display: block;
float: left;
padding: 5px 5px 5px 30px;
}
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;
}
header .global .feedback {
float: right;
line-height: 60px;
margin-right: 1em;
}
header .page h1 {
border-bottom: 1px solid lightgrey;
margin: 0;
padding: 0 0 0 0.5em;
}
/****************************************
* 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;
}
/****************************************
* footer
****************************************/
#footer {
border-top: 1px solid lightgray;
bottom: 0;
font-size: 9pt;
height: 20px;
left: 0;
line-height: 20px;
margin: 0;
position: absolute;
width: 100%;
}

View file

@ -135,9 +135,13 @@
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js'))}
</%def>
<%def name="core_styles()">
<%def name="core_styles(jquery_theme=None)">
${h.stylesheet_link(request.static_url('tailbone:static/css/normalize.css'))}
${self.jquery_theme()}
% if jquery_theme:
${jquery_theme()}
% else:
${self.jquery_smoothness_theme()}
% endif
${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'))}
@ -150,7 +154,7 @@
${h.stylesheet_link(request.static_url('tailbone:static/css/newgrids.css'))}
</%def>
<%def name="jquery_theme()">
<%def name="jquery_smoothness_theme()">
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css')}
</%def>

View file

@ -0,0 +1,132 @@
## -*- coding: utf-8 -*-
<%namespace name="base" file="tailbone:templates/base.mako" />
<%namespace file="/menu.mako" import="main_menu_items" />
<%namespace file="/newgrids/nav.mako" import="grid_index_nav" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>${self.global_title()} &raquo; ${capture(self.title)}</title>
${self.favicon()}
${base.core_javascript()}
${self.extra_javascript()}
${base.core_styles(jquery_theme=self.jquery_theme)}
${self.extra_styles()}
% if not request.rattail_config.production():
<style type="text/css">
body { background-image: url(${request.static_url('tailbone:static/img/testing.png')}); }
</style>
% endif
${self.head_tags()}
</head>
<body>
<div id="body-wrapper">
<header>
<nav>
<ul class="menubar">
${main_menu_items()}
</ul>
</nav>
<div class="global">
<a class="home" href="${url('home')}">
${self.header_logo()}
<span>${self.global_title()}</span>
</a>
% if master:
<span class="global">&raquo;</span>
% if master.listing:
<span class="global">${model_title_plural}</span>
% else:
${h.link_to(model_title_plural, index_url, class_='global')}
% if master.viewing and grid_index:
${grid_index_nav()}
% endif
% endif
% endif
<div class="feedback">
${h.link_to("Feedback", url('feedback'), class_='button')}
</div>
</div><!-- global -->
<div class="page">
${self.content_title()}
</div>
</header>
<div class="content-wrapper">
<div id="scrollpane">
<div id="content">
<div class="inner-content">
% 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
% 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
${self.body()}
</div><!-- inner-content -->
</div><!-- content -->
</div><!-- scrollpane -->
</div><!-- content-wrapper -->
<div id="footer">
${self.footer()}
</div>
</div><!-- body-wrapper -->
</body>
</html>
<%def name="global_title()">${"[STAGE] " if not request.rattail_config.production() else ''}Rattail</%def>
<%def name="content_title()">
<h1>${self.title()}</h1>
</%def>
<%def name="favicon()"></%def>
<%def name="jquery_theme()">
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
</%def>
<%def name="extra_javascript()"></%def>
<%def name="extra_styles()">
${h.stylesheet_link(request.static_url('tailbone:static/css/theme-better.css'))}
</%def>
<%def name="head_tags()"></%def>
<%def name="header_logo()"></%def>
<%def name="footer()">
powered by ${h.link_to("Rattail {}".format(rattail.__version__), 'https://rattailproject.org/', target='_blank')}
</%def>

View file

@ -0,0 +1,6 @@
## -*- coding: utf-8 -*-
<%inherit file="tailbone:templates/master/create.mako" />
<%def name="context_menu_items()"></%def>
${parent.body()}

View file

@ -0,0 +1,18 @@
## -*- coding: utf-8 -*-
<%inherit file="tailbone:templates/master/edit.mako" />
<%def name="title()">Edit: ${instance_title}</%def>
<%def name="context_menu_items()">
% if master.viewable and request.has_perm('{}.view'.format(permission_prefix)):
<li>${h.link_to("View this {}".format(model_title), action_url('view', instance))}</li>
% endif
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)):
<li>${h.link_to("Delete this {}".format(model_title), action_url('delete', instance))}</li>
% endif
% if master.creatable and request.has_perm('{}.create'.format(permission_prefix)):
<li>${h.link_to("Create a new {}".format(model_title), url('{}.create'.format(route_prefix)))}</li>
% endif
</%def>
${parent.body()}

View file

@ -0,0 +1,6 @@
## -*- coding: utf-8 -*-
<%inherit file="tailbone:templates/master/index.mako" />
<%def name="content_title()"></%def>
${parent.body()}

View file

@ -0,0 +1,21 @@
## -*- coding: utf-8 -*-
<%inherit file="tailbone:templates/master/view.mako" />
<%def name="content_title()">
<h1>${instance_title}</h1>
</%def>
<%def name="context_menu_items()">
<li>${h.link_to("Permalink for this {}".format(model_title), action_url('view', instance))}</li>
% if master.editable and instance_editable and request.has_perm('{}.edit'.format(permission_prefix)):
<li>${h.link_to("Edit this {}".format(model_title), action_url('edit', instance))}</li>
% endif
% if master.deletable and instance_deletable and request.has_perm('{}.delete'.format(permission_prefix)):
<li>${h.link_to("Delete this {}".format(model_title), action_url('delete', instance))}</li>
% endif
% if master.creatable and request.has_perm('{}.create'.format(permission_prefix)):
<li>${h.link_to("Create a new {}".format(model_title), url('{}.create'.format(route_prefix)))}</li>
% endif
</%def>
${parent.body()}