Turn on Bulma CSS framework for 'bobcat' theme

still trying to match the default theme here, but only in spirit, and giving
priority to doing things "the bulma way" if possible

tailbone/static/themes/bobcat/css/base.css

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

tailbone/static/themes/bobcat/css/layout.css

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

tailbone/templates/themes/bobcat/base.mako

@@ -30,56 +30,82 @@
           </ul>
         </nav>
 
-        <div class="global">
+        <nav class="level">
-          <a class="home" href="${url('home')}">
-            ${base_meta.header_logo()}
-            <span class="global-title">${base_meta.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
-          % elif index_title:
-              <span class="global">&raquo;</span>
-              <span class="global">${index_title}</span>
-          % endif
 
-          <div class="feedback">
+          <div class="level-left">
-            % if help_url is not Undefined and help_url:
+
-                ${h.link_to("Help", help_url, target='_blank', class_='button')}
+            ## Home
+            <div class="level-item">
+              <a class="home" href="${url('home')}">
+                <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>&raquo;</span>
+                  % if master.listing:
+                      <span>${index_title}</span>
+                  % else:
+                      ${h.link_to(index_title, index_url)}
+                      % if parent_url is not Undefined:
+                          <span>&raquo;</span>
+                          ${h.link_to(parent_title, parent_url)}
+                      % elif instance_url is not Undefined:
+                          <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>&raquo;</span>
+                  <span>${index_title}</span>
+              % endif
+            </div>
+
+          </div><!-- level-left -->
+
+          <div class="level-right">
+
+            ## Theme Picker
+            % if expose_theme_picker and request.has_perm('common.change_app_theme'):
+                <div class="level-item">
+                  ${h.form(url('change_theme'), name="theme_changer", method="post")}
+                  ${h.csrf_token(request)}
+                  Theme:
+                  ${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
+                  ${h.end_form()}
+                </div>
             % endif
-            <button type="button" id="feedback">Feedback</button>
+
+            ## 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
+
+            ## Feedback
+            <div class="level-item">
+              <button type="button" id="feedback">Feedback</button>
+            </div>
+
           </div>
 
-          % if expose_theme_picker and request.has_perm('common.change_app_theme'):
+        </nav><!-- level -->
-              <div class="after-feedback">
-                ${h.form(url('change_theme'), name="theme_changer", method="post")}
-                ${h.csrf_token(request)}
-                Theme:
-                ${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
-                ${h.end_form()}
-              </div>
-          % endif
 
-        </div><!-- global -->
+      </header>
 
-        <div class="page">
+      ## 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>