changeset 64:f3ed8e9abf4a

More HTML cleanup and CSS tweaks.
author Daniele Nicolodi <daniele@grinta.net>
date Sat, 13 Aug 2011 23:56:30 +0200
parents 52480306b641
children ccf7eda51468
files src/ltpdarepo/static/style.css src/ltpdarepo/templates/login.html src/ltpdarepo/templates/objs.html src/ltpdarepo/templates/pagination.html src/ltpdarepo/templates/query.html src/ltpdarepo/templates/user.html src/ltpdarepo/templates/users/view.html
diffstat 7 files changed, 92 insertions(+), 96 deletions(-) [+]
line wrap: on
line diff
--- a/src/ltpdarepo/static/style.css	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/static/style.css	Sat Aug 13 23:56:30 2011 +0200
@@ -1,11 +1,17 @@
 /* color palette inspired by http://www.colourlovers.com/palette/1133393/Green_Shades */
 
-html, body {    
+html, body {
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
+body {
+    font-family: lucida grande, verdana, sans-serif;
+    font-size: 13px;
+    color: #000;
+}
+
 pre {
     font-family: andale mono, monospace;
 }
@@ -18,22 +24,14 @@
     outline: none;
 }
 
-.hidden {
-    display: none;
-}
-
-.small {
-    font-size: 90%;
+a {
+    color: #0F67A1;
 }
 
-body {
-    font-family: lucida grande, verdana, sans-serif;
-    font-size: 13px;
-    color: #000;
-}
+/* structure */
 
-a {
-    color: #0F67A1;
+.discrete {
+    color: #888;
 }
 
 .content {
@@ -52,7 +50,7 @@
 
 .header div {
     display: block;
-    margin: 0px 10em;    
+    margin: 0px 10em;
     color: #555;
 }
 
@@ -109,20 +107,10 @@
     line-height: 1.4;
 }
 
-.discrete {
-    color: #666;
-}
-
-.important {
-    color: #BB0000;
-    margin: 1em 0;
-}
-
 div.breadcrumbs, div.user {
-    float: left;
     padding-top: 0.4em;
     font-size: 90%;
-    color: #666; 
+    color: #888;
 }
 
 div.breadcrumbs {
@@ -139,13 +127,7 @@
 }
 
 div.breadcrumbs a:hover, div.user a:hover {
-    border-bottom: 1px solid #999;
-}
-
-div.clear {
-    width: 100%;
-    height: 0;
-    clear: both;
+    border-bottom: 1px solid #888;
 }
 
 /* data display styling */
@@ -156,7 +138,7 @@
 }
 
 span.label {
-    color: #666;
+    color: #888;
 }
 
 /* tables styling */
@@ -167,7 +149,7 @@
     padding: 0.2em 1em;
     border-bottom: 1px solid #BFBFBF;
     text-transform: lowercase;
-    color: #666;
+    color: #888;
 }
 
 td {
@@ -200,7 +182,6 @@
 
 .flash {
     padding: 0.5em 0em 0em;
-    color: #666;
 }
 
 .message {
@@ -208,7 +189,7 @@
 }
 
 .error {
-    color: #BB0000;
+    color: #DC143C;
 }
 
 /* forms styling */
@@ -224,8 +205,8 @@
 }
 
 div.help {
-    color: #666;
-    font-size: 80%;
+    color: #888;
+    font-size: 90%;
 }
 
 div.widget {
@@ -243,7 +224,10 @@
     padding: 4px 10px;
     font-family: lucida grande, verdana, sans-serif;
     outline: none;
-    line-height: 17px;
+    line-height: 18px;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
 }
 
 input[type=submit]:hover, input[type=button]:hover {
@@ -257,6 +241,9 @@
     font-size: 90%;
     width: 100%;
     padding: 0;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
 }
 
 .listing td, .listing th {
@@ -268,11 +255,11 @@
 }
 
 .listing tr:hover > td {
-    border-bottom: 1px solid #BB0000;
+    border-bottom: 1px solid #DC143C;
 }
 
 td.id {
-    color: #BB0000;
+    color: #DC143C;
 }
 
 td.id, td.name {
@@ -306,28 +293,29 @@
 
 /* pagination */
 
-div.pagination {
+.pagination {
+    float: right;
     font-size: 90%;
-    color: #666;
 }
 
-div.pagination span {
+.pagination a, .pagination span {
+    text-align: center;
+    text-decoration: none;
+    color: #888;
     display: inline-block;
-    width: 2.5em;
-    height: 1.5em;
-    text-align: center;
+    float: left;
+    padding: 0px;
+    margin: 5px;
+    width: 2em;
+    border-bottom: 1px solid white;
 }
 
-div.pagination span.current {
-    color: #BB0000;
+.pagination a:hover {
+    border-bottom: 1px solid #888;
 }
 
-div.pagination a {
-    display: inline-block;
-    text-decoration: none;
-    width: 100%;
-    text-align: center;
-    color: #000;
+.pagination .current {
+    color: #DC143C;
 }
 
 /* activity view */
@@ -376,15 +364,17 @@
     width: 20em;
     padding: 5px 10px;
     line-height: 1.3em;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
 }
 
-.search input[type=submit] {
-    border: 1px solid #BFBFBF;
-    text-align: center;
-    padding: 4px 10px;
-    line-height: 18px;
+.search input[type=text]:hover, .search input[type=text]:focus {
+    box-shadow: 0px 0px 2px #BFBFBF;
+    -moz-box-shadow: 0px 0px 2px #AAAAAA;
+    -webkit-box-shadow: 0px 0px 2px #AAAAAA;
 }
-
+    
 .wrapper {
     display: block;
 }
@@ -402,7 +392,7 @@
 
 .query {
     font-size: 90%;
-    margin: 0.5em 0.3em;
+    margin: 0.5em 0;
 }
 
 /* select elements are replaced with js equivalents. avoid jumpiness */
@@ -412,6 +402,10 @@
 
 #add-dropdown {
     width: 12em;
+    margin: 5px 0px;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
 }
 
 .criteria .dropdown {
@@ -419,11 +413,10 @@
 }
 
 .criteria {
-    margin: 3px -2px;
-    border: 2px solid #EEE;
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
+    margin: 5px 0;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
     float: left;
     clear: both;
     height: 27px;
@@ -509,6 +502,9 @@
     text-decoration: none;
     border: 1px solid #CCC;
     background: #EEE;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
 }
 
 .actions a:hover {
--- a/src/ltpdarepo/templates/login.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/login.html	Sat Aug 13 23:56:30 2011 +0200
@@ -2,19 +2,19 @@
 {% block title %} Login {% endblock %}
 {% block body %}
 <h2>Login</h2>
-<form action="" method="post" enctype="multipart/form-data" >
-<fieldset>
-<div class="field">
-  <label for="username">Username</label>
-<div class="widget"><input id="username" name="username" type="text" value="" /></div>
-</div>
-<div class="field">
-  <label for="password">Password</label> 
-<div class="widget"><input id="password" name="password" type="password" value="" /></div>
-</div>
-<div class="field">
-  <div class="widget"><input id="login" name="login" type="submit" value="Login" /></div>
-</div>  
-</fieldset>
+<form action="" method="POST" enctype="multipart/form-data">
+  <fieldset>
+    <div class="field">
+      <label for="username">Username</label>
+      <div class="widget"><input id="username" name="username" type="text" value="" /></div>
+    </div>
+    <div class="field">
+      <label for="password">Password</label> 
+      <div class="widget"><input id="password" name="password" type="password" value="" /></div>
+    </div>
+    <div class="field">
+      <div class="widget"><input id="login" name="login" type="submit" value="Login"></input></div>
+    </div>  
+  </fieldset>
 </form>
 {% endblock %}
--- a/src/ltpdarepo/templates/objs.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/objs.html	Sat Aug 13 23:56:30 2011 +0200
@@ -4,10 +4,10 @@
 {% block body %}
 <h2>Database &#x00AB;{{ database.id }}&#x00BB;</h2>
 <p class="discrete">{{ database.description|default('&nbsp;'|safe, true) }}</p>
+<p class="discrete">{{ batch.count }} objects</p>
 
 {% block above %}{% endblock %}
-
-<p class="discrete">{{ batch.count }} objects</p>
+{% if objs %}
 {{ pagination.render(batch) }}
 <table class="listing">
   <thead>
@@ -40,7 +40,7 @@
   </tbody>
 </table>
 {{ pagination.render(batch) }}
-
+{% endif %}
 {% block below %}{% endblock %}
 
 {% endblock %}
--- a/src/ltpdarepo/templates/pagination.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/pagination.html	Sat Aug 13 23:56:30 2011 +0200
@@ -1,23 +1,23 @@
 {% macro render(pagination) %}
-  <div class="pagination">
+  <div class="pagination wrapper">
   {% if pagination.has_prev %}
-    <span class="prev"><a href="{{ url_for_other_page(pagination.page - 1) }}" alt="prev">&laquo;</a></span>
+    <a class="prev" href="{{ url_for_other_page(pagination.page - 1) }}" alt="prev">&laquo;</a>
   {% else %}
     <span class="prev discrete">&laquo;</span>
   {% endif %}
   {%- for page in pagination %}
     {% if page > 0%}
       {% if page != pagination.current %}
-        <span class="page"><a href="{{ url_for_other_page(page) }}">{{ page }}</a></span>
+        <a href="{{ url_for_other_page(page) }}">{{ page }}</a>
       {% else %}
         <span class="current">{{ page }}</span>
       {% endif %}
     {% else %}
-      <span class="ellipsis">…</span>
+      <span class="ellipsis">&hellip;</span>
     {% endif %}
   {%- endfor %}
   {% if pagination.has_next %}
-    <span class="next"><a href="{{ url_for_other_page(pagination.page + 1) }}" alt="next">&raquo;</a></span>
+    <a class="next" href="{{ url_for_other_page(pagination.page + 1) }}" alt="next">&raquo;</a>
   {% else %}
     <span class="next discrete">&raquo;</span>
   {% endif %}
--- a/src/ltpdarepo/templates/query.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/query.html	Sat Aug 13 23:56:30 2011 +0200
@@ -69,7 +69,7 @@
       {% endfor %}
     </select>
 
-    <input type="submit" value="search" class="search"></input>
+    <input type="submit" value="search"></input>
 
     {% if 'admin' in g.identity.roles %}
     <input id="save" type="submit" name="save" value="save query"></input>
--- a/src/ltpdarepo/templates/user.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/user.html	Sat Aug 13 23:56:30 2011 +0200
@@ -3,10 +3,10 @@
 {% block body %}
 <h2>User &#x00AB;{{ session.username }}&#x00BB;</h2>
 <p class="field"><span class="label">Name:</span>{{ user.name }} {{ user.surname }}</p>
-<p class="field"><span class="label">Email:</span> {{ user.email }}</p>
-<p class="field"><span class="label">Institution:</span> {{ user.institution }}</p>
-<p class="field"><span class="label">Telephone:</span> {{ user.telephone }}</p>
-<ul>
+<p class="field"><span class="label">Email:</span>{{ user.email }}</p>
+<p class="field"><span class="label">Institution:</span>{{ user.institution }}</p>
+<p class="field"><span class="label">Telephone:</span>{{ user.telephone }}</p>
+<ul class="actions">
   <li><a href="{{ url_for('user.edit', username=session.username) }}">Edit profile</a></li>
   <li><a href="{{ url_for('user.password', username=session.username) }}">Change password</a></li>
 </ul>
--- a/src/ltpdarepo/templates/users/view.html	Sat Aug 13 23:56:30 2011 +0200
+++ b/src/ltpdarepo/templates/users/view.html	Sat Aug 13 23:56:30 2011 +0200
@@ -21,7 +21,7 @@
 <h2>User &#x00AB;{{ username }}&#x00BB;</h2>
 {{ forms.view(form) }}
 <p class="field"><span class="label">Permissions:</span> <a class="toggle" href="">show</a></p>
-<table id="permissions" class="permissions hidden">
+<table id="permissions" class="permissions" style="display: none;">
   <tr><th></th><th>select</th><th>insert</th><th>update</th><th>delete</th></tr>
   {% for db, p in permissions.iteritems() %}
   <tr>