First shot in removing jQuery and Foundation (\o/) cf #12

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "umap/static/darline"]
+	path = umap/static/darline
+	url = git://github.com/yohanboniface/Darline.git

fabfile.py

@@ -251,12 +251,13 @@ def collect_remote_statics():
     remote_static_dir = '{project_dir}/{project_name}/remote_static'.format(**env)
     run('mkdir -p {0}'.format(remote_static_dir))
     remote_repositories = {
-        'leaflet': "git://github.com/Leaflet/Leaflet.git@master",
+        'leaflet': "git://github.com/Leaflet/Leaflet.git@stable",
         'draw': "git://github.com/Leaflet/Leaflet.draw.git@master",
         'hash': "git://github.com/mlevans/leaflet-hash.git@master",
         'storage': 'git://github.com/yohanboniface/Leaflet.Storage.git@master',
         'edit_in_osm': 'git://github.com/yohanboniface/Leaflet.EditInOSM.git@master',
         'minimap': 'git://github.com/Norkart/Leaflet-MiniMap.git@master',
+        'darline': 'git://github.com/yohanboniface/Darline.git@master',
     }
     with cd(remote_static_dir):
         for subdir, path in remote_repositories.iteritems():

requirements.pip

@@ -8,9 +8,7 @@ Django>=1.4
 South
 django-leaflet-storage
 django_compressor
-django-foundation
 django-social-auth
 GDAL
 git+git://github.com/yohanboniface/vectorformats.git@leafletstorage
-git+git://github.com/frankban/django-endless-pagination.git
 hg+https://bitbucket.org/liberation/sesql

umap/static/darline

@@ -0,0 +1 @@
+Subproject commit 9e55949bb9bd818236fba1fabb591c44e0f9d1b2

umap/static/umap/umap.css

