Improve maps’ pagination for the dashboard

umap/static/umap/content.css

@@ -134,6 +134,9 @@ h2.section {
     padding-top: 28px;
 }
 h2.tabs a {
+    color: #666;
+}
+h2.tabs a:not(.selected) {
     font-weight: normal;
     color: #666;
 }
@@ -309,6 +312,12 @@ table.maps td {
 table.maps thead tr {
     line-height: 2em;
 }
+table.maps .button {
+    margin-bottom: 2px;
+    padding:4px 6px;
+    height: 36px;
+    line-height: 23px;
+}
 
 /* **************************** */
 /*           Dialog             */
@@ -323,6 +332,21 @@ dialog::backdrop {
 }
 .close-dialog {
     text-align: center;
+    margin-bottom: 0;
+}
+
+/* ********************************* */
+/*         Pagination                */
+/* ********************************* */
+.pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin: 1rem;
+    border-top: 1px solid gray;
+}
+.pagination > * {
+    padding: 1rem;
 }
 
 

umap/templates/auth/user_form.html

@@ -3,7 +3,7 @@
 {% block maincontent %}
   <div class="col wide">
     <h2 class="section tabs">
-      <a href="{% url "user_dashboard" %}">{% trans "My Dashboard" %}</a> | {% trans "My Profile" %}
+      <a href="{% url "user_dashboard" %}">{% trans "My Dashboard" %}</a> | <a class="selected" href="{% url 'user_profile' %}">{% trans "My Profile" %}</a>
     </h2>
   </div>
   <div class="wrapper">

umap/templates/umap/map_list.html

@@ -1,4 +1,4 @@
-{% load umap_tags umap_tags i18n %}
+{% load umap_tags i18n %}
 {% for map_inst in maps %}
   <hr />
   <div class="col wide">

umap/templates/umap/map_table.html

@@ -1,16 +1,15 @@
 {% load umap_tags i18n %}
 <table class="maps">
-  {% if not is_ajax %}
   <thead>
     <tr>
       <th>{% blocktrans %}Name{% endblocktrans %}</th>
+      <th>{% blocktrans %}Preview{% endblocktrans %}</th>
       <th>{% blocktrans %}Who can see / edit{% endblocktrans %}</th>
       <th>{% blocktrans %}Last save{% endblocktrans %}</th>
       <th>{% blocktrans %}Owner{% endblocktrans %}</th>
       <th>{% blocktrans %}Actions{% endblocktrans %}</th>
     </tr>
   </thead>
-  {% endif %}
   <tbody>
     {% for map_inst in maps %}
       {% with unique_id="map_"|addstr:map_inst.pk %}
@@ -18,12 +17,14 @@
         <tr>
           <td>
             <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
-            <button class="map-opener" data-map-id="{{ unique_id }}">{% blocktrans %}Preview{% endblocktrans %}</button>
+          </td>
+          <td>
+            <button class="button map-opener" data-map-id="{{ unique_id }}">{% blocktranslate %}Open preview{% endblocktranslate %}</button>
             <dialog>
               <form method="dialog">
                 <div id="{{ unique_id }}_target" class="map_fragment"></div>
                 <p class="close-dialog">
-                  <button type="submit">Close</button>
+                  <button class="button" type="submit">Close</button>
                 </p>
               </form>
             </dialog>
@@ -43,9 +44,26 @@
     {% endfor %}
   </tbody>
 </table>
-{% if maps.has_next %}
-  <div class="col wide">
-    <a href="?{% paginate_querystring maps.next_page_number %}"
-       class="button more_button neutral">{% trans "More" %}</a>
-  </div>
-{% endif %}
+<div class="pagination">
+  {% if maps.has_previous %}
+    <a href="?p=1{% if q %}&q={{ q }}{% endif %}">&laquo; {% translate "first" %}</a>
+    <a href="?p={{ maps.previous_page_number }}{% if q %}&q={{ q }}{% endif %}">&lsaquo; {% translate "previous" %}</a>
+  {% else %}
+    <span></span>
+    <span></span>
+  {% endif %}
+
+  <span class="current">
+    {% blocktranslate with maps_number=maps.number num_pages=maps.paginator.num_pages %}
+      Page {{ maps_number }} of {{ num_pages }}
+    {% endblocktranslate %}
+  </span>
+
+  {% if maps.has_next %}
+    <a href="?p={{ maps.next_page_number }}{% if q %}&q={{ q }}{% endif %}">{% translate "next" %} &rsaquo;</a>
+    <a href="?p={{ maps.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}">{% translate "last" %} &raquo;</a>
+  {% else %}
+    <span></span>
+    <span></span>
+  {% endif %}
+</div>

umap/templates/umap/user_dashboard.html

@@ -7,7 +7,7 @@
   {% trans "Search my maps" as placeholder %}
   <div class="col wide">
     <h2 class="section tabs">
-      {% trans "My Dashboard" %} | <a href="{% url 'user_profile' %}">{% trans "My profile" %}</a>
+      <a class="selected" href="{% url 'user_dashboard' %}">{% trans "My Dashboard" %}</a> | <a href="{% url 'user_profile' %}">{% trans "My profile" %}</a>
     </h2>
     {% include "umap/search_bar.html" with action=request.get_full_path placeholder=placeholder %}
   </div>

umap/views.py

@@ -270,7 +270,12 @@ class UserDashboard(PaginatorMixin, DetailView, SearchMixin):
 
     def get_context_data(self, **kwargs):
         kwargs.update(
-            {"maps": self.paginate(self.get_maps(), settings.UMAP_MAPS_PER_PAGE_OWNER)}
+            {
+                "q": self.request.GET.get("q"),
+                "maps": self.paginate(
+                    self.get_maps(), settings.UMAP_MAPS_PER_PAGE_OWNER
+                ),
+            }
         )
         return super().get_context_data(**kwargs)