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,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>
+                          <span>&raquo;</span>
-                      ${h.link_to(parent_title, parent_url, class_='global')}
+                          ${h.link_to(parent_title, parent_url)}
                       % elif instance_url is not Undefined:
-                      <span class="global">&raquo;</span>
+                          <span>&raquo;</span>
-                      ${h.link_to(instance_title, instance_url, class_='global')}
+                          ${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>&raquo;</span>
-              <span class="global">${index_title}</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>