@@ -12,8 +12,17 @@ body.map_detail {
 .map_fragment {
     width: 100%;
 }
-.map_list .map_fragment {
+.map_list .map_fragment,
-    height: 200px;
+.demo_map .map_fragment {
+    height: 210px;
+}
+.umap-features-list img {
+    width: 14px;
+    vertical-align: middle;
+    padding-right: 14px;
+}
+.umap-features-list li {
+    line-height: 21px;
 }
 
 /* Modals */
@@ -40,31 +49,6 @@ input:-moz-placeholder, :-moz-placeholder {
    color: #a5a5a5;
 }
 
-/* Forms */
-
-.help-text small, small.help-text {
-    display: block;
-    padding: 6px 4px;
-    margin-top: -13px;
-    margin-bottom: 12px;
-    background: #a5a5a5;
-    color: #fff;
-    font-size: 12px;
-    font-weight: bold;
-    -moz-border-radius-bottomleft: 2px;
-    -webkit-border-bottom-left-radius: 2px;
-    border-bottom-left-radius: 2px;
-    -moz-border-radius-bottomright: 2px;
-    -webkit-border-bottom-right-radius: 2px;
-    border-bottom-right-radius: 2px;
-}
-.formbox {
-    border: 1px #a5a5a5 solid;
-    min-height: 32px;
-    line-height: 32px;
-    padding-left: 10px;
-    margin-bottom: 10px;
-}
 #storage-ui-container textarea {
     height: 100px;
 }
@@ -80,29 +64,29 @@ input:-moz-placeholder, :-moz-placeholder {
     background-color: #970b0e;
 }
 
-#style_options > * {
+fieldset.toggle > * {
     display: none;
 }
 
-#style_options .more_style_options,
+fieldset.toggle .more_style_options,
-#style_options legend {
+fieldset.toggle legend {
     display: block;
     cursor: pointer;
 }
-#style_options .more_style_options:before {
+fieldset.toggle .more_style_options:before {
     content: "…";
 }
-#style_options legend:before {
+fieldset.toggle legend:before {
     content: "▶";
     padding-right: 5px;
 }
-#style_options.on legend:before {
+fieldset.toggle.on legend:before {
     content: "▼";
 }
-#style_options.on > * {
+fieldset.toggle.on > * {
     display: block;
 }
-#style_options.on .more_style_options {
+fieldset.toggle.on .more_style_options {
     display: none;
 }
 
@@ -118,9 +102,11 @@ input:-moz-placeholder, :-moz-placeholder {
 /* **************** */
 /*    Login icons   */
 /* **************** */
-/*.login-grid li {
+.login-grid li,
+.login-grid a {
+    display: inline-block;
 }
-*/
+
 .login-grid a {
     border: 1px solid #e5e5e5;
     padding: 5px;
@@ -130,7 +116,6 @@ input:-moz-placeholder, :-moz-placeholder {
     background-size: 92px 92px;
     height: 92px;
     width: 92px;
-    display: inline-block;
     margin-right: 10px;
 }
 .login-grid .login-github {
@@ -145,3 +130,73 @@ input:-moz-placeholder, :-moz-placeholder {
 .login-grid .login-openstreetmap {
     background-image: url("./openstreetmap.png");
 }
+
+/*
+* Navigation
+*/
+nav {
+    min-height: 70px;
+    font-family: sans-serif;
+    font-size: 0;
+    border-bottom: solid 1px #ddd;
+}
+
+nav section, nav h1, nav ul, nav li, nav a {
+    display: inline-block;
+    font-size: 14px;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    font-weight: normal;
+}
+
+nav ul li {
+    height: 100%;
+}
+
+nav a {
+    display: inline-block;
+    height: 100%;
+    line-height: 70px;
+    padding: 0 14px;
+    margin: 0 7px 0 0;
+    color: #000;
+    text-align: center;
+}
+
+nav a:hover, nav h1 a {
+    background-color: SeaGreen;
+}
+
+nav h1 a {
+    font-weight: bold;
+}
+
+nav a.logout {
+    font-style: italic;
+}
+
+nav li.has-button {
+    padding-top: 7px;
+}
+
+nav .branding ul, nav .branding li,
+nav .branding a, nav .branding h1 {
+    width: 100%;
+}
+
+nav .branding {
+    margin-bottom: 7px;
+}
+
+/* **************************** */
+/*   Override Leaflet.Storage   */
+/* **************************** */
+body.content #storage-ui-container {
+/*    width: 100%;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: inherit;
+    height: 30%;
+*/    background-color: #fff;
+}

umap/templates/auth/user_detail.html

@@ -1,33 +1,18 @@
-{% extends "umap/home.html" %}
+{% extends "umap/content.html" %}
+
+{% load i18n %}
 
 {% block content %}
-<div class="row">
+<div class="col _35">
-  <div class="twelve columns">
+  <h4>{% blocktrans %}Browse {{ current_user }}'s maps{% endblocktrans %}</h4>
-
+</div>
-    <!-- Navigation -->
+<div class="col _35 map_list">
-
-    {% include 'umap/navigation.html' %}
-    <!-- End Navigation -->
-
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="twelve columns">
-      <h2>Browse {{ current_user }}'s maps</h2>
-    </div>
-  </div>
-  <div class="row">
-    <div class="twelve columns">
-      <div class="row map_list">
   {% if maps %}
     {% include "leaflet_storage/map_list.html" %}
   {% else %}
-          <div class="twelve mobile-six columns">
+    <div>
             {{ current_user }} has not map yet.
     </div>
   {% endif %}
-      </div>
+</div>
-    </div>
-  </div>
 {% endblock content %}

umap/templates/base.html

@@ -6,10 +6,15 @@
     <meta charset="utf-8">
     {% compress css %}
     <!-- Included CSS Files (Compressed) -->
-    <link rel="stylesheet" href="{{ STATIC_URL }}foundation/stylesheets/foundation.css">
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/core.css">
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/grid.css">
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/form.css">
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/color/seagreen.css">
+    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/debug.css">
+    <script src="{{ STATIC_URL }}darline/src/js/core.js"></script>
+    <script src="{{ STATIC_URL }}darline/src/js/debug.js"></script>
+    <link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
     <link rel="stylesheet" href="{{ STATIC_URL }}umap/umap.css">
-
-    <script src="{{ STATIC_URL }}foundation/javascripts/modernizr.foundation.js"></script>
     {% endcompress css %}
     <!-- IE Fix for HTML5 Tags -->
     <!--[if lt IE 9]>
@@ -23,40 +28,36 @@
 </head>
 <body class="{% block body_class %}{% endblock %}">
 
-<div>
+    {% block header %}
+    {% endblock %}
+
     {% block content %}
     {% endblock %}
-</div>
+
-    {% compress js %}
-    <script src="{{ STATIC_URL }}foundation/javascripts/modernizr.foundation.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.mediaQueryToggle.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.reveal.js"></script>
-    <!--script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.orbit.js"></script-->
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.navigation.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.buttons.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.tabs.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.forms.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.tooltips.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.accordion.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.placeholder.js"></script>
-    <script src="{{ STATIC_URL }}foundation/javascripts/jquery.foundation.alerts.js"></script>
-    <script src="{{ STATIC_URL }}endless_pagination/js/endless-pagination.js"></script>
-    {% endcompress js %}
     {% block bottom_js %}
         <script src="{{ STATIC_URL }}storage/contrib/js/storage.ui.default.js"></script>
         <script type="text/javascript">
+            L.Storage.on('ui:ready', function () {
                 function fn (e) {
-                var styleDiv = L.DomUtil.get("style_options");
+                    D.DOM.toggleClass(this.parentNode, "on");
-                if (L.DomUtil.hasClass(styleDiv, "on")) {
-                    L.DomUtil.removeClass(styleDiv, "on");
                 }
-                else {
+                D.Event.on('fieldset.toggle legend', 'click', fn);
-                    L.DomUtil.addClass(styleDiv, "on");
+            });
+            var getMore = function (e) {
+                D.Event.stop(e);
+                D.Xhr.get(this.href, {
+                    callback: function (data) {
+                        var container = this.parentNode;
+                        container.innerHTML = data;
+                        D.DOM.forEach(D.DOM.get('script', container), function (item) {
+                            eval(item.firstChild.textContent);
+                        });
+                        D.Event.on('.more_button', 'click', getMore);
+                    },
+                    thisobj: this
+                });
             }
-            }
+            D.Event.on('.more_button', 'click', getMore);
-            $(document).on('click', '#style_options_toggle', fn);
-            $(document).on('click', '.more_style_options', fn);
         </script>
     {% endblock %}
     <div id="storage-ui-container"></div>

umap/templates/leaflet_storage/map_detail.html

@@ -6,7 +6,6 @@
 {% block extra_head %}
     {% compress css %}
         {% leaflet_storage_css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
     {% endcompress %}
     {% compress js %}
         {% leaflet_storage_js %}

umap/templates/leaflet_storage/map_list.html

@@ -1,12 +1,11 @@
-{% load leaflet_storage_tags endless i18n %}
+{% load leaflet_storage_tags umap_tags i18n %}
-
-{% paginate 5 maps %}
 
 {% for map_inst in maps %}
-<div class="twelve mobile-six columns">
+<div class="col _35">
     {% map_fragment map_inst %}
-    <div class="panel"><strong>{{ map_inst.name }}</strong> — «{{ map_inst.description }}» <em>{% trans "Cured by" %} <a href="{% url user_maps map_inst.owner.username %}">{{ map_inst.owner }}</a></em> — <a href="{{ map_inst.get_absolute_url }}">{% trans "See this map!" %}</a></div>
+    <div class="tintbox"><strong>{{ map_inst.name }}</strong> — {% if map_inst.description %}«{{ map_inst.description }}» {% endif %}<em>{% trans "Cured by" %} <a href="{% url user_maps map_inst.owner.username %}">{{ map_inst.owner }}</a></em> — <a href="{{ map_inst.get_absolute_url }}">{% trans "See this map!" %}</a></div>
 </div>
 {% endfor %}
-
+{% if maps.has_next %}
-{% show_more %}
+    <div class="col _35"><a href="?{% paginate_querystring maps.next_page_number %}" class="button more_button">{% trans "More" %}</a></div>
+{% endif %}

umap/templates/leaflet_storage/map_update_tilelayers.html

@@ -2,18 +2,16 @@
 <h3>{% trans "Choose your tilelayer" %}</h3>
 <form action="{% url map_update_tilelayers map.pk %}" method="post" id="map_edit">
     {% csrf_token %}
-    <ul class="block-grid two-up mobile">
     {% for tilelayer in tilelayers %}
-        <li>
+        <div class="col _6 pile">
             <label for="tilelayer_{{ forloop.counter }}">
-              {% tilelayer_preview tilelayer %}<div class="panel">
+              {% tilelayer_preview tilelayer %}<div class="textbox">
                 <input type="radio" id="tilelayer_{{ forloop.counter }}" name="tilelayer" value="{{ tilelayer.pk }}" {% if tilelayer in map.tilelayers.all %}checked{% endif %} />
                 {{ tilelayer.name }}
               </div>
             </label>
-        </li>
-    {% endfor %}
-    <div class="row twelve columns">
-        <input type="submit" class="button" />
         </div>
+    {% endfor %}
+    <hr />
+    <input type="submit" class="button" />
 </form>

umap/templates/leaflet_storage/upload_form.html

@@ -7,30 +7,26 @@
     {% endfor %}
     <input type="submit" class="button" />
 </form>
-<h5>{% trans "Details on formats" %}</h5>
+<fieldset class="toggle">
-<ul class="accordion">
+    <legend>{% trans "Details on formats" %}</legend>
-    <li class="active">
+    <div>
-        <div class="title">
         <h5>{% trans "GeoJSON" %}</h5>
-        </div>
+        <div>
-        <div class="content">
             {% trans "Properties used: name or title, description, color" %}
         </div>
-    </li>
-    <li class="active">
-        <div class="title">
-            <h5>{% trans "KML" %}</h5>
     </div>
-        <div class="content">
+    <hr />
+    <div>
+        <h5>{% trans "KML" %}</h5>
+        <div>
             {% trans "Properties used: name, description" %}
         </div>
-    </li>
-    <li class="active">
-        <div class="title">
-            <h5>{% trans "GPX" %}</h5>
     </div>
-        <div class="content">
+    <hr />
+    <div>
+        <h5>{% trans "GPX" %}</h5>
+        <div>
             {% trans "Properties used: name, desc" %}
         </div>
-    </li>
+    </div>
-</ul>
+</fieldset>

umap/templates/umap/about.html

@@ -0,0 +1,5 @@
+{% extends "umap/content.html" %}
+
+{% block content %}
+  {% include "umap/about_summary.html" %}
+{% endblock content %}

umap/templates/umap/about_summary.html

@@ -0,0 +1,26 @@
+{% load leaflet_storage_tags i18n %}
+<div class="col _35">
+  <div class="col _11 c20_20 tintbox">
+    <h5>{% trans "What is u{Map}" %}</h5>
+    <p>{% blocktrans %}u{Map} let you create maps with <a href="http://osm.org" />OpenStreetMap</a> layers in a minute and embed them in your site.<br /> This is a demo instance, you can host your own, it's <a href="https://bitbucket.org/yohanboniface/umap">open source</a>!{% endblocktrans %}
+    </p>
+  </div>
+  <div class="col umap-features-list _11 c20_20 c30_18 c25_13">
+    <h5>{% trans "What can you do?" %}</h5>
+    <ul>
+    <li><img src="{{ STATIC_URL }}storage/src/img/layers.png" />{% trans "Choose the layers of your map" %}</li>
+    <li><img src="{{ STATIC_URL }}draw/dist/images/draw-marker-icon.png" />{% trans "Add POIs: markers, lines, polygons..." %}</li>
+    <li><img src="{{ STATIC_URL }}draw/dist/images/draw-marker-icon.png" />{% trans "Manage POIs colours and icons" %}</li>
+    <li><img src="{{ STATIC_URL }}storage/src/img/settings.png" />{% trans "Manage map options: display a minimap, locate user on load…" %}</li>
+    <li><img src="{{ STATIC_URL }}storage/src/img/upload.png" />{% trans "Batch import geostructured data (GEOJson...)" %}</li>
+    <li><img src="{{ STATIC_URL }}storage/src/img/copyleft.png" />{% trans "Choose the licence for your data" %}</li>
+    <li><img src="{{ STATIC_URL }}storage/src/img/embed.png" />{% trans "Embed and share your map" %}</li>
+    </ul>
+  </div>
+  {% if demo_map %}
+  <div class="col _11 demo_map c30_wide">
+    {% map_fragment demo_map %}
+    <a href="{{ demo_map.get_absolute_url }}" class="button">Play with the demo</a>
+  </div>
+  {% endif %}
+</div>

umap/templates/umap/content.html

@@ -0,0 +1,63 @@
+{% extends "base.html" %}
+
+{% load leaflet_storage_tags compress i18n %}
+
+{% block body_class %}content{% endblock %}
+
+{% block extra_head %}
+    {% compress css %}
+      {% leaflet_storage_css %}
+    {% endcompress css %}
+    {% compress js %}
+      {% leaflet_storage_js %}
+    {% endcompress js %}
+{% endblock %}
+
+{% block header %}
+  <div class="col _35">
+    {% include 'umap/navigation.html' %}
+  </div>
+{% endblock %}
+
+{% block content %}
+<div class="col _35">
+  <form action="{% url search %}" method="GET">
+  <div class="part _29">
+    <input name="q" type="search" placeholder="{% trans 'Search maps' %}" value="{{ q|default:"" }}" />
+  </div>
+  <div class="part _5">
+    <input type="submit" value="Search" />
+  </div>
+  </form>
+</div>
+<hr />
+<div class="col _35 map_list">
+  <h2>{% trans "Last maps" %}</h2>
+  {% include "leaflet_storage/map_list.html" %}
+</div>
+
+<!-- Included JS Files -->
+{% endblock content %}
+
+{% block bottom_js %}
+  {{ block.super }}
+  <script type="text/javascript">
+    D.Event.on('a.login', 'click', function (e) {
+        D.Event.stop(e);
+        L.Storage.Xhr.login({
+            "login_required": this.getAttribute('href'),
+            "redirect": "/"
+        });
+    });
+    D.Event.on('a.logout', 'click', function (e) {
+      D.Event.stop(e);
+      L.Storage.Xhr.logout(this.getAttribute('href'));
+    });
+    D.Event.on('a.create-map', 'click', function (e) {
+      D.Event.stop(e);
+      L.Storage.Xhr.get(this.getAttribute('href'), {
+        listen_form: {id: "map_edit"}
+      });
+    });
+  </script>
+{% endblock bottom_js %}

umap/templates/umap/home.html

@@ -1,109 +1,16 @@
-{% extends "base.html" %}
+{% extends "umap/content.html" %}
 
 {% load leaflet_storage_tags compress i18n %}
 
-{% block extra_head %}
-    {% compress css %}
-      {% leaflet_storage_css %}
-    {% endcompress css %}
-    {% compress js %}
-      {% leaflet_storage_js %}
-    {% endcompress js %}
-{% endblock %}
-
 {% block content %}
-<div class="row">
+{% if not user.is_authenticated %}
-  <div class="twelve columns">
+  {% include "umap/about_summary.html" %}
-
+<hr />
-    <!-- Navigation -->
+{% endif %}
-
+{% include "umap/search_bar.html" %}
-    {% include 'umap/navigation.html' %}
+<div class="col _35 map_list">
-    <!-- End Navigation -->
+  <h2>{% trans "Get inspired, browse maps" %}</h2>
-
-    </div>
-  </div>
-
-
-  <div class="row">
-    <div class="twelve columns">
-      <div class="row">
-
-    <!-- Content -->
-
-        <div class="eight columns">
-          <div class="panel radius">
-
-          <div class="row">
-          <div class="six mobile-two columns">
-            <h4>u{Map} <em>alpha</em></h4><hr/>
-            <h5 class="subheader">{% blocktrans %}u{Map} let you create maps with OpenStreetMap layers in a minute and embed them in your site.<br /> This is a demo instance, you can host your own, it's <strong>open source</strong>!{% endblocktrans %}
-            </h5>
-          </div>
-          <div class="six mobile-two columns">
-            <h5>{% trans "What you can do?" %}</h5>
-            <ol>
-              <li>{% trans "Choose the layers of your map" %}</li>
-              <li>{% trans "Add POIs: markers, lines, polygons..." %}</li>
-              <li>{% trans "Manage POIs colours and icons" %}</li>
-              <li>{% trans "Batch import geostructured data (GEOJson...)" %}</li>
-              <li>{% trans "Choose the licence for your data" %}</li>
-              <li>{% trans "Embed and share your map" %}</li>
-            </ol>
-        </div>
-
-        </div>
-        </div>
-        </div>
-
-        <div class="four columns hide-for-small">
-
-          <a href="{% url map_add %}" data-listen-form="map_edit" class="reveal">
-          <div class="panel radius callout" align="center">
-            <strong>{% trans "Test it and create a map" %}</strong>
-          </div>
-          </a>
-
-          <a href="https://bitbucket.org/yohanboniface/umap">
-          <div class="panel radius callout" align="center">
-            <strong>{% trans "Fork it" %}</strong>
-          </div>
-          </a>
-
-          {% if not user.is_authenticated %}
-          <a href="{% url login %}" class="login_button">
-          <div class="panel radius callout" align="center">
-            <strong>{% trans "Log in" %} / {% trans "Sign in" %}</strong>
-          </div>
-          </a>
-          {% endif %}
-
-        </div>
-
-    <!-- End Content -->
-
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="twelve columns">
-      <hr />
-      <h2>{% trans "Browse maps" %}</h2>
-    </div>
-  </div>
-  <div class="row">
-    <div class="twelve columns">
-      <div class="row map_list">
   {% include "leaflet_storage/map_list.html" %}
-      </div>
+</div>
-    </div>
-  </div>
 
-<!-- Included JS Files -->
 {% endblock content %}
-
-{% block bottom_js %}
-  <script src="{{ STATIC_URL }}storage/contrib/js/storage.ui.foundation.js"></script>
-  <script type="text/javascript">
-    $.endlessPaginate({paginateOnScroll: true});
-  </script>
-{% endblock bottom_js %}

umap/templates/umap/navigation.html

@@ -1,25 +1,32 @@
 {% load i18n %}
-<nav class="top-bar contain-to-grid">
+<nav>
+  <section class="part _5 c30_wide branding">
     <ul>
       <li class="name"><h1><a href="/">u{Map} <em>alpha</em></a></h1></li>
-    <li class="toggle-topbar"><a href="#"></a></li>
     </ul>
+  </section>
 
-  <section>
+  <section class="part _20 c25_16">
-    <ul class="left">
+    <ul>
       {% if user.is_authenticated %}
         <li><a href="{% url user_maps user.username %}">{% trans "My maps" %} ({{ user }})</a></li>
-        <li><a href="{% url logout %}" class="logout_button">{% trans "Log out" %}</a></li>
       {% else %}
-        <li><a href="{% url login %}" class="login_button">{% trans "Log in" %}</a></li>
+        <li><a href="{% url login %}" class="login">{% trans "Log in" %} / {% trans "Sign in" %}</a></li>
+      {% endif %}
+      <li><a href="{% url about %}">{% trans "About" %}</a></li>
+      <li class="c25_hide"><a href="mailto:yb@fluv.io">{% trans "Feedback" %}</a></li>
+      {% if user.is_authenticated %}
+        <li><a href="{% url logout %}" class="logout">{% trans "Log out" %}</a></li>
       {% endif %}
     </ul>
+  </section>
 
-    <ul class="right">
+  <section class="right">
-      <li class="search">
+    <ul>
-        <form action="{% url search %}" method="GET">
+      <li class="has-button _5 c20_wide">
-          <input name="q" type="search" placeholder="{% trans 'Search maps' %}" value="{{ q|default:"" }}" />
+        <a href="{% url map_add %}" data-listen-form="map_edit" class="button create-map">
-        </form>
+          {% trans "Create a map" %}
+        </a>
       </li>
     </ul>
   </section>

umap/templates/umap/search.html

@@ -1,35 +1,22 @@
-{% extends "umap/home.html" %}
+{% extends "umap/content.html" %}
 
 {% load i18n %}
 
 {% block content %}
-<div class="row">
+{% include "umap/search_bar.html" %}
-  <div class="twelve columns">
+{% if q %}
-
+  <div class="col _35">
-    <!-- Navigation -->
-
-    {% include 'umap/navigation.html' %}
-    <!-- End Navigation -->
-
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="twelve columns">
     <h4>{% blocktrans %}Search for maps containing «{{ q }}» {% endblocktrans %}</h4>
   </div>
-  </div>
+
-  <div class="row">
+  <div class="col _35 map_list">
-    <div class="twelve columns">
-      <div class="row map_list">
     {% if maps %}
       {% include "leaflet_storage/map_list.html" %}
     {% else %}
-          <div class="twelve mobile-six columns">
+      <div>
         {% trans "Not map found." %}
       </div>
     {% endif %}
   </div>
-    </div>
+{% endif %}
-  </div>
 {% endblock content %}

umap/templates/umap/search_bar.html

@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<div class="col _35">
+  <form action="{% url search %}" method="GET">
+  <div class="part _29 c30_24 c25_19 c20_14">
+    <input name="q" type="search" placeholder="{% trans 'Search maps' %}" value="{{ q|default:"" }}" />
+  </div>
+  <div class="part _5">
+    <input type="submit" value="Search" />
+  </div>
+  </form>
+</div>
+<hr />

umap/templates/umap/styles_fieldset.html

@@ -1,7 +1,6 @@
 {% load umap_tags i18n %}
-<fieldset id="style_options">
+<fieldset class="toggle">
-    <legend id="style_options_toggle">{% trans "Styles options" %}</legend>
+    <legend class="style_options_toggle">{% trans "Styles options" %}</legend>
-    <label class="more_style_options"></label>
     {% foundation_field form.color %}
     {% if form.icon_class and form.pictogram %}
     <div class="formbox">

umap/templatetags/umap_tags.py

@@ -1,3 +1,5 @@
+from copy import copy
+
 from django import template
 
 register = template.Library()
@@ -8,3 +10,10 @@ def foundation_field(field):
     return {
         'field': field,
     }
+
+
+@register.simple_tag(takes_context=True)
+def paginate_querystring(context, page):
+    qs = copy(context["request"].GET)
+    qs["p"] = page
+    return qs.urlencode()

umap/urls.py

@@ -14,6 +14,7 @@ urlpatterns = patterns('',
     (r'^admin/', include(admin.site.urls)),
     url(r'^$', views.home, name="home"),
     url(r'^search/$', views.search, name="search"),
+    url(r'^about/$', views.about, name="about"),
     url(r'^user/(?P<username>[-_\w]+)/$', views.user_maps, name='user_maps'),
     url(r'', include('social_auth.urls')),
     (r'', include('leaflet_storage.urls')),

umap/views.py

@@ -3,6 +3,8 @@ from django.contrib.auth.models import User
 from django.views.generic import DetailView
 from django.db.models import Q
 from django.contrib.gis.measure import D
+from django.conf import settings
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
 from sesql.shortquery import shortquery
 
@@ -10,14 +12,43 @@ from leaflet_storage.models import Map
 from leaflet_storage.forms import DEFAULT_CENTER
 
 
-class Home(TemplateView):
+class PaginatorMixin(object):
+    per_page = 5
+
+    def paginate(self, qs):
+        paginator = Paginator(qs, self.per_page)
+        page = self.request.GET.get('p')
+        try:
+            qs = paginator.page(page)
+        except PageNotAnInteger:
+            # If page is not an integer, deliver first page.
+            qs = paginator.page(1)
+        except EmptyPage:
+            # If page is out of range (e.g. 9999), deliver last page of results.
+            qs = paginator.page(paginator.num_pages)
+        return qs
+
+
+class Home(TemplateView, PaginatorMixin):
     template_name = "umap/home.html"
     list_template_name = "leaflet_storage/map_list.html"
 
     def get_context_data(self, **kwargs):
-        maps = Map.objects.filter(center__distance_gt=(DEFAULT_CENTER, D(km=1))).order_by('-modified_at')[:50]
+        qs = Map.objects.filter(center__distance_gt=(DEFAULT_CENTER, D(km=1)))
+        demo_map = None
+        if hasattr(settings, "UMAP_DEMO_PK"):
+            try:
+                demo_map = Map.objects.get(pk=settings.UMAP_DEMO_PK)
+            except Map.DoesNotExist:
+                pass
+            else:
+                qs = qs.exclude(id=demo_map.pk)
+        maps = qs.order_by('-modified_at')[:50]
+        maps = self.paginate(maps)
+
         return {
             "maps": maps,
+            "demo_map": demo_map
         }
 
     def get_template_names(self):
@@ -32,7 +63,14 @@ class Home(TemplateView):
 home = Home.as_view()
 
 
-class UserMaps(DetailView):
+class About(Home):
+
+    template_name = "umap/about.html"
+
+about = About.as_view()
+
+
+class UserMaps(DetailView, PaginatorMixin):
     model = User
     slug_url_kwarg = 'username'
     slug_field = 'username'
@@ -40,7 +78,8 @@ class UserMaps(DetailView):
     context_object_name = "current_user"
 
     def get_context_data(self, **kwargs):
-        maps = Map.objects.filter(owner=self.object).order_by('-modified_at')[:30]
+        maps = Map.objects.filter(Q(owner=self.object) | Q(editors=self.object)).order_by('-modified_at')[:30]
+        maps = self.paginate(maps)
         kwargs.update({
             "maps": maps
         })
@@ -58,13 +97,16 @@ class UserMaps(DetailView):
 user_maps = UserMaps.as_view()
 
 
-class Search(TemplateView):
+class Search(TemplateView, PaginatorMixin):
     template_name = "umap/search.html"
     list_template_name = "leaflet_storage/map_list.html"
 
     def get_context_data(self, **kwargs):
-        q = self.request.GET['q']
+        q = self.request.GET.get('q')
+        maps = []
+        if q:
             maps = shortquery(Q(fulltext__containswords=q))
+            maps = self.paginate(maps)
         kwargs.update({
             'maps': maps,
             'q': q