Refactor default and bobcat theme re: "context menu" styles

finally, we have that hugging the top right corner, without float!

tailbone/static/css/forms.css

@@ -8,22 +8,6 @@ div.form-wrapper {
 }
 
 
-/******************************
- * Context Menu
- ******************************/
-
-div.form-wrapper ul.context-menu {
-    float: right;
-    list-style-type: none;
-    margin: 0px;
-    text-align: right;
-}
-
-div.form-wrapper ul.context-menu li {
-    line-height: 2em;
-}
-
-
 /******************************
  * "object helper" panel
  ******************************/

tailbone/static/css/grids.css

@@ -22,7 +22,6 @@
 }
 
 .grid-wrapper .grid-header #context-menu {
-    float: none;
     margin: 0;
 }
 

tailbone/static/css/layout.css

@@ -145,7 +145,6 @@ body > #body-wrapper {
  ******************************/
 
 #context-menu {
-    float: right;
     list-style-type: none;
     margin: 0.5em;
     text-align: right;

tailbone/static/themes/bobcat/css/forms.css

@@ -0,0 +1,141 @@
+
+/* /\****************************** */
+/*  * Form Wrapper */
+/*  ******************************\/ */
+
+/* div.form-wrapper { */
+/*     overflow: auto; */
+/* } */
+
+
+/******************************
+ * context menu
+ ******************************/
+
+/* #context-menu { */
+/*     /\* background-color: #ddcccc; *\/ */
+/*     /\* background-color: green; *\/ */
+/*     float: right; */
+/*     /\* list-style-type: none; *\/ */
+/*     /\* margin: 0px; *\/ */
+/*     text-align: right; */
+/* } */
+
+/* div.form-wrapper ul.context-menu li { */
+/*     line-height: 2em; */
+/* } */
+
+
+/* /\****************************** */
+/*  * "object helper" panel */
+/*  ******************************\/ */
+
+/* .object-helper { */
+/*     border: 1px solid black; */
+/*     float: right; */
+/*     margin-top: 1em; */
+/*     padding: 1em; */
+/*     width: 20em; */
+/* } */
+
+/* .object-helper-content { */
+/*     margin-top: 1em; */
+/* } */
+
+
+/******************************
+ * forms
+ ******************************/
+
+/* div.form, */
+/* div.fieldset-form, */
+/* div.fieldset { */
+/*     clear: left; */
+/*     float: left; */
+/*     margin-top: 10px; */
+/* } */
+
+/* TODO: replace this with bulma equivalent */
+.form {
+    padding-left: 5em;
+}
+
+
+/******************************
+ * fieldsets
+ ******************************/
+
+/* TODO: replace this with bulma equivalent */
+.field-wrapper {
+    clear: both;
+    min-height: 30px;
+    overflow: auto;
+    margin: 15px;
+}
+
+/* .field-wrapper.with-error { */
+/*     background-color: #ddcccc; */
+/*     border: 2px solid #dd6666; */
+/*     padding-bottom: 1em; */
+/* } */
+
+/* TODO: replace this with bulma equivalent */
+.field-wrapper .field-row {
+    display: table-row;
+}
+
+/* TODO: replace this with bulma equivalent */
+.field-wrapper label {
+    display: table-cell;
+    vertical-align: top;
+    width: 18em;
+    font-weight: bold;
+    padding-top: 2px;
+    white-space: nowrap;
+}
+
+/* .field-wrapper.with-error label { */
+/*     padding-left: 1em; */
+/* } */
+
+/* .field-wrapper .field-error { */
+/*     padding: 1em 0 0.5em 1em; */
+/* } */
+
+/* .field-wrapper .field-error .error-msg { */
+/*     color: #dd6666; */
+/*     font-weight: bold; */
+/* } */
+
+/* TODO: replace this with bulma equivalent */
+.field-wrapper .field {
+    display: table-cell;
+    line-height: 25px;
+}
+
+/* .field-wrapper .field input[type=text], */
+/* .field-wrapper .field input[type=password], */
+/* .field-wrapper .field select, */
+/* .field-wrapper .field textarea { */
+/*     width: 320px; */
+/* } */
+
+/* label input[type="checkbox"], */
+/* label input[type="radio"] { */
+/*     margin-right: 0.5em; */
+/* } */
+
+/* .field ul { */
+/*     margin: 0px; */
+/*     padding-left: 15px; */
+/* } */
+
+
+/* /\****************************** */
+/*  * Buttons */
+/*  ******************************\/ */
+
+/* div.buttons { */
+/*     clear: both; */
+/*     margin: 10px 0px; */
+/* } */

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

@@ -32,32 +32,35 @@
  * header
  ******************************/
 
-header nav.level {
+header .level {
-    background-color: #eaeaea;
     /* height: 60px; */
     line-height: 60px;
     padding-left: 0.5em;
     padding-right: 0.5em;
 }
 
-header nav.level #header-logo {
+header .level #header-logo {
     display: inline-block;
 }
 
-header nav.level .global-title {
+header .level .global-title {
     font-size: 2em;
     font-weight: bold;
 }
 
-header nav.level #current-context {
+header .level #current-context {
     font-size: 2em;
     font-weight: bold;
 }
 
-header nav.level #current-context span {
+header .level #current-context span {
     margin-right: 10px;
 }
 
+header .level .theme-picker {
+    display: inline-flex;
+}
+
 /* header .global .grid-nav { */
 /*     display: inline-block; */
 /*     font-size: 16px; */
@@ -85,9 +88,13 @@ header nav.level #current-context span {
 /* } */
 
 
-/* /\**************************************** */
+/******************************
-/*  * content */
+ * content
-/*  ****************************************\/ */
+ ******************************/
+
+#page-body {
+    padding: 0.4em;
+}
 
 /* body > #body-wrapper { */
 /*     margin: 0px; */
@@ -112,11 +119,7 @@ header nav.level #current-context span {
  * 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;
 }

tailbone/templates/forms/deform.mako

@@ -81,12 +81,12 @@ ${h.csrf_token(request)}
 % elif not readonly and (buttons is Undefined or (buttons is not None and buttons is not False)):
     <div class="buttons">
       ## ${h.submit('create', form.create_label if form.creating else form.update_label)}
-      ${h.submit('save', getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")))}
+      ${h.submit('save', getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")), class_='button is-primary')}
 ##         % if form.creating and form.allow_successive_creates:
 ##             ${h.submit('create_and_continue', form.successive_create_label)}
 ##         % endif
       % if getattr(form, 'show_reset', False):
-          <input type="reset" value="Reset" />
+          <input type="reset" value="Reset" class="button" />
       % endif
       % if getattr(form, 'show_cancel', True):
           % if form.mobile:

tailbone/templates/master/view.mako

@@ -69,14 +69,18 @@
   % endif
 </%def>
 
-<ul id="context-menu">
+<div style="display: flex; justify-content: space-between;">
-  ${self.context_menu_items()}
-</ul>
 
   <div class="form-wrapper">
     ${form.render()|n}
   </div><!-- form-wrapper -->
 
+  <ul id="context-menu">
+    ${self.context_menu_items()}
+  </ul>
+
+</div>
+
 % if master.has_rows:
     ${rows_grid|n}
 % endif

tailbone/templates/themes/bobcat/base.mako

@@ -105,10 +105,14 @@
           ## 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.form(url('change_theme'), method="post")}
                 ${h.csrf_token(request)}
                 Theme:
+                <div class="theme-picker">
+                  <div class="select">
                     ${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
+                  </div>
+                </div>
                 ${h.end_form()}
               </div>
           % endif
@@ -122,7 +126,7 @@
 
           ## Feedback Button
           <div class="level-item">
-            <button type="button" id="feedback">Feedback</button>
+            <button type="button" class="button is-primary" id="feedback">Feedback</button>
           </div>
 
         </div><!-- level-right -->
@@ -137,13 +141,13 @@
     </section>
 
     ## Page Body
-    <section>
+    <section id="page-body">
 
       % if request.session.peek_flash('error'):
           % for error in request.session.pop_flash('error'):
               <div class="notification is-warning">
-                <button class="delete"></button>
+                <!-- <button class="delete"></button> -->
-                ${error|n}
+                ${error}
               </div>
           % endfor
       % endif
@@ -151,8 +155,8 @@
       % if request.session.peek_flash():
           % for msg in request.session.pop_flash():
               <div class="notification is-info">
-                <button class="delete"></button>
+                <!-- <button class="delete"></button> -->
-                ${msg|n}
+                ${msg}
               </div>
           % endfor
       % endif
@@ -200,7 +204,6 @@
 
 <%def name="core_javascript()">
   ${self.jquery()}
-  ${h.javascript_link(request.static_url('tailbone:static/js/lib/jquery.ui.menubar.js'))}
   ${h.javascript_link(request.static_url('tailbone:static/js/lib/jquery.loadmask.min.js'))}
   ${h.javascript_link(request.static_url('tailbone:static/js/lib/jquery.ui.timepicker.js'))}
   <script type="text/javascript">
@@ -214,16 +217,6 @@
             });
         });
     % endif
-
-    ## TODO: replace this with bulma menu!
-    $(function() {
-        $('ul.menubar').menubar({
-            buttons: true,
-            menuIcon: true,
-            autoExpand: true
-        });
-    });
-
   </script>
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
@@ -242,7 +235,6 @@
   ${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__))}
@@ -251,7 +243,7 @@
   ${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__))}
+  ${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
   ${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}
 </%def>