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;
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/******************************
|
/* /\****************************** */
|
||||||
* Filters
|
/* * Sub-Grids */
|
||||||
******************************/
|
/* ******************************\/ */
|
||||||
|
|
||||||
div.filterset {
|
/* div.subgrid { */
|
||||||
margin-bottom: 8px;
|
/* margin-top: 20px; */
|
||||||
}
|
|
||||||
|
|
||||||
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; */
|
|
||||||
/* } */
|
/* } */
|
||||||
|
|
||||||
table.search-wrapper {
|
/* div.subgrid label { */
|
||||||
border-collapse: collapse;
|
/* font-weight: bold; */
|
||||||
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 { */
|
|
||||||
/* display: block; */
|
/* display: block; */
|
||||||
/* float: right; */
|
/* float: left; */
|
||||||
/* } */
|
|
||||||
|
|
||||||
/* ul.grid-menu { */
|
|
||||||
/* display: block; */
|
|
||||||
/* float: right; */
|
|
||||||
/* list-style-type: none; */
|
|
||||||
/* margin-bottom: 5px; */
|
/* 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="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="crud wrapper">
|
||||||
|
|
||||||
<div class="right">
|
<ul id="context-menu">
|
||||||
${self.menu()}
|
${self.context_menu_items()}
|
||||||
</div>
|
</ul>
|
||||||
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
${fieldset.render()|n}
|
${fieldset.render()|n}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,18 @@
|
||||||
<%inherit file="/base.mako" />
|
<%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="object-index">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|
||||||
<div class="right">
|
<ul id="context-menu">
|
||||||
${self.menu()|n}
|
${self.context_menu_items()}
|
||||||
</div>
|
</ul>
|
||||||
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
${search.render()|n}
|
${search.render()|n}
|
||||||
|
|
@ -15,4 +21,4 @@
|
||||||
|
|
||||||
${grid|n}
|
${grid|n}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue