template/style tweaks etc.

edbob/pyramid/grids/alchemy.py

@@ -59,6 +59,9 @@ class AlchemyGrid(Grid):
     def checkbox(self, row):
         return tags.checkbox('check-'+row.uuid)
 
+    def click_route_kwargs(self, row):
+        return {'uuid': row.uuid}
+
     def column_header(self, field):
         cls = ''
         label = field.label()
@@ -71,6 +74,9 @@ class AlchemyGrid(Grid):
             cls = ' class="%s"' % cls
         return literal('<th%s field="%s">' % (cls, field.key)) + label + literal('</th>')
 
+    def delete_route_kwargs(self, row):
+        return {'uuid': row.uuid}
+
     def iter_fields(self):
         return self._formalchemy_grid.render_fields.itervalues()
 

edbob/pyramid/static/css/edbob.css

@@ -9,6 +9,7 @@
 
 html, body {
     font-family: sans-serif;
+    font-size: 11pt;
 }
 
 a {
@@ -19,12 +20,21 @@ a:hover {
     text-decoration: underline;
 }
 
+h1 {
+    margin-bottom: 15px;
+}
+
+h2 {
+    font-size: 12pt;
+    margin: 20px auto 10px auto;
+}
+
 li {
     line-height: 2em;
 }
 
-.wrapper {
+p {
-    overflow: auto;
+    margin-bottom: 5px;
 }
 
 .left {
@@ -37,27 +47,70 @@ li {
     text-align: right;
 }
 
-td.right {
+.wrapper {
-    float: none;
+    overflow: auto;
 }
 
-table.wrapper td.right {
+div.buttons {
-    vertical-align: bottom;
+    clear: both;
+    margin-top: 10px;
 }
 
+/* div.controls { */
+/*     font-weight: bold; */
+/*     margin: 10px auto; */
+/* } */
+
+/* div.controls div { */
+/*     margin: 5px; */
+/* } */
+
+/* div.controls label { */
+/*     display: block; */
+/*     float: left; */
+/*     width: 120px; */
+/* } */
+
+div.dialog {
+    display: none;
+}
+
+div.flash-message {
+    background-color: #dddddd;
+    margin-bottom: 8px;
+    padding: 3px;
+}
+
+div.error {
+    color: #dd6666;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+/* td.right { */
+/*     float: none; */
+/* } */
+
+/* table.wrapper td.right { */
+/*     vertical-align: bottom; */
+/* } */
+
 
 /******************************
  * Main Layout
  ******************************/
 
-#main-wrapper {
+html, body, #container {
-    padding: 5px;
+    height: 100%;
-    text-align: center;
 }
 
-#main {
+body > #container {
-    margin: auto;
+    height: auto;
-    text-align: left;
+    min-height: 100%;
+}
+
+#container {
+    margin: 0 auto;
     width: 800px;
 }
 
@@ -66,6 +119,21 @@ table.wrapper td.right {
     overflow: auto;
 }
 
+#body {
+    padding-top: 15px;
+    padding-bottom: 5em;
+}
+
+#footer {
+    margin-top: -4em;
+    text-align: center;
+}
+
+
+/******************************
+ * Header
+ ******************************/
+
 #header h1 {
     margin: 0px 5px 10px 5px;
 }
@@ -97,81 +165,3 @@ table.wrapper td.right {
     display: inline;
     margin-right: 15px;
 }
-
-ul.sub-menu {
-    border-top: 1px solid black;
-}
-
-ul.sub-menu li {
-    display: inline;
-    margin-right: 15px;
-}
-
-#footer {
-    clear: both;
-    margin-top: 40px;
-    text-align: center;
-}
-
-#body {
-    padding-top: 15px;
-}
-
-h1 {
-    margin-bottom: 15px;
-}
-
-h2 {
-    font-size: 12pt;
-    margin: 20px auto 10px auto;
-}
-
-p {
-    margin-bottom: 5px;
-}
-
-div.flash-message {
-    background-color: #dddddd;
-    margin-bottom: 8px;
-    padding: 3px;
-}
-
-div.error {
-    color: #dd6666;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-div.buttons {
-    clear: both;
-    margin-top: 10px;
-}
-
-div.controls {
-    font-weight: bold;
-    margin: 10px auto;
-}
-
-div.controls div {
-    margin: 5px;
-}
-
-div.controls label {
-    display: block;
-    float: left;
-    width: 120px;
-}
-
-
-/******************************
- * Dialogs
- ******************************/
-
-div.dialog {
-    display: none;
-}
-
-/* #feedback-dialog textarea { */
-/*     height: 180px; */
-/*     width: 500px; */
-/* } */

edbob/pyramid/static/css/forms.css

@@ -15,7 +15,9 @@ div.form-wrapper ul.context-menu {
  * Forms
  ******************************/
 
-div.fieldset-form {
+div.form,
+div.fieldset-form,
+div.fieldset {
     float: left;
     margin-left: 50px;
     margin-top: 10px;
@@ -41,11 +43,11 @@ div.field-wrapper label {
     white-space: nowrap;
 }
 
-/* div.field-couple div.field-error { */
+div.field-wrapper div.field-error {
-/*     clear: both; */
+    /* clear: both; */
-/*     color: #dd6666; */
+    color: #dd6666;
-/*     font-weight: bold; */
+    font-weight: bold;
-/* } */
+}
 
 div.field-wrapper div.field {
     display: block;

edbob/pyramid/static/css/grids.css

@@ -99,13 +99,12 @@ div.grid table tr.odd {
 /*     width: 15px; */
 /* } */
 
-div.grid table td.delete {
+div.grid table tbody td.delete {
-    text-align: center;
-    width: 18px;
     background-image: url(../img/delete.png);
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
+    min-width: 18px;
 }
 
 div.grid table tbody tr.hovering {

edbob/pyramid/static/css/login.css

@@ -1,27 +1,29 @@
-
+
-/******************************
+/******************************
- * login.css
+ * login.css
- ******************************/
+ ******************************/
-
+
-div.fieldset {
+div.form {
-    text-align: center;
+    margin: auto;
-}
+    float: none;
-
+    text-align: center;
-div.field-couple {
+}
-    margin: 10px auto;
+
-    width: 300px;
+div.field-wrapper {
-}
+    margin: 10px auto;
-
+    width: 300px;
-div.field-couple label {
+}
-    margin: 0px;
+
-    text-align: right;
+div.field-wrapper label {
-    width: 100px;
+    margin: 0px;
-}
+    text-align: right;
-
+    width: 100px;
-div.field-couple input {
+}
-    width: 150px;
+
-}
+div.field-wrapper input {
-
+    width: 150px;
-div.buttons input {
+}
-    margin: auto 5px;
+
-}
+div.buttons input {
+    margin: auto 5px;
+}

edbob/pyramid/static/js/edbob.js

@@ -306,10 +306,13 @@ $(function() {
         div.load(url);
     });
 
-    $('button.autocomplete-change').live('click', function() {
+    $('div.autocomplete-container div.autocomplete-display button.autocomplete-change').live('click', function() {
-        var container = $(this).parents('div.autocomplete-container:first');
+        var container = $(this).parents('div.autocomplete-container');
-        container.find('div.autocomplete-display').hide();
+        var display = $(this).parents('div.autocomplete-display');
         var textbox = container.find('input.autocomplete-textbox');
+        var hidden = container.find('input[type=hidden]');
+        display.hide();
+        hidden.val('');
         textbox.show();
         textbox.select();
         textbox.focus();

edbob/pyramid/templates/edbob/base.mako

@@ -29,45 +29,45 @@
   </head>
 
   <body>
-    <div id="main-wrapper">
-      <div id="main">
 
-        <div id="header">
+    <div id="container">
-          ${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">
+      <div id="header">
-          % if request.session.peek_flash('error'):
+        ${self.home_link()}
-              <div id="error-messages">
+        <h1 class="left">${self.title()}</h1>
-                % for error in request.session.pop_flash('error'):
+        <div id="login" class="right">
-                    <div class="error">${error}</div>
+          % if request.user:
-                % endfor
+              logged in as <strong>${request.user.display_name}</strong>
-              </div>
+              (${h.link_to("logout", url('logout'))})
+          % else:
+              ${h.link_to("login", url('login'))}
           % 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="footer">
-          ${self.footer()}
         </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
+        % 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><!-- container -->
+
+    <div id="footer">
+      ${self.footer()}
+    </div>
 
-      </div><!-- main -->
-    </div><!-- main-wrapper -->
   </body>
 </html>

edbob/pyramid/templates/edbob/login.mako

@@ -23,7 +23,7 @@
 
 <div id="login-logo"></div>
 
-<div class="fieldset">
+<div class="form">
   ${h.form('')}
 ##  <input type="hidden" name="login" value="True" />
   <input type="hidden" name="referer" value="${referer}" />
@@ -32,12 +32,12 @@
       <div class="error">${error}</div>
   % endif
 
-  <div class="field-couple">
+  <div class="field-wrapper">
     <label for="username">Username:</label>
     <input type="text" name="username" id="username" value="" />
   </div>
 
-  <div class="field-couple">
+  <div class="field-wrapper">
     <label for="password">Password:</label>
     <input type="password" name="password" id="password" value="" />
   </div>