Merge 'better' theme into base templates

i.e. for now there is no 'better' (or any other) theme

tailbone/app.py

@@ -1,4 +1,4 @@
-# -*- coding: utf-8 -*-
+# -*- coding: utf-8; -*-
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
@@ -175,9 +175,7 @@ def main(global_config, **settings):
     """
     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)
     pyramid_config = make_pyramid_config(settings)
     pyramid_config.include('tailbone')

tailbone/static/css/base.css

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

tailbone/static/css/forms.css

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

tailbone/static/css/grids.css

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

tailbone/static/css/layout.css

@@ -57,6 +57,59 @@ body > #body-wrapper {
     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
  ******************************/
@@ -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
  ******************************/
@@ -74,7 +150,9 @@ body > #body-wrapper {
 #context-menu {
     float: right;
     list-style-type: none;
+    margin: 0.5em;
     text-align: right;
+    white-space: nowrap;
 }
 
 
@@ -110,3 +188,19 @@ body > #body-wrapper {
     overflow: auto;
     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%;
+}

tailbone/static/css/theme-better.css

@@ -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%;
-}

tailbone/templates/base.mako

@@ -1,84 +1,73 @@
-## -*- 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>
-<html style="direction: ltr;" xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
+<html lang="en">
   <head>
     <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()}
   </head>
 
   <body>
-
     <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>
-        <div class="login">
-          % if request.user:
-              ${h.link_to(request.user.display_name, url('change_password'))}
-              (${h.link_to("logout", url('logout'))})
-          % else:
-              ${h.link_to("login", url('login'))}
-          % endif
-        </div>
-      </div><!-- header -->
-
           <ul class="menubar">
-        <li>
+            ${main_menu_items()}
-          <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>
+        </nav>
 
-      <div id="body">
+        <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">
@@ -104,21 +93,40 @@
 
               ${self.body()}
 
-      </div><!-- body -->
+            </div><!-- inner-content -->
+          </div><!-- content -->
+        </div><!-- scrollpane -->
 
-    </div><!-- body-wrapper -->
+      </div><!-- content-wrapper -->
 
       <div id="footer">
-      powered by ${h.link_to("Rattail", 'http://rattailproject.org/', target='_blank')}
+        ${self.footer()}
       </div>
 
+    </div><!-- body-wrapper -->
+
   </body>
 </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="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()">
   ${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')))}
@@ -133,12 +141,14 @@
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js'))}
 </%def>
 
+<%def name="extra_javascript()"></%def>
+
 <%def name="core_styles(jquery_theme=None)">
   ${h.stylesheet_link(request.static_url('tailbone:static/css/normalize.css'))}
   % if jquery_theme:
       ${jquery_theme()}
   % else:
-      ${self.jquery_smoothness_theme()}
+      ${self.jquery_dark_hive_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'))}
@@ -152,10 +162,29 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css'))}
 </%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 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="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>

tailbone/templates/master/create.mako

@@ -35,11 +35,7 @@
   </script>
 </%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">
   ${self.context_menu_items()}

tailbone/templates/master/edit.mako

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

tailbone/templates/master/index.mako

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

tailbone/templates/themes/better/base.mako

@@ -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>

tailbone/templates/themes/better/master/create.mako

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

tailbone/templates/themes/better/master/edit.mako

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

tailbone/templates/themes/better/master/index.mako

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

tailbone/templates/themes/better/master/view.mako

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