[Maposmatic-dev] [PATCH 09/24] Complete site-wide UI overhaul.

[Maxime Petazzoni]

The site has been redesigned, including the following changes:

  * The two-column architecture was left behind in favor of a full-width
    page style, with the meta-information like contact, news and the
    random map put in a bottom section;
  * Use of a white background;
  * New shiny header with nice map-style background;
  * Relocated language selection box on the top right of the site in the
    header for easier and more obvious access;
  * When paginator are displayed, put one on top of the page and one at
    the bottom;
  * General HTML code and CSS cleanup.
---
 www/media/style.css                    |  491 ++++++++++++++------------------
 www/templates/maposmatic/about.html    |  162 ++++++-----
 www/templates/maposmatic/all_jobs.html |   43 ++--
 www/templates/maposmatic/all_maps.html |   31 +--
 www/templates/maposmatic/base.html     |  202 ++++++-------
 www/templates/maposmatic/index.html    |   99 +++----
 6 files changed, 470 insertions(+), 558 deletions(-)

diff --git a/www/media/style.css b/www/media/style.css
index 4619976..fccefe2 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -21,430 +21,357 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-html,body {
-    margin:0;
-    padding:0;
+html, body {
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    font: 90% sans-serif;
-    text-align: left;
-    background: #fff;
-    padding-bottom:20px;
+  font: 90% sans-serif;
 }
 
 a {
-    color: #0066B3;
-    background: inherit;
-    text-decoration: none;
+  color: #0066b3;
+  text-decoration: none;
 }
 
 a img {
-    border-style: none;
+  border: none;
 }
 
-h1 {
-    font: bold 2.1em Sans-Serif;
-    color: #036DA7;
+/* Header */
+#header {
+  background-color: #cee5f6;
+  background-image: url('/smedia/header.png');
+  background-position: top right;
+  background-repeat: no-repeat;
 }
 
-h2 {
-    font: bold 1.1em Sans-Serif;
-    padding: 0;
-    margin: 0;
-}
-
-h2 a {
-    color: black;
-}
+#header h1 {
+  margin: 0;
+  padding: 0.5em 0 0 0.5em;
 
-div#header {
-    width:100%;
-    overflow:hidden;
-    background: #BBD9EE;
-}
-
-div#header h1, div#header h2, div#menu {
-    margin:0 auto;
-    text-align:center;
+  font-size: 30pt;
+  font-weight: bold;
+  font-family: Georgia, serif;
 }
 
-div#header h1 {
-    padding: 10px 0 5px;
-    color: #fff;
-}
+#header h2 {
+  margin: 0;
+  padding: 0 0 1em 1.5em;
 
-div#header h2 {
-    padding: 5px 0 5px;
-    color: #fff;
+  font-size: 10pt;
+  font-weight: normal;
+  font-style: italic;
 }
 
-ul#nav,ul#nav li {
-    list-style-type:none;
-    margin:0;
-    padding:0;
+form#langsel {
+  float: right;
+  margin-right: 1em;
 }
 
 ul#nav {
-    margin-left: 5em;
-    font-size: 90%;
+  margin: 0;
+  padding: 2px 0;
+  padding-left: 2em;
+
+  list-style: none;
+  height: 2em;
 }
 
 ul#nav li {
-    float:left;
-    margin-left: 3px;
-    text-align: center;
+  display: block;
+  float: left;
 }
 
 ul#nav a {
-    float: left;
-    width: 110px;
-    padding: 5px 0;
-    background: #E7F1F8;
-    text-decoration:none;
-    color: #666;
-    border-top : 1px solid #fff;
-    border-left : 1px solid #fff;
-    border-right : 1px solid #fff;
+  display: block;
+  padding: 0.5em 1em;
 }
 
 ul#nav a:hover {
-    background: #fff;
-    color: #000;
+  background: white;
+  border-bottom: 1px black solid;
 }
 
-ul#nav li.activelink a,ul#nav li.activelink a:hover {
-    background: #FFF;
-    color: #003;
+ul#nav li.activelink a {
+  background: white;
+  border: 1px black solid;
+  border-bottom: none;
 }
 
-#right {
-       float: left;
-       width: 76%;
-       padding: 1em;
-       margin-bottom: 1.2em;
-       background: #eee;
-       text-align: justify;
+
+/* Main content */
+#content {
+  margin: 0;
+  padding: 2em;
+  border-top: 1px black solid;
 }
 
-#left {
-       float: right;
-       width: 20%;
-       margin: 0 0 10px 0;
+#content h1 {
+  color: #0066b3;
+  border-bottom: 1px black solid;
 }
 
-#left .box {
-       padding: 1em;
-       margin: 0 0 1em 0;
-       background : #FFF6BF;
+#content h2 a {
+  color: black;
 }
 
-p.randommap {
-  text-align: center;
+#content table.authors {
+  width: 80%;
 }
 
-#content {
-    margin: 0 auto;
-    padding: 15px;
-    background: #fff;
+table.authors td {
+  vertical-align: top;
+}
+
+
+/* Bottom */
+#bottom {
+  border-top: 1px #aaa solid;
+  margin: 1em 2em;
 }
 
-div#content h1 {
-    border-bottom: 2px solid #036DA7;
+#bottom h3 {
+  margin: 1em 0;
+  padding: 0;
 }
 
-div#content h2 {
-    font-size: 140%;
+#bcontact {
+  float: left;
+  padding-left: 1em;
 }
 
-form ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
+#bnews {
+  margin-left: 30%;
 }
 
-table#mapform table#result_nominatim_search
-{
-  margin: 0px;
-  padding: 0px;
-  border-collapse: collapse;
-  border-spacing: 0px;
+#bnews ul {
+  padding-left: 1.5em;
 }
 
-table#mapform table#result_nominatim_search tr td span
-{
- display:none;
- padding:2px 3px;
- margin-left:8px;
- margin-top: 1em;
- width: 15em;
+#bnews li {
+  padding-bottom: 0.5em;
 }
 
-table#mapform table#result_nominatim_search tr td:hover span
-{
- display:inline;
- position:absolute;
- background:#ffffff;
- border:1px solid #cccccc;
- color:#6c6c6c;
+#bnews span.newsinfo {
+  font-size: smaller;
+  font-style: italic;
 }
 
-table#mapform table#result_nominatim_search tr td.nomsrch_bullet
-{
-  margin: 2px;
-  padding: 0px;
-  padding-top: 2px;
-  width: 10px;
+#bmap {
+  float: right;
   text-align: center;
-  vertical-align: text-top;
+  padding-right: 1em;
+  width: 220px;
 }
 
-table#mapform table#result_nominatim_search tr td.nomsrch_entry
-{
-  margin: 2px;
-  padding: 0px;
-  padding-left: 3px;
+#bmap p.randommap {
+  text-align: center;
 }
 
-table#mapform
-{
-  margin: 2em 2em 2em 2em;
-  width: 650px;
-  border: 1px solid #CCC;
+
+/* Jobs and maps */
+.job {
+  margin: 1em 0;
   padding: 1em;
+  width: auto;
+
+  border: 1px #ccc solid;
 }
 
-table#mapform tr.field td
-{
-  padding-bottom: 10px;
+.jobodd {
+  background: #fff6bf;
 }
 
-table#mapform td
-{
-  padding: 3px;
+h2.jobtitle {
+  margin: 0;
+  padding: 0;
 }
 
-table#mapform tr.label
-{
-  font-weight: bold;
+h2.jobtitle a {
+  color: #0066b3 !important;
 }
 
-table#mapform td.image
-{
-  text-align: right;
-  padding-right: 3em;
-  vertical-align: middle;
+.job h4 {
+  margin: 1em 0 0.5em 0;
+  padding: 0;
 }
-#mapform input[type=image].btn-enabled:hover
-{
-  cursor: auto;
+
+table.jobinfo {
+  width: 100%;
+  margin-top: 1em;
 }
 
-#mapform input[type=image].btn-disabled:hover
-{
-  cursor: default;
+table.jobinfo td.status {
+  width: 130px;
+  text-align: center;
 }
 
-#mapform input[type=image].btn-disabled
-{
-  display: none;
+table.jobinfo td.thumb {
+  width: 220px;
+  text-align: center;
+  vertical-align: top;
 }
 
-#mapform input[type=image].btn-enabled
-{
-  display: block;
+table.jobinfo td.info {
+  vertical-align: top;
 }
 
-ul.errorlist
-{
-  margin-top: 5px;
-  color: red;
+div.mapsearch {
+  float: right;
+  margin-top: 2em;
+  font-style: italic;
 }
 
-.submitmap input[type=text] {
-    background: #FFF6BF;
-    border: 3px solid #CCC;
-    width: 300px;
-    padding: 3px;
+
+/* Navigation links */
+div.pagination {
+  margin-top: 1em;
+  text-align: center;
+}
+
+p#letterpagination {
+  text-align: center;
+}
+
+a.selectedletter {
+  font-weight: bold;
+}
+
+
+/* Map form */
+#mainfrm {
+  padding: 1em;
+  margin: 1em 1em;
+
+  border-left: 0.5em #ccc solid;
 }
 
-.submitmap input[type=text]:hover {
-    border: 3px solid #AAA;
+#mainfrm ul {
+  list-style: none;
+  padding: 0;
 }
 
-.submitmap input[type="submit"]
+#mainfrm tr.label {
+  font-weight: bold;
+  padding-top: 1em;
+}
+
+#mainfrm input[type=text] {
+  background: #fff6bf;
+  border: 2px #ccc solid;
+}
+
+#mapfrm td.image
 {
-    width: 300px;
+  text-align: right;
+  padding-right: 3em;
+  vertical-align: middle;
 }
 
-.langsel {
-    text-align: right;
+#mapfrm input[type=image].btn-enabled {
+  display: block;
 }
 
-.langsel input {
-    background: #FFF6BF;
-    border: 3px solid #CCC;
-    padding: 3px;
+#mapfrm input[type=image].btn-enabled:hover {
+  cursor: auto;
 }
 
-.langsel select {
-    background: #FFF6BF;
-    border: 3px solid #CCC;
-    width: 100px;
-    padding: 3px;
+#mapfrm input[type=image].btn-disabled {
+  display: none;
 }
 
-.langsel select:hover {
-    border: 3px solid #AAA
+#mapfrm input[type=image].btn-disabled:hover {
+  cursor: default;
 }
 
-.langsel input:hover {
-    border: 3px solid #AAA;
+#mainfrm input.btn-disabled {
+  display: none;
 }
 
-.langsel input[type="submit"]
-{
+#mainfrm input#id_maptitle {
+  width: 300px;
 }
 
-div.pagination
-{
-  text-align: center;
+#mainfrm tr.bybbox {
+  display: none;
 }
 
-.bybbox
-{
+#map_language_label, #map_language_entry {
   display: none;
 }
 
-div#map
-{
+#map {
   border: 1px solid black;
   width: 600px;
   height: 350px;
 }
 
-#map_bb
-{
+#map_bb {
   margin-top: 1em;
 }
 
-#map_bb input
-{
-    width: 100px;
-    margin: 6px;
+#map_bb input {
+  width: 5em;
 }
 
-#map .olControlAttribution
-{
+#map .olControlAttribution {
   bottom: 3px !important;
 }
 
-p.infobox
-{
+p.infobox {
   margin-right: 1em;
   margin-left: 1em;
   background: #FFF6BF;
   padding: 1em;
 }
 
-p.infobox img
-{
+p.infobox img {
   margin-right: 1em;
   vertical-align: middle;
   display: inline-block;
 }
 
-p.infobox span
-{
+p.infobox span {
   vertical-align: middle;
   display: inline-block;
 }
 
-div.job
-{
-  border: 1px #ccc solid;
-  margin: 1em 0;
-  padding: 1em;
+table#result_nominatim_search {
+  margin: 0px;
+  padding: 0px;
+  border-collapse: collapse;
+  border-spacing: 0px;
 }
 
-div.jobodd
-{
-  background: #FFF6BF;
+table#result_nominatim_search td span {
+  display: none;
+  padding: 2px 3px;
+  margin-left: 8px;
+  margin-top: 1em;
+  width: 15em;
 }
 
-div.jobeven
-{
+table#result_nominatim_search td:hover span {
+  display: inline;
+  position: absolute;
   background: white;
+  border: 1px #ccc solid;
+  color: #6c6c6c;
 }
 
-table.jobinfo
-{
-  width: 100%;
-  margin: 2em 0 1em 0;
-}
-
-table.jobinfo td
-{
-  vertical-align: top;
-}
-
-table.jobinfo td.thumb
-{
-  width: 220px;
-  text-align: center;
-}
-
-table.jobinfo td.info
-{
-  padding-left: 2em;
-}
-
-table.jobinfo td.status
-{
-  width: 15%;
+table#result_nominatim_search td.nomsrch_bullet {
+  margin: 2px;
+  padding: 0px;
+  padding-top: 2px;
+  width: 10px;
   text-align: center;
-  vertical-align: middle;
-}
-
-td.status img
-{
-  width: 64px;
-}
-
-h2.jobtitle
-{
-  border-bottom: 1px black solid;
-}
-
-h2.jobtitle a
-{
-  color: #0066B3;
-}
-
-table.jobinfo h3
-{
-  margin-top: 0;
-}
-
-table.jobinfo h4
-{
-  margin: 1em 0 0 0;
-}
-
-a.selectedletter
-{
-  font-weight: bold;
-}
-
-div.mapsearch
-{
-  float: right;
-  margin-top: 2em;
-  font-style: italic;
+  vertical-align: text-top;
 }
 
-p#letterpagination
-{
-  margin-bottom: 2em;
-  text-align: center;
+table#result_nominatim_search td.nomsrch_entry {
+  margin: 2px;
+  padding: 0px;
+  padding-left: 3px;
 }
diff --git a/www/templates/maposmatic/about.html 
b/www/templates/maposmatic/about.html
index f76dc00..fb0ed49 100644
--- a/www/templates/maposmatic/about.html
+++ b/www/templates/maposmatic/about.html
@@ -33,10 +33,10 @@ class="activelink"
 
 {% block page %}
 <h1>{% trans "About" %}</h1>
-
 <h2>{% trans "History" %}</h2>
 
-<p>{%blocktrans%}MapOSMatic has been started thanks to an idea of
+<p>
+{% blocktrans %}MapOSMatic has been started thanks to an idea of
 Gilles Lamiral, an <a
 href="http://www.openstreetmap.org";>OpenStreetMap</a> and free
 software contributor of Rennes area, France. From his idea, a group of
@@ -46,14 +46,21 @@ met together during a one-week <em>Hackfest</em> in August 
2009 and
 brought the idea of Gilles Lamiral to life by writing the code and
 named the project <strong>MapOSMatic</strong>. The group of crazy
 hackers would like to thank Gilles for sharing his bright
-idea!{%endblocktrans%}</p>
+idea!{% endblocktrans %}
+</p>
+
+<p>
+{% blocktrans %}Of course, MapOSMatic is fully free software,
+licensed under the <a
+href="http://www.fsf.org/licensing/licenses/agpl-3.0.html";>AGPLv3</a>.
+{% endblocktrans %}
+</p>
 
-<p>{%blocktrans%}Of course, MapOSMatic is fully free software,
-licensed under the <a 
href="http://www.fsf.org/licensing/licenses/agpl-3.0.html";>AGPLv3</a>.{%endblocktrans%}</p>
 
 <h2>{% trans "How does it work?" %}</h2>
 
-<p>{%blocktrans%}On our server, we run a <a
+<p>
+{% blocktrans %}On our server, we run a <a
 href="http://www.postgresql.org";>PostgreSQL</a> server, with the <a
 href="http://postgis.refractions.net";>PostGIS</a> extension. In this
 PostgreSQL server, we have loaded the <a
@@ -63,43 +70,44 @@ 
href="http://wiki.openstreetmap.org/wiki/Osm2pgsql";>osm2pgsql</a>
 tool. The same tool is also used to apply <a
 href="http://planet.openstreetmap.org/daily/";>daily differences</a> of
 the database, which allows to keep it up to date with the new
-contributions of OpenStreetMap users.{%endblocktrans%}</p>
+contributions of OpenStreetMap users.{% endblocktrans %}
+</p>
 
-<p>{%blocktrans%}For the map rendering, we use the
+<p>
+{% blocktrans %}For the map rendering, we use the
 famous <a href="http://www.mapnik.org";>Mapnik</a> with the OpenStreetMap
 stylesheet
 available <a 
href="http://svn.openstreetmap.org/applications/rendering/mapnik";>in
 OpenStreetMap Subversion repository</a>. Using Mapnik
 and <a href="http://cairographics.org/pycairo/";>Cairo</a>, we
-built <i>OCitySMap</i>, a Python module that:{%endblocktrans%}</p>
+built <i>OCitySMap</i>, a Python module that:{% endblocktrans %}
+</p>
 
 <ul>
-
-  <li>{%blocktrans%}Renders the map using OpenStreetMap data and the
-  OpenStreetMap Mapnik stylesheet;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}Renders on top of the map, using Mapnik, the grid
+  <li>{% blocktrans %}Renders the map using OpenStreetMap data and the
+  OpenStreetMap Mapnik stylesheet;{% endblocktrans %}</li>
+  <li>{% blocktrans %}Renders on top of the map, using Mapnik, the grid
   of 500 meters squares, the labels of the squares, and a few other
   informations on the map (copyright, scale,
-  etc.);{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}Greys out all the area outside the city if we find
-  its administrative boundary;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}Renders an index of the streets, based on
+  etc.);{% endblocktrans %}</li>
+  <li>{% blocktrans %}Greys out all the area outside the city if we find
+  its administrative boundary;{% endblocktrans %}</li>
+  <li>{% blocktrans %}Renders an index of the streets, based on
   OpenStreetMap data and the intersection of the streets with the
-  squares on the map.{%endblocktrans%}</li>
-
+  squares on the map.{% endblocktrans %}</li>
 </ul>
 
-<p>{%blocktrans%}This Python module can be used through a command-line
+<p>
+{% blocktrans %}This Python module can be used through a command-line
 tool provided with OCitySMap, so everyone can run its own city-map
 rendering suite. However, as the installation of the different
 components is quite complicated, a small web service has been created
 on top of it so that end-users can easily generate and use
-OpenStreetMap city maps.{%endblocktrans%}</p>
+OpenStreetMap city maps.{% endblocktrans %}
+</p>
 
-<p>{%blocktrans%}This web service has been called <i>MapOSMatic</i>,
+<p>
+{% blocktrans %}This web service has been called <i>MapOSMatic</i>,
 like <i>map-o-matic</i> but with a reference to OpenStreetMap (OSM). The
 web service is written in Python
 using <a href="http://www.djangoproject.com";>Django</a>. It is
@@ -107,75 +115,75 @@ responsible for storing the rendering requests and 
displaying the result
 of these requests. The rendering itself takes place asynchronously
 through the <i>maposmaticd</i> daemon. This daemon does only one
 rendering at a time, which is very important because of the CPU and I/O
-intensive nature of the map rendering process.{%endblocktrans%}</p>
+intensive nature of the map rendering process.{% endblocktrans %}
+</p>
 
-<p>{%blocktrans%}For the city search engine, we use the wonderful <a
+<p>
+{% blocktrans %}For the city search engine, we use the wonderful <a
 href="http://nominatim.openstreetmap.org";>Nominatim</a> service. This
 service made it really simple to provide a nice search engine that
 allows to select between multiple cities of the same name, by
-providing informations on the city location.{%endblocktrans%}</p>
+providing informations on the city location.{% endblocktrans %}
+</p>
+
 
 <h2>{% trans "Contributing" %}</h2>
 
-<p>{%blocktrans%}As stated above, both <i>OCitySMap</i> and
+<p>
+{% blocktrans %}As stated above, both <i>OCitySMap</i> and
 <i>MapOSMatic</i> are fully free software, so you're invited to
 contribute. Here are the few starting points to help
-us:{%endblocktrans%}</p>
+us:{% endblocktrans %}
+</p>
 
 <ul>
-
-  <li>{%blocktrans%}The <a
+  <li>{% blocktrans %}The <a
   href="https://savannah.nongnu.org/projects/maposmatic/";>project on
-  Savannah</a>;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}The <a
+  Savannah</a>;{% endblocktrans %}</li>
+  <li>{% blocktrans %}The <a
   href="http://lists.nongnu.org/mailman/listinfo/maposmatic-dev";>development
-  mailing-list</a>;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}The IRC channel <code>#maposmatic</code> on
-  Freenode;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}The <a
+  mailing-list</a>;{% endblocktrans %}</li>
+  <li>{% blocktrans %}The IRC channel <tt>#maposmatic</tt> on
+  Freenode;{% endblocktrans %}</li>
+  <li>{% blocktrans %}The <a
   href="http://git.savannah.gnu.org/cgit/maposmatic/ocitysmap.git";>OCitySMap
-  Git repository</a>, which can be cloned using <code>git clone
-  git://git.sv.gnu.org/maposmatic/ocitysmap.git</code>;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}The <a
+  Git repository</a>, which can be cloned using <tt>git clone
+  git://git.sv.gnu.org/maposmatic/ocitysmap.git</tt>;{% endblocktrans %}</li>
+  <li>{% blocktrans %}The <a
   href="http://git.savannah.gnu.org/cgit/maposmatic.git";>MapOSMatic
   Git repository</a>, which can be cloned using
-  <code>git clone 
git://git.sv.gnu.org/maposmatic.git</code>;{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}<a
+  <tt>git clone git://git.sv.gnu.org/maposmatic.git</tt>;{% endblocktrans 
%}</li>
+  <li>{% blocktrans %}<a
   href="https://savannah.nongnu.org/task/?group=maposmatic";>TODO-list
-  and ideas</a>.{%endblocktrans%}</li>
-
-</ul>
-
-<h2>{% trans "Authors" %}</h2>
-
-<ul>
-  <li>David Decotigny</li>
-  <li>Frédéric Lehobey</li>
-  <li>Pierre Mauduit</li>
-  <li>David Mentré</li>
-  <li>Maxime Petazzoni</li>
-  <li>Thomas Petazzoni</li>
-  <li>Gaël Utard</li>
-</ul>
-
-<h2>{% trans "Contributors" %}</h2>
-
-<ul>
-  <li>Étienne Loks (slippy map)</li>
-  <li>Malenki (german translation)</li>
-  <li>Simone Cortesi (italian translation)</li>
-  <li>Joan Montané (catalan translation)</li>
-  <li>Konstantin Mochalov (russian translation)</li>
-  <li>Bassem Jarkas (arabic translation)</li>
-  <li>Arlindo Pereira (brasilian portuguese translation)</li>
-  <li>Rodrigo de Avila (brasilian portuguese translation)</li>
-  <li>Esben Damgaard (danish translation)</li>
-  <li>Jeroen van Rijn (dutch translation)</li>
+  and ideas</a>.{% endblocktrans %}</li>
 </ul>
 
+<table class="authors"><tbody><tr>
+  <td width="50%">
+    <h2>{% trans "Authors" %}</h2>
+    <ul>
+      <li>David Decotigny</li>
+      <li>Frédéric Lehobey</li>
+      <li>Pierre Mauduit</li>
+      <li>David Mentré</li>
+      <li>Maxime Petazzoni</li>
+      <li>Thomas Petazzoni</li>
+      <li>Gaël Utard</li>
+    </ul>
+  </td><td width="50%">
+    <h2>{% trans "Contributors" %}</h2>
+    <ul>
+      <li>Étienne Loks (slippy map)</li>
+      <li>Malenki (german translation)</li>
+      <li>Simone Cortesi (italian translation)</li>
+      <li>Joan Montané (catalan translation)</li>
+      <li>Konstantin Mochalov (russian translation)</li>
+      <li>Bassem Jarkas (arabic translation)</li>
+      <li>Arlindo Pereira (brasilian portuguese translation)</li>
+      <li>Rodrigo de Avila (brasilian portuguese translation)</li>
+      <li>Esben Damgaard (danish translation)</li>
+      <li>Jeroen van Rijn (dutch translation)</li>
+    </ul>
+  </td>
+</tr></tbody></table>
 {% endblock %}
diff --git a/www/templates/maposmatic/all_jobs.html 
b/www/templates/maposmatic/all_jobs.html
index c4de4e9..5bf57c8 100644
--- a/www/templates/maposmatic/all_jobs.html
+++ b/www/templates/maposmatic/all_jobs.html
@@ -29,19 +29,25 @@
 
 {% load extratags %}
 
-{% block menu-jobs %}
-class="activelink"
-{% endblock %}
+{% block menu-jobs %}class="activelink"{% endblock %}
 
 {% block page %}
-
 <h1>{% trans "Job list" %}</h1>
 
 {% if jobs %}
-
-<p>{%blocktrans%}This page gives the status of all the rendering
+<p style="margin-bottom: 2em;">
+{% blocktrans %}This page gives the status of all the rendering
 requests received during the last 24 hours, starting from the most
-recent one.{%endblocktrans%}</p>
+recent one.{% endblocktrans %}
+</p>
+
+{% ifnotequal jobs.paginator.num_pages 1 %}
+<div class="pagination">
+  {% if jobs.has_previous %}<a class="prevlink" href="?page={{ 
jobs.previous_page_number }}">&laquo; {% trans "Previous" %}</a>{% endif %}
+  <span class="current">{% trans "Page" %} {{ jobs.number }} {% trans "of" %} 
{{ jobs.paginator.num_pages }}</span>
+  {% if jobs.has_next %}<a class="nextlink" href="?page={{ 
jobs.next_page_number }}">{% trans "Next" %} &raquo;</a>{% endif %}
+</div>
+{% endifnotequal %}
 
 {% for job in jobs.object_list %}
 <div class="job {% cycle jobodd,jobeven %}">
@@ -52,24 +58,17 @@ recent one.{%endblocktrans%}</p>
 
 {% ifnotequal jobs.paginator.num_pages 1 %}
 <div class="pagination">
-  <span class="step-links">
-    {% if jobs.has_previous %}
-      <a href="?page={{ jobs.previous_page_number }}">&laquo; {% trans 
"Previous" %}</a>
-    {% endif %}
-
-    <span class="current">
-      {% trans "Page" %} {{ jobs.number }} {% trans "of" %} {{ 
jobs.paginator.num_pages }}
-    </span>
-
-    {% if jobs.has_next %}
-      <a href="?page={{ jobs.next_page_number }}">{% trans "Next" %} 
&raquo;</a>
-    {% endif %}
-  </span>
+  {% if jobs.has_previous %}<a class="prevlink" href="?page={{ 
jobs.previous_page_number }}">&laquo; {% trans "Previous" %}</a>{% endif %}
+  <span class="current">{% trans "Page" %} {{ jobs.number }} {% trans "of" %} 
{{ jobs.paginator.num_pages }}</span>
+  {% if jobs.has_next %}<a class="nextlink" href="?page={{ 
jobs.next_page_number }}">{% trans "Next" %} &raquo;</a>{% endif %}
 </div>
 {% endifnotequal %}
+
 {% else %}
-<p>{%blocktrans%}No map rendering request since the last 24
-hours.{%endblocktrans%}</p>
+<p>
+{% blocktrans %}No map rendering request since the last 24
+hours.{% endblocktrans %}
+</p>
 {% endif %}
 
 {% endblock %}
diff --git a/www/templates/maposmatic/all_maps.html 
b/www/templates/maposmatic/all_maps.html
index 4c3f3bf..7b3f3c0 100644
--- a/www/templates/maposmatic/all_maps.html
+++ b/www/templates/maposmatic/all_maps.html
@@ -27,19 +27,25 @@
 
 {% load i18n %}
 
-{% block menu-maps %}
-class="activelink"
-{% endblock %}
+{% block menu-maps %}class="activelink"{% endblock %}
 
 {% block page %}
 <div class="mapsearch"><!-- <input type="text" name="map_search" /><input 
type="submit" value="{% trans "Search" %}" />-->{% trans "Search coming soon!" 
%}</div>
 
 <h1><a href="{% url maps %}">{% trans "Maps" %}</a></h1>
 
-<p id="letterpagination">
+<p id="letterpagination" style="margin-bottom: 2em;">
   <a href="{% url maps %}"{% if not current_letter %} class="selectedletter"{% 
endif %}>{% trans "All" %}</a> - {% for l in letters %}<a href="{% url 
maps-by-letter l %}"{% ifequal l current_letter %} class="selectedletter"{% 
endifequal %}>{{ l }}</a>{% if not forloop.last %} - {% endif %}{% endfor %}
 </p>
 
+{% ifnotequal maps.paginator.num_pages 1 %}
+<div class="pagination">
+  {% if maps.has_previous %}<a href="?page={{ maps.previous_page_number 
}}">&laquo; {% trans "Previous" %}</a>{% endif %}
+  <span class="current">{% trans "Page" %} {{ maps.number }} {% trans "of" %} 
{{ maps.paginator.num_pages }}</span>
+  {% if maps.has_next %}<a href="?page={{ maps.next_page_number }}">{% trans 
"Next" %} &raquo;</a>{% endif %}
+</div>
+{% endifnotequal %}
+
 {% for job in maps.object_list %}
 <div class="job {% cycle jobodd,jobeven %}">
   {% include "maposmatic/map.html" %}
@@ -52,19 +58,10 @@ class="activelink"
 
 {% ifnotequal maps.paginator.num_pages 1 %}
 <div class="pagination">
-  <span class="step-links">
-    {% if maps.has_previous %}
-      <a href="?page={{ maps.previous_page_number }}">&laquo; {% trans 
"Previous" %}</a>
-    {% endif %}
-
-    <span class="current">
-      {% trans "Page" %} {{ maps.number }} {% trans "of" %} {{ 
maps.paginator.num_pages }}
-    </span>
-
-    {% if maps.has_next %}
-      <a href="?page={{ maps.next_page_number }}">{% trans "Next" %} 
&raquo;</a>
-    {% endif %}
-  </span>
+  {% if maps.has_previous %}<a href="?page={{ maps.previous_page_number 
}}">&laquo; {% trans "Previous" %}</a>{% endif %}
+  <span class="current">{% trans "Page" %} {{ maps.number }} {% trans "of" %} 
{{ maps.paginator.num_pages }}</span>
+  {% if maps.has_next %}<a href="?page={{ maps.next_page_number }}">{% trans 
"Next" %} &raquo;</a>{% endif %}
 </div>
 {% endifnotequal %}
