tweak index and crud styles, templates
This commit is contained in:
Lance Edgar
parent
561f25a5f3
commit
a4f00e3172
5 changed files with 323 additions and 280 deletions
130
edbob/pyramid/static/css/crud.css
Normal file
130
edbob/pyramid/static/css/crud.css
Normal file
|
|
@ -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; */
|
||||
/* } */
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
164
edbob/pyramid/static/css/index.css
Normal file
164
edbob/pyramid/static/css/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
<%def name="head_tags()">
|
||||
${parent.head_tags()}
|
||||
${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/crud.css'))}
|
||||
</%def>
|
||||
|
||||
<%def name="context_menu_items()"></%def>
|
||||
|
||||
<div class="crud wrapper">
|
||||
|
||||
<div class="right">
|
||||
${self.menu()}
|
||||
</div>
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
|
||||
<div class="left">
|
||||
${fieldset.render()|n}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<%inherit file="/base.mako" />
|
||||
<%def name="menu()"></%def>
|
||||
|
||||
<%def name="head_tags()">
|
||||
${parent.head_tags()}
|
||||
${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/index.css'))}
|
||||
</%def>
|
||||
|
||||
<%def name="context_menu_items()"></%def>
|
||||
|
||||
<div class="object-index">
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="right">
|
||||
${self.menu()|n}
|
||||
</div>
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
|
||||
<div class="left">
|
||||
${search.render()|n}
|
||||
|
|
@ -15,4 +21,4 @@
|
|||
|
||||
${grid|n}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue