From 1166bc28cc9156eaf6b33d4c8428ac4134c5a959 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Thu, 2 Aug 2012 10:41:31 -0700
Subject: [PATCH] tweaked autocomplete, styles

---
 edbob/pyramid/static/css/autocomplete.css |  24 ++++
 edbob/pyramid/static/css/crud.css         |  95 ++++---------
 edbob/pyramid/static/css/edbob.css        | 164 ++++++++++++++++++++++
 edbob/pyramid/static/css/index.css        | 163 ++++++++++-----------
 edbob/pyramid/templates/edbob/base.mako   |  63 +++++----
 edbob/pyramid/views/autocomplete.py       |   4 +-
 6 files changed, 329 insertions(+), 184 deletions(-)
 create mode 100644 edbob/pyramid/static/css/autocomplete.css

diff --git a/edbob/pyramid/static/css/autocomplete.css b/edbob/pyramid/static/css/autocomplete.css
new file mode 100644
index 0000000..70cf0c0
--- /dev/null
+++ b/edbob/pyramid/static/css/autocomplete.css
@@ -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;
+}
diff --git a/edbob/pyramid/static/css/crud.css b/edbob/pyramid/static/css/crud.css
index 1422d63..671227b 100644
--- a/edbob/pyramid/static/css/crud.css
+++ b/edbob/pyramid/static/css/crud.css
@@ -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;
-}
diff --git a/edbob/pyramid/static/css/edbob.css b/edbob/pyramid/static/css/edbob.css
index 0815886..1efb683 100644
--- a/edbob/pyramid/static/css/edbob.css
+++ b/edbob/pyramid/static/css/edbob.css
@@ -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;
+}
diff --git a/edbob/pyramid/static/css/index.css b/edbob/pyramid/static/css/index.css
index 8760c0e..0092b5e 100644
--- a/edbob/pyramid/static/css/index.css
+++ b/edbob/pyramid/static/css/index.css
@@ -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; */
+/* } */
diff --git a/edbob/pyramid/templates/edbob/base.mako b/edbob/pyramid/templates/edbob/base.mako
index 5f6a34e..c40deb8 100644
--- a/edbob/pyramid/templates/edbob/base.mako
+++ b/edbob/pyramid/templates/edbob/base.mako
@@ -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 -->
diff --git a/edbob/pyramid/views/autocomplete.py b/edbob/pyramid/views/autocomplete.py
index 8f627d1..a967bbf 100644
--- a/edbob/pyramid/views/autocomplete.py
+++ b/edbob/pyramid/views/autocomplete.py
@@ -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