From a4f00e3172c338c4136097839fa0bffe2f267589 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Fri, 13 Jul 2012 11:34:49 -0500 Subject: [PATCH] tweak index and crud styles, templates --- edbob/pyramid/static/css/crud.css | 130 +++++++++++ edbob/pyramid/static/css/edbob.css | 280 +---------------------- edbob/pyramid/static/css/index.css | 164 +++++++++++++ edbob/pyramid/templates/edbob/crud.mako | 13 +- edbob/pyramid/templates/edbob/index.mako | 16 +- 5 files changed, 323 insertions(+), 280 deletions(-) create mode 100644 edbob/pyramid/static/css/crud.css create mode 100644 edbob/pyramid/static/css/index.css diff --git a/edbob/pyramid/static/css/crud.css b/edbob/pyramid/static/css/crud.css new file mode 100644 index 0000000..b64c346 --- /dev/null +++ b/edbob/pyramid/static/css/crud.css @@ -0,0 +1,130 @@ + +/************************************************************ + * crud.css + * + * Styles specific to "object CRUD" pages. + ************************************************************/ + + +/****************************** + * Wrapper + ******************************/ + +div.crud { + font-size: 10pt; + margin: auto; + width: 950px; +} + + +/****************************** + * Context Menu + ******************************/ + +div.crud #context-menu { + float: right; + list-style-type: none; +} + + +/****************************** + * Fieldsets + ******************************/ + +div.crud div.field-couple { + clear: both; + overflow: auto; + min-height: 30px; +} + +/* div.crud div.field-couple div.label, */ +div.crud div.field-couple label { + display: block; + float: left; + width: 135px; + font-weight: bold; + margin-top: 2px; + white-space: nowrap; +} + +/* div.crud div.field-couple div.field-error { */ +/* clear: both; */ +/* color: #dd6666; */ +/* font-weight: bold; */ +/* } */ + +div.crud div.field-couple div.field { + display: block; + float: left; + margin-bottom: 5px; + line-height: 25px; +} + +div.crud div.field-couple div.field input[type=text], +div.crud div.field-couple div.field input[type=password], +div.crud div.field-couple div.field select { + width: 320px; +} + +/* unbound checkbox field, e.g. 'add another' */ +div.crud div.checkbox { + margin: 10px 0px; + padding-left: 3px; +} + +div.crud div.buttons { + clear: both; + margin-top: 10px; +} + +div.crud div.buttons * { + margin-right: 8px; +} + +/* div.crud table.fieldset tbody tr { */ +/* vertical-align: top; */ +/* } */ + +/* div.crud table.fieldset tbody td { */ +/* height: 30px; */ +/* padding: 2px; */ +/* } */ + +/* div.crud table.fieldset td.label { */ +/* font-weight: bold; */ +/* width: 120px; */ +/* } */ + +/* div.crud table.fieldset tbody td ul { */ +/* padding-left: 15px; */ +/* } */ + +/* div.crud table.fieldset tbody td ul li { */ +/* line-height: 1em; */ +/* margin-bottom: 4px; */ +/* } */ + + +/****************************** + * Autocomplete + ******************************/ + +/* div.crud div.autocomplete { */ +/* border: 1px solid #000000; */ +/* margin-top: 5px; */ +/* } */ + +/* div.crud div.autocomplete div { */ +/* background-color: #dddddd; */ +/* margin: 0px; */ +/* padding: 2px 5px; */ +/* } */ + +/* div.crud div.autocomplete strong { */ +/* margin: 0px 1px; */ +/* } */ + +/* div.crud div.autocomplete .selected { */ +/* cursor: pointer; */ +/* background-color: #aaaaaa; */ +/* } */ diff --git a/edbob/pyramid/static/css/edbob.css b/edbob/pyramid/static/css/edbob.css index bcdecb0..0815886 100644 --- a/edbob/pyramid/static/css/edbob.css +++ b/edbob/pyramid/static/css/edbob.css @@ -180,281 +180,17 @@ div.dialog { width: 500px; } -/****************************** - * Filters - ******************************/ +/* /\****************************** */ +/* * Sub-Grids */ +/* ******************************\/ */ -div.filterset { - margin-bottom: 8px; -} - -div.filters { - /* margin-bottom: 10px; */ -} - -div.filter { - margin-bottom: 10px; -} - -div.filter label { - margin-right: 8px; -} - -div.filter select.filter-type { - margin-right: 8px; -} - -div.filters div.buttons * { - margin-right: 8px; -} - -/****************************** - * "Grid Management" - ******************************/ - -/* div.grid-mgmt { */ -/* float: right; */ +/* div.subgrid { */ +/* margin-top: 20px; */ /* } */ -table.search-wrapper { - border-collapse: collapse; - margin-bottom: 10px; - width: 100%; -} - -table.search-wrapper td { - /* border: 1px solid black; */ - padding: 0px; -} - -table.search-wrapper td.grid-mgmt { - text-align: right; - vertical-align: bottom; -} - -/****************************** - * Grids - ******************************/ - -/* a.add-object { */ +/* div.subgrid label { */ +/* font-weight: bold; */ /* display: block; */ -/* float: right; */ -/* } */ - -/* ul.grid-menu { */ -/* display: block; */ -/* float: right; */ -/* list-style-type: none; */ +/* float: left; */ /* margin-bottom: 5px; */ /* } */ - -div.grid { - clear: both; - /* margin-top: 8px; */ -} - -div.grid table { - border-top: 1px solid black; - border-left: 1px solid black; - border-collapse: collapse; - font-size: 9pt; - line-height: normal; - white-space: nowrap; - width: 100%; -} - -div.grid table th, -div.grid table td { - border-right: 1px solid black; - border-bottom: 1px solid black; - padding: 2px 3px; -} - -div.grid table th.sortable a { - display: block; - padding-right: 18px; -} - -div.grid table th.sorted { - background-position: right center; - background-repeat: no-repeat; -} - -div.grid table th.sorted.asc { - background-image: url(../img/sort_arrow_up.png); -} - -div.grid table th.sorted.desc { - background-image: url(../img/sort_arrow_down.png); -} - -div.grid table tr.even { - background-color: #e0e0e0; -} - -div.grid table thead th.checkbox, -div.grid table tbody td.checkbox { - text-align: center; - vertical-align: middle; - width: 15px; -} - -div.grid table td.action { - cursor: default; -} - -div.grid table td.delete { - text-align: center; - width: 18px; - background-image: url(../img/delete.png); - background-repeat: no-repeat; - background-position: center; - cursor: pointer; -} - -div.grid table tbody tr.hovering { - background-color: #bbbbbb; -} - -div.grid table.hoverable tbody tr { - cursor: default; -} - -div.grid.clickable table tbody tr { - cursor: pointer; -} - -div.grid table.selectable tbody tr, -div.grid table.checkable tbody tr { - cursor: pointer; -} - -div.grid table.selectable tbody tr.selected, -div.grid table.checkable tbody tr.selected { - background-color: #666666; - color: white; -} - -div.pager { - margin-top: 3px; -} - -div.pager p.showing { - float: left; -} - -#grid-page-count { - font-size: 85%; -} - -div.pager p.page-links { - float: right; -} - -/****************************** - * Fieldsets - ******************************/ - -div.field-couple { - clear: both; - overflow: auto; - min-height: 30px; -} - -div.field-couple div.label, -div.field-couple label { - display: block; - float: left; - width: 135px; - font-weight: bold; - margin-top: 2px; - white-space: nowrap; -} - -div.field-couple div.field-error { - clear: both; - color: #dd6666; - font-weight: bold; -} - -div.field-couple div.field { - display: block; - float: left; - margin-bottom: 5px; - line-height: 25px; -} - -div.field-couple div.field input[type=text], -div.field-couple div.field input[type=password], -div.field-couple div.field select { - width: 320px; -} - -/* unbound checkbox field, e.g. 'add another' */ -div.checkbox { - margin: 15px 0px; - padding-left: 3px; -} - -table.fieldset tbody tr { - vertical-align: top; -} - -table.fieldset tbody td { - height: 30px; - padding: 2px; -} - -table.fieldset td.label { - font-weight: bold; - width: 120px; -} - -table.fieldset tbody td ul { - padding-left: 15px; -} - -table.fieldset tbody td ul li { - line-height: 1em; - margin-bottom: 4px; -} - - -/****************************** - * Sub-Grids - ******************************/ - -div.subgrid { - margin-top: 20px; -} - -div.subgrid label { - font-weight: bold; - display: block; - float: left; - margin-bottom: 5px; -} - -/****************************** - * Autocomplete - ******************************/ - -div.autocomplete { - border: 1px solid #000000; - margin-top: 5px; -} - -div.autocomplete div { - background-color: #dddddd; - margin: 0px; - padding: 2px 5px; -} - -div.autocomplete strong { - margin: 0px 1px; -} - -div.autocomplete .selected { - cursor: pointer; - background-color: #aaaaaa; -} diff --git a/edbob/pyramid/static/css/index.css b/edbob/pyramid/static/css/index.css new file mode 100644 index 0000000..c450b38 --- /dev/null +++ b/edbob/pyramid/static/css/index.css @@ -0,0 +1,164 @@ + +/************************************************************ + * index.css + * + * Styles specific to "object index" pages. + ************************************************************/ + + +/****************************** + * Wrapper + ******************************/ + +div.object-index { + font-size: 10pt; + margin: auto; + width: 950px; +} + +div.object-index div.wrapper { + overflow: auto; + padding-bottom: 10px; +} + + +/****************************** + * Context Menu + ******************************/ + +div.object-index #context-menu { + float: right; + list-style-type: none; +} + + +/****************************** + * Filters + ******************************/ + +div.object-index div.filterset div.filter { + margin-bottom: 10px; +} + +div.object-index div.filterset div.filter label, +div.object-index div.filterset div.filter select.filter-type { + margin-right: 8px; +} + +div.object-index div.filterset div.buttons * { + margin-right: 8px; +} + + +/****************************** + * Grids + ******************************/ + +div.object-index div.grid { + clear: both; +} + +div.object-index div.grid table { + border-top: 1px solid black; + border-left: 1px solid black; + border-collapse: collapse; + font-size: 9pt; + line-height: normal; + white-space: nowrap; + width: 100%; +} + +div.object-index div.grid table th, +div.object-index div.grid table td { + border-right: 1px solid black; + border-bottom: 1px solid black; + padding: 2px 3px; +} + +div.object-index div.grid table th.sortable a { + display: block; + padding-right: 18px; +} + +div.object-index div.grid table th.sorted { + background-position: right center; + background-repeat: no-repeat; +} + +div.object-index div.grid table th.sorted.asc { + background-image: url(../img/sort_arrow_up.png); +} + +div.object-index div.grid table th.sorted.desc { + background-image: url(../img/sort_arrow_down.png); +} + +div.object-index div.grid table tbody td { + text-align: left; +} + +div.object-index div.grid table tr.even { + background-color: #e0e0e0; +} + +/* div.grid table thead th.checkbox, */ +/* div.grid table tbody td.checkbox { */ +/* text-align: center; */ +/* vertical-align: middle; */ +/* width: 15px; */ +/* } */ + +/* div.grid table td.action { */ +/* cursor: default; */ +/* } */ + +div.object-index div.grid table td.delete { + text-align: center; + width: 18px; + background-image: url(../img/delete.png); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; +} + +div.object-index div.grid table tbody tr.hovering { + background-color: #bbbbbb; +} + +div.object-index div.grid table.hoverable tbody tr { + cursor: default; +} + +div.object-index div.grid.clickable table tbody tr, +div.object-index div.grid table.selectable tbody tr, +div.object-index div.grid table.checkable tbody tr { + cursor: pointer; +} + +/* div.grid table.selectable tbody tr.selected, */ +/* div.grid table.checkable tbody tr.selected { */ +/* background-color: #666666; */ +/* color: white; */ +/* } */ + +div.object-index div.pager { + margin-top: 5px; +} + +div.object-index div.pager p { + font-size: 10pt; + margin: 0px; +} + +div.object-index div.pager p.showing { + float: left; +} + +div.object-index div.pager #grid-page-count { + font-size: 8pt; + height: 21px; +} + +div.object-index div.pager p.page-links { + float: right; +} diff --git a/edbob/pyramid/templates/edbob/crud.mako b/edbob/pyramid/templates/edbob/crud.mako index 287c30a..e999beb 100644 --- a/edbob/pyramid/templates/edbob/crud.mako +++ b/edbob/pyramid/templates/edbob/crud.mako @@ -2,11 +2,18 @@ <%def name="title()">${(fieldset.crud_title+' : '+fieldset.get_display_text() if fieldset.edit else 'New '+fieldset.crud_title) if crud else ''} +<%def name="head_tags()"> + ${parent.head_tags()} + ${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/crud.css'))} + + +<%def name="context_menu_items()"> +
-
- ${self.menu()} -
+
${fieldset.render()|n} diff --git a/edbob/pyramid/templates/edbob/index.mako b/edbob/pyramid/templates/edbob/index.mako index 814739b..fea438a 100644 --- a/edbob/pyramid/templates/edbob/index.mako +++ b/edbob/pyramid/templates/edbob/index.mako @@ -1,12 +1,18 @@ <%inherit file="/base.mako" /> -<%def name="menu()"> + +<%def name="head_tags()"> + ${parent.head_tags()} + ${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/index.css'))} + + +<%def name="context_menu_items()">
-
- ${self.menu()|n} -
+
    + ${self.context_menu_items()} +
${search.render()|n} @@ -15,4 +21,4 @@ ${grid|n} -
\ No newline at end of file +