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

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

Browse source 
finally, we have that hugging the top right corner, without float!
This commit is contained in:
Lance Edgar 2018-11-29 12:04:29 -06:00
parent c88e1cca68
commit 291128b96f
8 changed files with 182 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

141
tailbone/static/themes/bobcat/css/forms.css Normal file
View file

@ -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; */
/* } */

29
tailbone/static/themes/bobcat/css/layout.css
View file

@ -32,32 +32,35 @@
* header
******************************/
header nav.level {
background-color: #eaeaea;
header .level {
/* 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;
}

4
tailbone/templates/forms/deform.mako
View file

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

16
tailbone/templates/master/view.mako
View file

@ -69,13 +69,17 @@
% endif
</%def>
<ul id="context-menu">
${self.context_menu_items()}
</ul>
<div style="display: flex; justify-content: space-between;">
<div class="form-wrapper">
${form.render()|n}
</div><!-- form-wrapper -->
<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}

34
tailbone/templates/themes/bobcat/base.mako
View file

@ -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:
${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
<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>
${error|n}
<!-- <button class="delete"></button> -->
${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>
${msg|n}
<!-- <button class="delete"></button> -->
${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>