+
 {% endblock %}
diff --git a/www/templates/maposmatic/base.html 
b/www/templates/maposmatic/base.html
index f389fe5..655d88c 100644
--- a/www/templates/maposmatic/base.html
+++ b/www/templates/maposmatic/base.html
@@ -29,115 +29,99 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
 <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
-
-<head>
- <title>MapOSMatic</title>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="/smedia/style.css" 
media="screen" />
- <link rel="alternate" href="http://news.maposmatic.org/?feed=rss2"; 
title="MapOSMatic news" type="application/rss+xml" />
- <link rel="icon" href="/smedia/favicon.ico" type="image/x-icon">
- <link rel="shortcut icon" href="/smedia/favicon.ico" type="image/x-icon">
- {% block extralink %}{% endblock %}
- <script language="JavaScript" type="text/javascript">
- {% block extrajs %}{% endblock %}
- </script>
-</head>
-
-<body {% block extrabody %}{% endblock %}>
-<div id="header">
-<h1>MapOSMatic</h1>
-<h2>{% trans "Your free city maps!" %}</h2>
-
- <div id="menu">
-  <ul id="nav">
-   <li {% block menu-home %}{% endblock %}><a href="{% url main %}">{% trans 
"Home" %}</a></li>
-   <li {% block menu-jobs %}{% endblock %}><a href="{% url jobs %}">{% trans 
"Jobs" %}</a></li>
-   <li {% block menu-maps %}{% endblock %}><a href="{% url maps %}">{% trans 
"Maps" %}</a></li>
-   <li><a href="http://news.maposmatic.org";>{% trans "News" %}</a></li>
-   <li {% block menu-about %}{% endblock %}><a href="{% url about %}">{% trans 
"About" %}</a></li>
-  </ul>
- </div>
-</div>
-<div id="content">
-<div id="right">
-{% block page %}{% endblock %}
-</div>
-
-<div id="left">
-
-<div class="box">
-  <h2>{% trans "Random map" %}</h2>
-  {% if randommap %}
-  <p class="randommap">
-    <a href="{% url job-by-id randommap.id %}">
-      <img src="{{ randommap.get_thumbnail }}"
-           style="margin-top: 20px; margin-bottom: 20px"/><br />
-      <i>{{randommap.maptitle}}</i>
-    </a>
-  </p>
-  {% else %}
-  <p>{% trans "No random map found." %}</p>
-  {% endif %}
-</div>
-
-<div class="box">
-  <h2>{% trans "Latest news" %}</h2>
-  <ul>
-    {% for entry in blogposts %}
-    <li><a href="{{ entry.link }}">{{ entry.title }}</a><br/>
-    <span style="font-size: 80%">
-    {% blocktrans with entry.updated_parsed|feedparsed|timesince as date %}
-    published {{ date }} ago
-    {% endblocktrans %}
-    </span>
-    </li>
-    {% endfor %}
-  </ul>
-</div>
-
-<div class="box">
-  <h2>{% trans "Contact" %}</h2>
-  <p>
-  {% trans "Mail:" %} <a href="mailto:address@hidden";>address@hidden</a><br />
-  {% trans "IRC:" %} <tt>#maposmatic</tt> {% trans "on" %} 
<tt>irc.freenode.net</tt>
-  </p>
-</div>
-
-<div class="box">
-  <form name="langsel" action="/i18n/setlang/" method="post" class="langsel">
-    <label for="language">{%trans "Language:" %}</label>
-    <select name="language" onChange="document.langsel.submit();">
-    {% for lang in LANGUAGES %}
-    <option
-       {% ifequal lang.0 LANGUAGE_CODE %}
-       selected
-       {% endifequal %}
-       value="{{ lang.0 }}">
-      {{ lang.1 }}
-    </option>
-    {% endfor %}
-    </select>
+  <head>
+    <title>MapOSMatic</title>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet"    type="text/css" media="screen"
+          href="/smedia/style.css" />
+    <link rel="alternate"     type="application/rss+xml" title="MapOSMatic 
news"
+          href="http://news.maposmatic.org/?feed=rss2"; />
+    <link rel="icon"          type="image/x-icon"
+          href="/smedia/favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon"
+          href="/smedia/favicon.ico" />
+    {% block extralink %}{% endblock %}
+
+    <script language="JavaScript" type="text/javascript">
+      {% block extrajs %}{% endblock %}
+    </script>
+  </head>
+
+  <body {% block extrabody %}{% endblock %}>
+    <div id="header">
+      <h1>MapOSMatic</h1>
+      <h2>{% trans "Your free city maps!" %}</h2>
+      <form name="langsel" action="/i18n/setlang/" method="post" id="langsel">
+        <select name="language" onChange="document.langsel.submit();">
+          {% for lang in LANGUAGES %}<option{% ifequal lang.0 LANGUAGE_CODE %} 
selected{% endifequal %} value="{{ lang.0 }}">{{ lang.1 }}</option>
+          {% endfor %}
+        </select>
+        <noscript><input type="submit" value="Go" /></noscript>
+      </form>
+
+      <ul id="nav">
+        <li {% block menu-home %}{% endblock %}><a href="{% url main %}">{% 
trans "Home" %}</a></li>
+        <li {% block menu-jobs %}{% endblock %}><a href="{% url jobs %}">{% 
trans "Jobs" %}</a></li>
+        <li {% block menu-maps %}{% endblock %}><a href="{% url maps %}">{% 
trans "Maps" %}</a></li>
+        <li><a href="http://news.maposmatic.org";>{% trans "News" %}</a></li>
+        <li {% block menu-about %}{% endblock %}><a href="{% url about %}">{% 
trans "About" %}</a></li>
+      </ul>
+    </div>
+
+    <div id="content">
+      {% block page %}{% endblock %}
+    </div>
+
+    <div id="bottom">
+      <div id="bcontact">
+        <h3>{% trans "Contact" %}</h3>
+        <p>
+          {% trans "Mail:" %} <a 
href="mailto:address@hidden";>address@hidden</a><br />
+          {% trans "IRC:" %} <tt>#maposmatic</tt> {% trans "on" %} 
<tt>irc.freenode.net</tt>
+        </p>
+      </div>
+
+      <div id="bmap">
+        <h3>{% trans "Random map" %}</h3>
+        {% if randommap %}<p class="randommap">
+          <a href="{% url job-by-id randommap.id %}">
+            <img src="{{ randommap.get_thumbnail }}" /><br />
+            <i>{{ randommap.maptitle }}</i>
+          </a>
+        </p>
+        {% else %}<p>{% trans "No random map found." %}</p>
+        {% endif %}
+      </div>
+
+      <div id="bnews">
+        <h3>{% trans "Latest news" %}</h3>
+        <ul>
+          {% for entry in blogposts %}<li>
+            <a href="{{ entry.link }}">{{ entry.title }}</a><br />
+            <span class="newsinfo">
+              {% blocktrans with entry.updated_parsed|feedparsed|timesince as 
date %}published {{ date }} ago{% endblocktrans %}
+            </span>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+
+    <!-- Piwik statistics -->
+    <script type="text/javascript">
+      var pkBaseURL = (("https:" == document.location.protocol) ? 
"https://stats.maposmatic.org/piwik/"; : "http://stats.maposmatic.org/piwik/";);
+      document.write(unescape("%3Cscript src='" + pkBaseURL
+            + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
+    </script><script type="text/javascript">
+      try {
+        var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 2);
+        piwikTracker.trackPageView();
+        piwikTracker.enableLinkTracking();
+      } catch (err) {}
+    </script>
     <noscript>
-      <input type="submit" value="Go" />
+      <img src="http://stats.maposmatic.org/piwik/piwik.php?idsite=2"; />
     </noscript>
-  </form>
-</div>
-
-</div>
-</div>
-
-<!-- Piwik -->
-<script type="text/javascript">
-var pkBaseURL = (("https:" == document.location.protocol) ? 
"https://stats.maposmatic.org/piwik/"; : "http://stats.maposmatic.org/piwik/";);
-document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' 
type='text/javascript'%3E%3C/script%3E"));
-</script><script type="text/javascript">
-try {
-var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 2);
-piwikTracker.trackPageView();
-piwikTracker.enableLinkTracking();
-} catch( err ) {}
-</script><noscript><p><img 
src="http://stats.maposmatic.org/piwik/piwik.php?idsite=2"; style="border:0" 
alt=""/></p></noscript>
-<!-- End Piwik Tag -->
-
-</body>
+    <!-- End Piwik Tag -->
+  </body>
 </html>
diff --git a/www/templates/maposmatic/index.html 
b/www/templates/maposmatic/index.html
index 2026c76..fafb41e 100644
--- a/www/templates/maposmatic/index.html
+++ b/www/templates/maposmatic/index.html
@@ -29,12 +29,10 @@
 
 {% block extralink %}
 <script type="text/javascript" src="/smedia/jquery.js"></script>
-
 {{ form.media }}
 {% endblock %}
 
 {% block extrajs %}
-
 var elemFound = 0;
 var unusableToken = 0;
 var languageList;
@@ -260,74 +258,71 @@ function toggle_form_validation(enableForm)
 }
 {% endblock %}
 
-{% block menu-home %}
-class="activelink"
-{% endblock %}
+{% block menu-home %}class="activelink"{% endblock %}
 
-{% block extrabody %}
-onload='pageinit()'
-{% endblock %}
+{% block extrabody %}onload='pageinit()'{% endblock %}
 
 {% block page %}
 <h1>MapOSMatic</h1>
-
 <h2>{% trans "Introduction" %}</h2>
 
 <div style="float: right; margin-left: 3em;">
-  <table style="text-align: center">
+  <table style="text-align: center"><tbody>
     <tr>
       <td><a href="/smedia/chavagne.png"><img style="width: 200px;" 
src="/smedia/chavagne-small.png"></a></td>
       <td><a href="/smedia/chavagne_index.png"><img style="width: 200px;" 
src="/smedia/chavagne_index-small.png"></a></td>
     </tr>
     <tr>
       <td>
-       {% trans "City Map" %}<br/>
-       <a href="/smedia/chavagne.png">PNG</a>&nbsp;-&nbsp;
-       <a href="/smedia/chavagne.pdf">PDF</a>&nbsp;-&nbsp;
-       <a href="/smedia/chavagne.svg">SVG</a>
+        {% trans "City Map" %}<br />
+        <a href="/smedia/chavagne.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne.svg">SVG</a>
       </td>
       <td>
-       {% trans "Streets index" %}<br/>
-       <a href="/smedia/chavagne_index.png">PNG</a>&nbsp;-&nbsp;
-       <a href="/smedia/chavagne_index.pdf">PDF</a>&nbsp;-&nbsp;
-       <a href="/smedia/chavagne_index.svg">SVG</a>
+        {% trans "Streets index" %}<br />
+        <a href="/smedia/chavagne_index.png">PNG</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.pdf">PDF</a>&nbsp;-&nbsp;<a 
href="/smedia/chavagne_index.svg">SVG</a>
       </td>
     </tr>
   </table>
 </div>
 
-<p>{% blocktrans %}MapOSMatic is a free software web service that
+<p>
+{% blocktrans %}MapOSMatic is a free software web service that
 allows you to generate maps of cities using
 <a href="http://www.openstreetmap.org";>OpenStreetMap</a> data. A city map
-is made of two pages:{% endblocktrans %}</p>
+is made of two pages:{% endblocktrans %}
+</p>
 
 <ul>
   <li>{% blocktrans %}The map itself, splitted in squares allowing to easily 
look for streets;{% endblocktrans %}</li>
   <li>{% blocktrans %}An index of the streets with references to the squares 
on the map.{% endblocktrans %}</li>
 </ul>
 
-<p>{% blocktrans %}The generated maps are available in PNG, PDF and
-SVG formats and are ready to be printed.{% endblocktrans %}</p>
+<p>
+{% blocktrans %}The generated maps are available in PNG, PDF and
+SVG formats and are ready to be printed.{% endblocktrans %}
+</p>
 
-<p>{% blocktrans %}As the data used to generate maps is coming from
+<p>
+{% blocktrans %}As the data used to generate maps is coming from
 OpenStreetMap, you can freely (under the <a
 href="http://wiki.openstreetmap.org/wiki/License";>terms of
 OpenStreetMap license</a>) reuse, sell, modify, ... the generated
-maps.{% endblocktrans %}</p>
+maps.{% endblocktrans %}
+</p>
 
 <p><a href="{% url about %}">{% trans "More details" %} &raquo;</a></p>
 
-<h2 style="clear: right"><a href="#submitmapform">{% trans "Generate your own 
map" %}</a></h2>
-
-<a name="submitmapform"></a>
-<form id="id-mainfrm" method="post" action="/#submitmapform" class="submitmap">
 
+<h2 style="margin-top: 3em;"><a name="submitmapform" href="#submitmapform">{% 
trans "Generate your own map" %}</a></h2>
+<form id="mainfrm" method="post" action="{% url main %}#submitmapform" 
class="submitmap">
   <table id="mapform">
     <tr class="label">
       <td>{% trans "Area selection mode:" %}</td>
       <td style="vertical-align: bottom" rowspan="8" class="image">
-        <input id="id-go-next-btn" type="image" src="/smedia/Go-next.png" 
value="{% trans "Generate" %}"
-               title="{% trans "Please fill in the form before trying to 
proceed" %}" disabled="true" class="btn-disabled" />
+        <input id="id-go-next-btn" type="image" src="/smedia/Go-next.png"
+               value="{% trans "Generate" %}" disabled="true"
+               title="{% trans "Please fill in the form before trying to 
proceed" %}"
+               class="btn-disabled" />
       </td>
     </tr>
     <tr class="field">
@@ -339,9 +334,10 @@ maps.{% endblocktrans %}</p>
     <tr class="byadmin label"><td>{% trans "City name:" %}</td></tr>
     <tr class="byadmin field"><td>
         {{ form.administrative_city }}
-       <input type="button" onclick="javascript:validate_city_search();" 
value="{% trans "search" %}" />
-       {{ form.administrative_osmid }}
-       {{ form.administrative_osmid.errors }}
+        <input type="button" onclick="javascript:validate_city_search();"
+               value="{% trans "search" %}" />
+        {{ form.administrative_osmid }}
+        {{ form.administrative_osmid.errors }}
         {{ form.administrative_city.errors }}
     </td></tr>
 
@@ -356,46 +352,47 @@ maps.{% endblocktrans %}</p>
         {{ form.bbox }}
         {{ form.bbox.errors }}
     </td></tr>
+
     <tr class="byadmin field">
-      <td>
-       <table id="result_nominatim_search">
-       </table>
-      </td>
+      <td><table id="result_nominatim_search"></table></td>
     </tr>
+
     <tr class="label" id="map_language_label">
       <td>{% trans "Map Index Language:" %}</td>
     </tr>
     <tr class="field" id="map_language_entry">
       <td>
-       {{ form.map_language }}
+{{ form.map_language }}
       </td>
     </tr>
   </table>
 </form>
 
-  <p>{%blocktrans%}<em>MapOSMatic</em> covers the whole world but we need
+<p>
+{% blocktrans %}<em>MapOSMatic</em> covers the whole world but we need
 contributors to translate and adapt the few parts of <em>MapOSMatic</em>
-that are country specific.{%endblocktrans%}</p>
+that are country specific.{% endblocktrans %}
+</p>
 
-<p>{%blocktrans%}To select the city to be rendered, two modes are
-available:{%endblocktrans%}</p>
+<p>
+{% blocktrans %}To select the city to be rendered, two modes are
+available:{% endblocktrans %}
+</p>
 
 <ul>
-
-  <li>{%blocktrans%}<em>Using an administrative boundary</em>. It allows
+  <li>{% blocktrans %}<em>Using an administrative boundary</em>. It allows
   to get a map with precise boundaries of the city when such limits are
   available in the database. Otherwise, you need to use a bounding
-  box.{%endblocktrans%}</li>
-
-  <li>{%blocktrans%}<em>Using a traditional bounding
-  box</em>.{%endblocktrans%}</li>
-
+  box.{% endblocktrans %}</li>
+  <li>{% blocktrans %}<em>Using a traditional bounding box</em>.{% 
endblocktrans %}</li>
 </ul>
 
-<p>{%blocktrans%}Once the rendering is submitted, you will be brought
+<p>
+{% blocktrans %}Once the rendering is submitted, you will be brought
 to a page giving the status of your rendering request. As soon as the
 rendering is completed (that might take some time depending on the queue
 length), this page will contain links to the generated
-map.{%endblocktrans%}</p>
+map.{% endblocktrans %}
+</p>
 
 {% endblock %}
-- 
1.6.3.3.261.g85c6