Mercurial > hg > ltpdarepo
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 «{{ database.id }}»</h2> <p class="discrete">{{ database.description|default(' '|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">«</a></span> + <a class="prev" href="{{ url_for_other_page(pagination.page - 1) }}" alt="prev">«</a> {% else %} <span class="prev discrete">«</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">…</span> {% endif %} {%- endfor %} {% if pagination.has_next %} - <span class="next"><a href="{{ url_for_other_page(pagination.page + 1) }}" alt="next">»</a></span> + <a class="next" href="{{ url_for_other_page(pagination.page + 1) }}" alt="next">»</a> {% else %} <span class="next discrete">»</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 «{{ session.username }}»</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 «{{ username }}»</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>