tweaked autocomplete, styles
This commit is contained in:
Lance Edgar
parent
ba339b4dd8
commit
1166bc28cc
6 changed files with 329 additions and 184 deletions
24
edbob/pyramid/static/css/autocomplete.css
Normal file
24
edbob/pyramid/static/css/autocomplete.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
/******************************
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -30,40 +30,34 @@ div.crud #context-menu {
|
|||
* 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: 140px;
|
||||
font-weight: bold;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* div.crud div.field-couple div.field-error { */
|
||||
/* div.crud div.field-couple { */
|
||||
/* clear: both; */
|
||||
/* color: #dd6666; */
|
||||
/* font-weight: bold; */
|
||||
/* overflow: auto; */
|
||||
/* min-height: 30px; */
|
||||
/* } */
|
||||
|
||||
div.crud div.field-couple div.field {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
/* /\* div.crud div.field-couple div.label, *\/ */
|
||||
/* div.crud div.field-couple label { */
|
||||
/* display: block; */
|
||||
/* float: left; */
|
||||
/* width: 140px; */
|
||||
/* font-weight: bold; */
|
||||
/* margin-top: 2px; */
|
||||
/* white-space: nowrap; */
|
||||
/* } */
|
||||
|
||||
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;
|
||||
}
|
||||
/* 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 {
|
||||
|
|
@ -71,14 +65,14 @@ div.crud div.checkbox {
|
|||
padding-left: 3px;
|
||||
}
|
||||
|
||||
div.crud div.buttons {
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* div.crud div.buttons { */
|
||||
/* clear: both; */
|
||||
/* margin-top: 10px; */
|
||||
/* } */
|
||||
|
||||
div.crud div.buttons * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
/* div.crud div.buttons * { */
|
||||
/* margin-right: 8px; */
|
||||
/* } */
|
||||
|
||||
/* div.crud table.fieldset tbody tr { */
|
||||
/* vertical-align: top; */
|
||||
|
|
@ -102,30 +96,3 @@ div.crud div.buttons * {
|
|||
/* line-height: 1em; */
|
||||
/* margin-bottom: 4px; */
|
||||
/* } */
|
||||
|
||||
|
||||
/******************************
|
||||
* Autocomplete
|
||||
******************************/
|
||||
|
||||
/* Note that these are not prefixed with 'div.crud '. */
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,6 +180,121 @@ div.dialog {
|
|||
width: 500px;
|
||||
}
|
||||
|
||||
|
||||
/******************************
|
||||
* Grids
|
||||
******************************/
|
||||
|
||||
div.grid {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
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 tbody td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
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,
|
||||
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: 5px;
|
||||
}
|
||||
|
||||
div.pager p {
|
||||
font-size: 10pt;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
div.pager p.showing {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.pager #grid-page-count {
|
||||
font-size: 8pt;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
div.pager p.page-links {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* /\****************************** */
|
||||
/* * Sub-Grids */
|
||||
/* ******************************\/ */
|
||||
|
|
@ -194,3 +309,52 @@ div.dialog {
|
|||
/* float: left; */
|
||||
/* margin-bottom: 5px; */
|
||||
/* } */
|
||||
|
||||
|
||||
/******************************
|
||||
* 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: 140px;
|
||||
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;
|
||||
}
|
||||
|
||||
div.buttons {
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.buttons * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,86 +66,75 @@ div.object-index table.header td.tools {
|
|||
* Grids
|
||||
******************************/
|
||||
|
||||
div.object-index div.grid {
|
||||
clear: both;
|
||||
}
|
||||
/* 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;
|
||||
/* 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.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.grid table td.action { */
|
||||
/* 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.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 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.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 { */
|
||||
|
|
@ -153,24 +142,24 @@ div.object-index div.grid table.checkable tbody tr {
|
|||
/* color: white; */
|
||||
/* } */
|
||||
|
||||
div.object-index div.pager {
|
||||
margin-top: 5px;
|
||||
}
|
||||
/* 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 { */
|
||||
/* font-size: 10pt; */
|
||||
/* margin: 0px; */
|
||||
/* } */
|
||||
|
||||
div.object-index div.pager p.showing {
|
||||
float: left;
|
||||
}
|
||||
/* 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 #grid-page-count { */
|
||||
/* font-size: 8pt; */
|
||||
/* height: 21px; */
|
||||
/* } */
|
||||
|
||||
div.object-index div.pager p.page-links {
|
||||
float: right;
|
||||
}
|
||||
/* div.object-index div.pager p.page-links { */
|
||||
/* float: right; */
|
||||
/* } */
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/smoothness/jquery-ui-1.8.2.custom.css'))}
|
||||
${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/edbob.css'))}
|
||||
${h.stylesheet_link(request.static_url('edbob.pyramid:static/css/autocomplete.css'))}
|
||||
|
||||
${self.head_tags()}
|
||||
</head>
|
||||
|
|
@ -28,40 +29,40 @@
|
|||
<div id="main-wrapper">
|
||||
<div id="main">
|
||||
|
||||
<div id="header">
|
||||
${self.home_link()}
|
||||
<h1 class="left">${self.title()}</h1>
|
||||
<div id="login" class="right">
|
||||
% if request.user:
|
||||
logged in as <strong>${request.user.display_name}</strong>
|
||||
(${h.link_to("logout", url('logout'))})
|
||||
% else:
|
||||
${h.link_to("login", url('login'))}
|
||||
% endif
|
||||
</div>
|
||||
</div><!-- header -->
|
||||
<div id="header">
|
||||
${self.home_link()}
|
||||
<h1 class="left">${self.title()}</h1>
|
||||
<div id="login" class="right">
|
||||
% if request.user:
|
||||
logged in as <strong>${request.user.display_name}</strong>
|
||||
(${h.link_to("logout", url('logout'))})
|
||||
% else:
|
||||
${h.link_to("login", url('login'))}
|
||||
% endif
|
||||
</div>
|
||||
</div><!-- header -->
|
||||
|
||||
<div id="body">
|
||||
## % if request.session.peek_flash('error'):
|
||||
## <div id="error-messages">
|
||||
## % for error in request.session.pop_flash('error'):
|
||||
## <div class="error">${error}</div>
|
||||
## % endfor
|
||||
## </div>
|
||||
## % endif
|
||||
<div id="body">
|
||||
## % if request.session.peek_flash('error'):
|
||||
## <div id="error-messages">
|
||||
## % for error in request.session.pop_flash('error'):
|
||||
## <div class="error">${error}</div>
|
||||
## % endfor
|
||||
## </div>
|
||||
## % endif
|
||||
% if request.session.peek_flash():
|
||||
<div id="flash-messages">
|
||||
% for msg in request.session.pop_flash():
|
||||
<div class="flash-message">${msg|n}</div>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
${self.body()}
|
||||
</div><!-- body -->
|
||||
<div id="flash-messages">
|
||||
% for msg in request.session.pop_flash():
|
||||
<div class="flash-message">${msg|n}</div>
|
||||
% endfor
|
||||
</div>
|
||||
% endif
|
||||
${self.body()}
|
||||
</div><!-- body -->
|
||||
|
||||
<div id="footer">
|
||||
${self.footer()}
|
||||
</div>
|
||||
<div id="footer">
|
||||
${self.footer()}
|
||||
</div>
|
||||
|
||||
</div><!-- main -->
|
||||
</div><!-- main-wrapper -->
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ from edbob.pyramid.forms.formalchemy import AutocompleteFieldRenderer
|
|||
from edbob.util import requires_impl
|
||||
|
||||
|
||||
__all__ = ['Autocomplete']
|
||||
__all__ = ['AutocompleteView']
|
||||
|
||||
|
||||
class Autocomplete(object):
|
||||
class AutocompleteView(object):
|
||||
|
||||
route = None
|
||||
url = None
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue