[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Maposmatic-dev] [PATCH 09/24] Complete site-wide UI overhaul.
From: |
Maxime Petazzoni |
Subject: |
[Maposmatic-dev] [PATCH 09/24] Complete site-wide UI overhaul. |
Date: |
Sun, 10 Jan 2010 15:54:03 +0100 |
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 }}">« {% 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" %} »</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 }}">« {% 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" %}
»</a>
- {% endif %}
- </span>
+ {% if jobs.has_previous %}<a class="prevlink" href="?page={{
jobs.previous_page_number }}">« {% 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" %} »</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
}}">« {% 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" %} »</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 }}">« {% 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" %}
»</a>
- {% endif %}
- </span>
+ {% if maps.has_previous %}<a href="?page={{ maps.previous_page_number
}}">« {% 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" %} »</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> -
- <a href="/smedia/chavagne.pdf">PDF</a> -
- <a href="/smedia/chavagne.svg">SVG</a>
+ {% trans "City Map" %}<br />
+ <a href="/smedia/chavagne.png">PNG</a> - <a
href="/smedia/chavagne.pdf">PDF</a> - <a
href="/smedia/chavagne.svg">SVG</a>
</td>
<td>
- {% trans "Streets index" %}<br/>
- <a href="/smedia/chavagne_index.png">PNG</a> -
- <a href="/smedia/chavagne_index.pdf">PDF</a> -
- <a href="/smedia/chavagne_index.svg">SVG</a>
+ {% trans "Streets index" %}<br />
+ <a href="/smedia/chavagne_index.png">PNG</a> - <a
href="/smedia/chavagne_index.pdf">PDF</a> - <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" %} »</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
- [Maposmatic-dev] [PATCH 01/24] Revamp the jobs and maps pages, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 02/24] Updated PO files for the UI revamp., Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 03/24] Add by-letter maps pagination, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 04/24] Make the ITEMS_PER_PAGE settings local., Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 05/24] Add an 'All' link in the letter selection., Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 06/24] Update translation files, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 07/24] French terminoly improvements, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 08/24] New header background, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 09/24] Complete site-wide UI overhaul.,
Maxime Petazzoni <=
- [Maposmatic-dev] [PATCH 10/24] Updated translations to follow the small changes made during the redesign., Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 11/24] Small typographic fix, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 12/24] Add a link on the header, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 13/24] HTML fixes, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 14/24] New automatic suggestion mechanism, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 15/24] Restored the two columns layout., Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 16/24] Put the map generation form on its own page, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 17/24] PO file update for UI changes. French is translated, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 18/24] More work on the form behavior, added info note for unselectable items, Maxime Petazzoni, 2010/01/10
- [Maposmatic-dev] [PATCH 19/24] Cleanup and comment the suggest JS code, Maxime Petazzoni, 2010/01/10