Mercurial > hg > ltpdarepo

changeset 169:a30a7e9186a9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
New colors. New header. Better CSS structure.
author Daniele Nicolodi <daniele@grinta.net>
date Sun, 06 Nov 2011 18:05:43 +0100
parents 6f1aade052f6
children e90a806a3116
files src/ltpdarepo/static/dropdown.css src/ltpdarepo/static/header.png src/ltpdarepo/static/style.css src/ltpdarepo/templates/layout.html src/ltpdarepo/templates/timerange.html
diffstat 5 files changed, 277 insertions(+), 334 deletions(-) [+]
line wrap: on
line diff
--- a/src/ltpdarepo/static/dropdown.css	Fri Nov 04 19:00:34 2011 +0100
+++ b/src/ltpdarepo/static/dropdown.css	Sun Nov 06 18:05:43 2011 +0100
@@ -20,7 +20,7 @@
 
 .dropdown dt a {
     background: white url(arrow.png) no-repeat scroll right center;
-    border: 1px solid #BFBFBF;
+    border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .dropdown dd {
@@ -32,7 +32,7 @@
 
 .dropdown dd ul {
     background: white none repeat scroll 0 0;
-    border: 1px solid #BFBFBF;
+    border: 1px solid rgba(0, 0, 0, 0.2);
     border-top: none;
     display: none;
     padding: 0px;
@@ -42,7 +42,7 @@
 }
 
 .dropdown dd ul li.current a { 
-    background-color: #EEE;
+    background-color: #F1F1F1;
 }
 
 .dropdown .value {
Binary file src/ltpdarepo/static/header.png has changed
--- a/src/ltpdarepo/static/style.css	Fri Nov 04 19:00:34 2011 +0100
+++ b/src/ltpdarepo/static/style.css	Sun Nov 06 18:05:43 2011 +0100
@@ -1,5 +1,3 @@
-/* color palette inspired by http://www.colourlovers.com/palette/1133393/Green_Shades */
-
 html, body {
     height: 100%;
     margin: 0;
@@ -18,6 +16,7 @@
 
 input, select {
     font-size: 100%;
+    font-family: lucida grande, verdana, sans-serif;
 }
 
 :focus {
@@ -28,55 +27,22 @@
     color: #0F67A1;
 }
 
-/* structure */
-
-.content {
-    margin: 0px 10em;
-}
-
-.footer {
-    margin: 0px 9.5em;
-}
-
-.header {
-    padding: 1em 0 0.75em 0;
-    background: #CFF09E;
-    border-bottom: #BFE08E solid 5px;
-}
-
-.header div {
-    display: block;
-    margin: 0px 10em;
-    color: #555;
-}
-
-.header span {
-    font-size: 90%;
-}
-
 h1, h2, h3 {
     font-weight: normal;
 }
 
-h1 {
-    margin: 0;
-}
-
-h1 a {
-    text-decoration: none;
-    color: inherit;
-}
-
 h2 {
     margin: 1em 0em 0em;
     padding: 0;
-    font-size: 20px;
+    font-size: 120%;
+    font-weight: bold;
 }
 
 p {
     margin: 0;
     padding: 0;
     line-height: 1.4;
+    color: #888;
 }
 
 ul {
@@ -97,86 +63,98 @@
     color: #000;
 }
 
-div.breadcrumbs, div.user {
-    padding-top: 0.4em;
+/** structure **/
+
+.content {
+    margin: 0 10em;
+    padding: 0.5em 0;
+}
+
+.header {
+    background: url("/static/header.png") repeat-x 0;
+    border-bottom: 1px solid #000;
+    color: white;
+    box-shadow: -4px 2px 4px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: -4px 2px 4px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: -4px 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.header a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    padding: 0.25em 0;
+}
+
+.header h1 {
+    margin: 0;
+    font-size: 150%;
+}
+    
+.header span {
+    font-size: 90%;
+}
+
+.bar {
     font-size: 90%;
     color: #888;
 }
 
-div.breadcrumbs {
-    float: left;
-}
-
-div.user {
-    float: right;
-}
-
-div.breadcrumbs a, div.user a {
+.bar a {
     color: inherit;
     text-decoration: none;
 }
 
-div.breadcrumbs a:hover, div.user a:hover {
+.bar a:hover {
     border-bottom: 1px solid #888;
 }
 
-.discrete {
-    color: #888;
+.breadcrumbs {
+    float: left;
 }
 
-/* data display styling */
-
-p.field {
-    padding: 0;
-    margin: 0.2em 0;
+.user {
+    float: right;
 }
 
-span.label {
+.footer {
+    margin: 9em 9em 2em 9em;
+    padding: 0.25em 1em;
     color: #888;
+    border-top: 1px solid #AAA;
 }
 
-/* tables styling */
+.footer p {
+    font-size: 80%;
+}
 
-th {
-    text-align: left;
-    font-weight: normal;
-    padding: 0.2em 1em;
-    border-bottom: 1px solid #BFBFBF;
-    text-transform: lowercase;
-    color: #888;
+.wrapper {
+    display: block;
 }
 
-td {
-    text-align: center;
-}
-
-/* footer */
-
-div.footer {
-    padding: 10em 0 2em 0;
-    color: #AAAAAA;
+.wrapper:after {
+    clear: both;
+    content: " ";
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
 }
 
-div.footer hr {
-    border: none;
-    height: 1px;
-    background-color: #BFBFBF;
-    padding: 0;
-    margin: 5px 0;
-    width: 100%;
+.toggle {
+    color: inherit;
+    text-decoration: none;
 }
 
-div.footer p {
-    font-size: 70%;
-    padding: 0;
-    margin: 0 5px;
+.toggle:hover {
+    border-bottom: 1px solid black;
 }
 
-/* flash messages styling */
+/** messages **/
 
 .flash {
+    margin: 1.25em 0;
     padding: 0;
-    margin: 1.25em 0;
 }
 
 .flash a {
@@ -197,7 +175,7 @@
     color: #DC143C;
 }
 
-/* forms styling */
+/** forms **/
 
 form {
     margin: 0.75em 0em;
@@ -213,117 +191,43 @@
     color: #888;
 }
 
-div.widget {
+.widget {
     padding-top: 0.2em;
 }
 
-div.field {
+.field {
     margin-top: 0.7em;
 }
 
-input[type=submit], input[type=button] {
-    display: inline-block;
-    background: #EEE;
-    border: 1px solid #BFBFBF;
-    margin: 0;
-    padding: 4px 10px;
-    line-height: 18px;
-    font-family: lucida grande, verdana, sans-serif;
-    text-transform: lowercase;
-    box-shadow: 0px 0px 2px #DDD;
-    -moz-box-shadow: 0px 0px 2px #DDD;
-    -webkit-box-shadow: 0px 0px 2px #DDD;
-    box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-}
-
-input[type=text], input[type=password] {
-    display: inline-block;
-    border: 1px solid #BFBFBF;
-    margin: 0.2em 0;
-    padding: 4px 8px;
-    width: 25em;
-    font-family: lucida grande, verdana, sans-serif;
-    box-shadow: 0px 0px 2px #BFBFBF;
-    -moz-box-shadow: 0px 0px 2px #BFBFBF;
-    -webkit-box-shadow: 0px 0px 2px #BFBFBF;
-    box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;    
-}
-
-input[type=submit]:hover, input[type=button]:hover {
-    background: #CFF09E;
-}
-
-input:focus {
-    box-shadow: 0px 0px 3px #888;
-    -moz-box-shadow: 0px 0px 3px #888;
-    -webkit-box-shadow: 0px 0px 3px #888;
-}
-
 .required label:after {
     content: ' required';
     color: #888;
 }
 
-/* data table */
-
-.listing {
-    border-collapse: collapse;
-    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 {
-    padding: 0.3em 0.5em;
+input[type=submit], input[type=button] {
+    display: inline-block;
     margin: 0;
-    white-space: nowrap;
-    border: 1px solid #CCC;
-    text-align: center;
-}
-
-.listing tr:hover > td {
-    border-bottom: 1px solid #DC143C;
-}
-
-td.id {
-    color: #DC143C;
+    padding: 4px 10px;
+    line-height: 18px;
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
 }
 
-td.id, td.name {
-    font-family: andale mono, monospace;
-}
-
-td.name, td.title, td.description {
-    text-align: left;
-}
-
-td.description {
-    width: 100%;
+input[type=text], input[type=password] {
+    display: inline-block;
+    margin: 0.2em 0;
+    padding: 4px 8px;
+    width: 25em;
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;    
 }
 
-tbody tr.odd {
-    background-color: #F7F7F7;
-}
-
-tbody tr.even {
-    background-color: #FCFCFC;
-}
+/** pagination **/
 
-/* pagination */
-
-.count {
-    float: left;
+.count *, .pages * {
     font-size: 90%;
-}
-
-.count a, .count span {
     text-align: center;
     text-decoration: none;
     color: #888;
@@ -331,35 +235,30 @@
     float: left;
     padding: 0px;
     margin: 5px;
-    border-bottom: 1px solid white;    
+    border-bottom: 1px solid white;
+}
+
+.count a:hover, .pages a:hover {
+    border-bottom: 1px solid #888;
+}
+
+.pages * {
+    width: 2em;
+}
+
+.pages .current {
+    color: #DC143C;
+}
+
+.count {
+    float: left;
 }
 
 .pages {
     float: right;
-    font-size: 90%;
 }
 
-.pages a, .pages span {
-    text-align: center;
-    text-decoration: none;
-    color: #888;
-    display: inline-block;
-    float: left;
-    padding: 0px;
-    margin: 5px;
-    width: 2em;
-    border-bottom: 1px solid white;
-}
-
-.pages a:hover, .count a:hover {
-    border-bottom: 1px solid #888;
-}
-
-.pagination .current {
-    color: #DC143C;
-}
-
-/* activity view */
+/** activity view **/
 
 .activity {
     border: 1px solid #CCC;
@@ -432,7 +331,7 @@
     font-size: 90%;
 }
 
-/* search form */
+/** search form **/
 
 .search {
     margin: 1.25em 0;
@@ -444,56 +343,30 @@
 }
 
 .search input[type=text] {
-    border: 1px solid #BFBFBF;
-    font-size: 100%;
     width: 20em;
-    margin: 0;
-    padding: 4px 10px;
-    box-shadow: 0px 0px 2px #DDD;
-    -moz-box-shadow: 0px 0px 2px #DDD;
-    -webkit-box-shadow: 0px 0px 2px #DDD;
     box-sizing: content-box;
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box;
     height: 18px;
 }
-
-.search input[type=text]:hover, .search input[type=text]:focus {
-    box-shadow: 0px 0px 2px #888;
-    -moz-box-shadow: 0px 0px 2px #888;
-    -webkit-box-shadow: 0px 0px 2px #888;
-}
     
-.wrapper {
-    display: block;
-}
-
-.wrapper:after {
-    clear: both;
-    content: " ";
-    display: block;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-}
-
-/* query builder */
+/** query builder **/
 
 .query {
     font-size: 90%;
 }
 
-/* select elements are replaced with js equivalents. avoid jumpiness */
 .query select {
+    /* select elements are replaced with js equivalents */
     display: none;
 }
 
 #add-dropdown {
     width: 12em;
     margin: 5px 0px;
-    box-shadow: 0px 0px 2px #BFBFBF;
-    -moz-box-shadow: 0px 0px 2px #BFBFBF;
-    -webkit-box-shadow: 0px 0px 2px #BFBFBF;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
 }
 
 .criteria input {
@@ -502,22 +375,22 @@
     -webkit-box-shadow: none !important;
 }    
 
-.criteria .dropdown {
-    border: none;
-}
-
 .criteria {
     margin: 5px 0;
-    box-shadow: 0px 0px 2px #BFBFBF;
-    -moz-box-shadow: 0px 0px 2px #BFBFBF;
-    -webkit-box-shadow: 0px 0px 2px #BFBFBF;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
     float: left;
     clear: both;
     height: 27px;
 }
 
+.criteria .dropdown {
+    border: none;
+}
+
 .criteria > * {
-    border: 1px solid #BFBFBF;
+    border: 1px solid rgba(0, 0, 0, 0.2);
     margin: 0;
     float: left;
 }
@@ -561,68 +434,9 @@
     white-space: pre-wrap;
 }
 
-/* permisions display */
-
-.permissions {
-    border-collapse: collapse;
-    margin: 1em 0em 1em;
-}
-
-.permissions th {
-    margin: 0px;
-    padding: 3px 10px;
-    border-bottom: 1px solid #BFBFBF;
-}
-
-.permissions td {
-    margin: 0px;
-    padding: 3px 10px;
-    border-bottom: 1px solid #DDD;
-}
-
-.toggle { text-decoration: none; color: inherit; }
-.toggle:hover { border-bottom: 1px solid black; }
-
-/* actions */
-
-.actions {
-    padding: 0.75em 0em;
-}
+/** timerange selector **/
 
-.actions li:before {
-    content: '';
-}
-
-.actions li {
-    display: inline-block;
-}
-
-.actions a {
-    color: black;
-    padding: 5px 10px;
-    text-transform: lowercase;
-    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 {
-    border: 1px solid #CCC;
-    background: #CFF09E;
-}
-
-/* timerange selector */
-
-input.timerange-t1 {
-    width: 197px;
-    padding: 5px 10px;
-    margin: 0;
-}
-
-input.timerange-t2 {
+input.timerange {
     width: 197px;
     padding: 5px 10px;
     margin: 0;
@@ -636,25 +450,151 @@
     text-align: center;
 }
 
+/** actions **/
+
+.actions {
+    clear: both;
+    padding: 0.75em 0em;
+}
+
+.actions li:before {
+    content: '';
+}
+
+.actions li {
+    display: inline-block;
+    padding-right: 0.1em;
+}
+
+.actions a {
+    padding: 5px 10px;
+    text-decoration: none;
+}
+
+/** buttons and button like elements **/
+
+.actions a, input[type=submit], input[type=button] {
+    text-transform: lowercase;
+    color: #444;
+    background: #F1F1F1;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+}
+
+.actions a:hover, input[type=submit]:hover, input[type=button]:hover {
+    background: #E5E5E5;
+}
+
+.actions a:focus, input[type=submit]:focus, input[type=button]:focus {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+}    
+
+input[type=text], input[type=password] {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+}
+
+input[type=text]:focus, input[type=password]:focus {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+/** tables **/
+
+table {
+    border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+}
+
+td, th {
+    border: none;
+    margin: 0;
+    padding: 0.3em 0.5em;
+    white-space: nowrap;
+}
+    
+th {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    color: #888;
+    font-weight: normal;
+    text-transform: lowercase;
+}
+
+td {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
+/* object listing */
+
+.listing {
+    font-size: 90%;
+    width: 100%;
+    box-shadow: 0px 0px 2px #DDD;
+    -moz-box-shadow: 0px 0px 2px #DDD;
+    -webkit-box-shadow: 0px 0px 2px #DDD;
+}
+
+.listing td, .listing th {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
+.listing tr:hover > td {
+    border-bottom: 1px solid #DC143C;
+}
+
+.listing td.id {
+    color: #DC143C;
+}
+
+.listing td.id, td.name {
+    font-family: andale mono, monospace;
+}
+
+.listing td.name, td.title, td.description {
+    text-align: left;
+}
+
+.listing td.description {
+    width: 100%;
+}
+
+.listing tbody tr.odd {
+    background-color: #F7F7F7;
+}
+
+.listing tbody tr.even {
+    background-color: #FCFCFC;
+}
+
 /* object display */
 
 .obj {
     font-size: 90%;
     margin: 1.25em 0em;
-    border-collapse: collapse;
     width: 100%;
 }
 
+.obj td, .obj th {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .obj th {
     width: 0;
     text-align: right;
-    white-space: nowrap;
-    border-bottom: 1px dotted #DDD;
-    padding: 0.2em 0.4em;
 }
 
 .obj td {
     text-align: left;
-    border-bottom: 1px dotted #DDD;
-    padding: 0.2em 0.4em;
 }
+
+/* permisions */
+
+.permissions {
+    margin: 1em 0em 2em;
+}
--- a/src/ltpdarepo/templates/layout.html	Fri Nov 04 19:00:34 2011 +0100
+++ b/src/ltpdarepo/templates/layout.html	Sun Nov 06 18:05:43 2011 +0100
@@ -9,25 +9,29 @@
   </head>
   <body>
 
-    <div class="header"><div>      
-      <h1><a href="{{ url_for('index') }}">LTPDA Repository</a></h1>
-      <span>{{ request.host }}</span>
-    </div></div>
+    <div class="header">
+      <div class="content">
+        <a href="{{ url_for('index') }}">
+          <h1>LTPDA Repository</h1>
+          <span>{{ request.host }}</span>
+        </a>
+      </div>
+    </div>
 
-    <div class="content wrapper" id="content">
+    <div class="content" id="content">
       {% block page %}
 
-      <div class="breadcrumbs">{{ request.path|breadcrumbs }}</div>
-      <div class="user">
-        {% if session.username is defined %}
-        <a href="{{ url_for('user.view', username=session.username) }}">{{ session.username }}</a>
-        &mdash;
-        <a href="{{ url_for('logout') }}">logout</a>
-        {% endif %}
+      <div class="bar wrapper">
+        <div class="breadcrumbs">{{ request.path|breadcrumbs }}</div>
+        <div class="user">
+          {% if session.username is defined %}
+          <a href="{{ url_for('user.view', username=session.username) }}">{{ session.username }}</a>
+          &mdash;
+          <a href="{{ url_for('logout') }}">logout</a>
+          {% endif %}
+        </div>
       </div>
       
-      <div class="clear">&nbsp;</div>
-      
       {% for category, message in get_flashed_messages(True) %}
       <div class="flash {{ category }}">{{ message|safe }}</div>
       {% endfor %}
@@ -38,7 +42,6 @@
     </div>
     
     <div class="footer">
-      <hr/>
       <p>Version: {{ g.version }}</p>
       <p>Database schema: {{ g.schema }}</p>
     </div>
--- a/src/ltpdarepo/templates/timerange.html	Fri Nov 04 19:00:34 2011 +0100
+++ b/src/ltpdarepo/templates/timerange.html	Sun Nov 06 18:05:43 2011 +0100
@@ -3,15 +3,15 @@
     <div id="timerange" class="wrapper">
       <div class="criteria wrapper">
         {% if timerange.t1.errors -%}
-        {{ timerange.t1(class_='timerange-t1 error', placeholder='FROM') }}
+        {{ timerange.t1(class_='timerange error', placeholder='FROM') }}
         {% else -%}
-        {{ timerange.t1(class_='timerange-t1', placeholder='FROM') }}
+        {{ timerange.t1(class_='timerange', placeholder='FROM') }}
         {%- endif %}
         <span>&#x2264; TIME &#x2264;</span>
         {% if timerange.t2.errors -%}
-        {{ timerange.t2(class_='timerange-t2 error', placeholder='TO') }}
+        {{ timerange.t2(class_='timerange error', placeholder='TO') }}
         {% else -%}
-        {{ timerange.t2(class_='timerange-t2', placeholder='TO') }}
+        {{ timerange.t2(class_='timerange', placeholder='TO') }}
         {%- endif %}
       </div>
     </div>