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

Merge 'better' theme into base templates

Browse source 
i.e. for now there is no 'better' (or any other) theme
This commit is contained in:
Lance Edgar 2017-08-13 19:11:53 -05:00
parent c0a28716f5
commit 7d0bb80a90
15 changed files with 241 additions and 423 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tailbone/app.py
View file

@ -1,4 +1,4 @@
# -*- coding: utf-8 -*- # -*- coding: utf-8; -*-
################################################################################ ################################################################################
# #
# Rattail -- Retail Software Framework # Rattail -- Retail Software Framework
@ -175,9 +175,7 @@ def main(global_config, **settings):
""" """
This function returns a Pyramid WSGI application. This function returns a Pyramid WSGI application.
""" """
settings.setdefault('mako.directories', [ settings.setdefault('mako.directories', ['tailbone:templates'])
'tailbone:templates/themes/better',
'tailbone:templates'])
rattail_config = make_rattail_config(settings) rattail_config = make_rattail_config(settings)
pyramid_config = make_pyramid_config(settings) pyramid_config = make_pyramid_config(settings)
pyramid_config.include('tailbone') pyramid_config.include('tailbone')

7
tailbone/static/css/base.css
View file

@ -13,7 +13,7 @@ body {
} }
a { a {
color: #3D6E1C; color: #0972a5;
text-decoration: none; text-decoration: none;
} }
@ -76,6 +76,11 @@ div.error-messages div.ui-state-error {
margin-bottom: 8px; margin-bottom: 8px;
} }
.flash-messages,
.error-messages {
margin: 0.5em 0 0 0;
}
div.error { div.error {
color: #dd6666; color: #dd6666;
font-weight: bold; font-weight: bold;

4
tailbone/static/css/forms.css
View file

@ -36,6 +36,10 @@ div.fieldset {
margin-top: 10px; margin-top: 10px;
} }
.form {
padding-left: 5em;
}
/****************************** /******************************
* Fieldsets * Fieldsets

5
tailbone/static/css/grids.css
View file

@ -21,6 +21,11 @@
white-space: nowrap; white-space: nowrap;
} }
.grid-wrapper .grid-header #context-menu {
float: none;
margin: 0;
}
.grid-wrapper .grid-header td.tools { .grid-wrapper .grid-header td.tools {
margin: 0; margin: 0;
padding: 0; padding: 0;

94
tailbone/static/css/layout.css
View file

@ -57,6 +57,59 @@ body > #body-wrapper {
margin-left: 0.5em; margin-left: 0.5em;
} }
/* new stuff from 'better' theme begins here */
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 {
border-bottom: 1px solid lightgrey;
padding: 0.5em;
}
header .page h1 {
margin: 0;
padding: 0 0 0 0.5em;
}
/****************************** /******************************
* Logo * Logo
******************************/ ******************************/
@ -67,6 +120,29 @@ body > #body-wrapper {
} }
/****************************************
* 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 * context menu
******************************/ ******************************/
@ -74,7 +150,9 @@ body > #body-wrapper {
#context-menu { #context-menu {
float: right; float: right;
list-style-type: none; list-style-type: none;
margin: 0.5em;
text-align: right; text-align: right;
white-space: nowrap;
} }
@ -110,3 +188,19 @@ body > #body-wrapper {
overflow: auto; overflow: auto;
padding: 5px; padding: 5px;
} }
/****************************************
* 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%;
}

124
tailbone/static/css/theme-better.css
View file

@ -1,124 +0,0 @@
/**********************************************************************
* 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;
}
.grid-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 {
border-bottom: 1px solid lightgrey;
padding: 0.5em;
}
header .page h1 {
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%;
}

221
tailbone/templates/base.mako
View file

@ -1,124 +1,132 @@
## -*- coding: utf-8 -*- ## -*- coding: utf-8; -*-
<%namespace file="/menu.mako" import="main_menu_items" />
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
<!DOCTYPE html> <!DOCTYPE html>
<html style="direction: ltr;" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"> <html lang="en">
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>${self.global_title()} &raquo; ${capture(self.title)}</title> <title>${self.global_title()} &raquo; ${capture(self.title)|n}</title>
<link rel="icon" type="image/x-icon" href="${request.static_url('tailbone:static/img/rattail.ico')}" /> ${self.favicon()}
${self.core_javascript()} ${self.header_core()}
${self.core_styles()}
${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()} ${self.head_tags()}
</head> </head>
<body> <body>
<div id="body-wrapper"> <div id="body-wrapper">
<div id="header"> <header>
<h1>${h.link_to(capture(self.global_title), url('home'))}</h1> <nav>
<h1 class="title">&raquo; ${self.title()}</h1> <ul class="menubar">
<div class="login"> ${main_menu_items()}
% if request.user: </ul>
${h.link_to(request.user.display_name, url('change_password'))} </nav>
(${h.link_to("logout", url('logout'))})
% else: <div class="global">
${h.link_to("login", url('login'))} <a class="home" href="${url('home')}">
${self.header_logo()}
<span class="title">${self.global_title()}</span>
</a>
% if master:
<span class="global">&raquo;</span>
% if master.listing:
<span class="global">${index_title}</span>
% else:
${h.link_to(index_title, index_url, class_='global')}
% if parent_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(parent_title, parent_url, class_='global')}
% elif instance_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(instance_title, instance_url, class_='global')}
% endif
% if master.viewing and grid_index:
${grid_index_nav()}
% endif
% endif
% endif % endif
<div class="feedback">
${h.link_to("Feedback", url('feedback'), class_='button')}
</div>
</div><!-- global -->
<div class="page">
${self.content_title()}
</div> </div>
</div><!-- header --> </header>
<ul class="menubar"> <div class="content-wrapper">
<li>
<a>Products</a>
<ul>
<li>${h.link_to("Products", url('products'))}</li>
<li>${h.link_to("Brands", url('brands'))}</li>
</ul>
</li>
<li>
<a>Customers</a>
<ul>
<li>${h.link_to("Customers", url('customers'))}</li>
<li>${h.link_to("Customer Groups", url('customer_groups'))}</li>
</ul>
</li>
<li>
<a>Employees</a>
<ul>
<li>${h.link_to("Employees", url('employees'))}</li>
</ul>
</li>
<li>
<a>Vendors</a>
<ul>
<li>${h.link_to("Vendors", url('vendors'))}</li>
</ul>
</li>
<li>
<a>Stores</a>
<ul>
<li>${h.link_to("Stores", url('stores'))}</li>
<li>${h.link_to("Departments", url('departments'))}</li>
<li>${h.link_to("Subdepartments", url('subdepartments'))}</li>
</ul>
</li>
% if request.has_perm('users.list') or request.has_perm('roles.list'):
<li>
<a>Auth</a>
<ul>
% if request.has_perm('users.list'):
<li>${h.link_to("Users", url('users'))}</li>
% endif
% if request.has_perm('roles.list'):
<li>${h.link_to("Roles", url('roles'))}</li>
% endif
</ul>
</li>
% endif
</ul>
<div id="body"> <div id="scrollpane">
<div id="content">
<div class="inner-content">
% if request.session.peek_flash('error'): % if request.session.peek_flash('error'):
<div class="error-messages"> <div class="error-messages">
% for error in request.session.pop_flash('error'): % for error in request.session.pop_flash('error'):
<div class="ui-state-error ui-corner-all"> <div class="ui-state-error ui-corner-all">
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> <span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
${error} ${error}
</div>
% endfor
</div> </div>
% endfor % endif
</div>
% endif
% if request.session.peek_flash(): % if request.session.peek_flash():
<div class="flash-messages"> <div class="flash-messages">
% for msg in request.session.pop_flash(): % for msg in request.session.pop_flash():
<div class="ui-state-highlight ui-corner-all"> <div class="ui-state-highlight ui-corner-all">
<span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span> <span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
${msg|n} ${msg|n}
</div>
% endfor
</div> </div>
% endfor % endif
</div>
% endif
${self.body()} ${self.body()}
</div><!-- body --> </div><!-- inner-content -->
</div><!-- content -->
</div><!-- scrollpane -->
</div><!-- content-wrapper -->
<div id="footer">
${self.footer()}
</div>
</div><!-- body-wrapper --> </div><!-- body-wrapper -->
<div id="footer">
powered by ${h.link_to("Rattail", 'http://rattailproject.org/', target='_blank')}
</div>
</body> </body>
</html> </html>
<%def name="global_title()">Tailbone</%def> <%def name="app_title()">Rattail</%def>
<%def name="global_title()">${"[STAGE] " if not request.rattail_config.production() else ''}${self.app_title()}</%def>
<%def name="title()"></%def> <%def name="title()"></%def>
<%def name="content_title()">
<h1>${self.title()}</h1>
</%def>
<%def name="favicon()"></%def>
<%def name="header_core()">
${base.core_javascript()}
${self.extra_javascript()}
${base.core_styles(jquery_theme=self.jquery_theme)}
${self.extra_styles()}
</%def>
<%def name="core_javascript()"> <%def name="core_javascript()">
${h.javascript_link('https://code.jquery.com/jquery-1.12.4.min.js')} ${h.javascript_link('https://code.jquery.com/jquery-1.12.4.min.js')}
${h.javascript_link('https://code.jquery.com/ui/{}/jquery-ui.min.js'.format(request.rattail_config.get('tailbone', 'jquery_ui.version', default='1.11.4')))} ${h.javascript_link('https://code.jquery.com/ui/{}/jquery-ui.min.js'.format(request.rattail_config.get('tailbone', 'jquery_ui.version', default='1.11.4')))}
@ -133,12 +141,14 @@
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js'))} ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js'))}
</%def> </%def>
<%def name="extra_javascript()"></%def>
<%def name="core_styles(jquery_theme=None)"> <%def name="core_styles(jquery_theme=None)">
${h.stylesheet_link(request.static_url('tailbone:static/css/normalize.css'))} ${h.stylesheet_link(request.static_url('tailbone:static/css/normalize.css'))}
% if jquery_theme: % if jquery_theme:
${jquery_theme()} ${jquery_theme()}
% else: % else:
${self.jquery_smoothness_theme()} ${self.jquery_dark_hive_theme()}
% endif % endif
${h.stylesheet_link(request.static_url('tailbone:static/css/jquery.ui.menubar.css'))} ${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.loadmask.css'))}
@ -152,10 +162,29 @@
${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css'))} ${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css'))}
</%def> </%def>
<%def name="jquery_smoothness_theme()"> <%def name="jquery_dark_hive_theme()">
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css')} ${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
</%def> </%def>
## <%def name="jquery_smoothness_theme()">
## ${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css')}
## </%def>
<%def name="extra_styles()"></%def> <%def name="extra_styles()"></%def>
<%def name="head_tags()"></%def> <%def name="head_tags()"></%def>
<%def name="header_logo()"></%def>
<%def name="footer()">
powered by ${h.link_to("Rattail", url('about'))}
</%def>
<%def name="wtfield(form, name, **kwargs)">
<div class="field-wrapper${' error' if form[name].errors else ''}">
<label for="${name}">${form[name].label}</label>
<div class="field">
${form[name](**kwargs)}
</div>
</div>
</%def>

6
tailbone/templates/master/create.mako
View file

@ -35,11 +35,7 @@
</script> </script>
</%def> </%def>
<%def name="context_menu_items()"> <%def name="context_menu_items()"></%def>
% if request.has_perm('{}.list'.format(permission_prefix)):
<li>${h.link_to("Back to {}".format(model_title_plural), index_url)}</li>
% endif
</%def>
<ul id="context-menu"> <ul id="context-menu">
${self.context_menu_items()} ${self.context_menu_items()}

3
tailbone/templates/master/edit.mako
View file

@ -1,7 +1,7 @@
## -*- coding: utf-8; -*- ## -*- coding: utf-8; -*-
<%inherit file="/base.mako" /> <%inherit file="/base.mako" />
<%def name="title()">Edit ${model_title}: ${instance_title}</%def> <%def name="title()">Edit: ${instance_title}</%def>
<%def name="extra_javascript()"> <%def name="extra_javascript()">
${parent.extra_javascript()} ${parent.extra_javascript()}
@ -32,7 +32,6 @@
</%def> </%def>
<%def name="context_menu_items()"> <%def name="context_menu_items()">
<li>${h.link_to("Back to {}".format(model_title_plural), url(route_prefix))}</li>
% if master.viewable and request.has_perm('{}.view'.format(permission_prefix)): % 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> <li>${h.link_to("View this {}".format(model_title), action_url('view', instance))}</li>
% endif % endif

2
tailbone/templates/master/index.mako
View file

@ -10,6 +10,8 @@
<%def name="title()">${index_title}</%def> <%def name="title()">${index_title}</%def>
<%def name="content_title()"></%def>
<%def name="extra_javascript()"> <%def name="extra_javascript()">
${parent.extra_javascript()} ${parent.extra_javascript()}
${h.javascript_link(request.static_url('tailbone:static/js/jquery.ui.tailbone.js'))} ${h.javascript_link(request.static_url('tailbone:static/js/jquery.ui.tailbone.js'))}

154
tailbone/templates/themes/better/base.mako
View file

@ -1,154 +0,0 @@
## -*- coding: utf-8; -*-
<%namespace name="base" file="tailbone:templates/base.mako" />
<%namespace file="/menu.mako" import="main_menu_items" />
<%namespace file="/grids/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)|n}</title>
${self.favicon()}
${self.header_core()}
% 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 class="title">${self.global_title()}</span>
</a>
% if master:
<span class="global">&raquo;</span>
% if master.listing:
<span class="global">${index_title}</span>
% else:
${h.link_to(index_title, index_url, class_='global')}
% if parent_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(parent_title, parent_url, class_='global')}
% elif instance_url is not Undefined:
<span class="global">&raquo;</span>
${h.link_to(instance_title, instance_url, class_='global')}
% endif
% 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="app_title()">Rattail</%def>
<%def name="global_title()">${"[STAGE] " if not request.rattail_config.production() else ''}${self.app_title()}</%def>
<%def name="content_title()">
<h1>${self.title()}</h1>
</%def>
<%def name="favicon()"></%def>
<%def name="header_core()">
${base.core_javascript()}
${self.extra_javascript()}
${base.core_styles(jquery_theme=self.jquery_theme)}
${self.extra_styles()}
</%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", url('about'))}
</%def>
<%def name="wtfield(form, name, **kwargs)">
<div class="field-wrapper${' error' if form[name].errors else ''}">
<label for="${name}">${form[name].label}</label>
<div class="field">
${form[name](**kwargs)}
</div>
</div>
</%def>

6
tailbone/templates/themes/better/master/create.mako
View file

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

18
tailbone/templates/themes/better/master/edit.mako
View file

@ -1,18 +0,0 @@
## -*- 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()}

6
tailbone/templates/themes/better/master/index.mako
View file

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

6
tailbone/templates/themes/better/master/view.mako
View file

@ -1,6 +0,0 @@
## -*- coding: utf-8; -*-
<%inherit file="tailbone:templates/master/view.mako" />
## TODO: remove this once it's safe (no callers use it)...
${parent.body()}