feat: display maps list as a grid now

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/base.css

@@ -84,6 +84,11 @@ hgroup {
 hgroup > :not(:first-child):last-child {
     font-weight: normal;
 }
+hgroup p,
+hgroup button {
+    margin: 0;
+}
+
 
 /*
 * List
@@ -158,10 +163,23 @@ dt {
 }
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    --grid-layout-gap: calc(var(--gutter) * 2);
+    --grid-column-count: 3;
+    --grid-item--min-width: 300px;
+
+    /**
+    * Calculated values.
+    */
+    --gap-count: calc(var(--grid-column-count) - 1);
+    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
+    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
+
+    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
+    grid-gap: var(--grid-layout-gap);
 }
 .grid-container.by4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    --grid-column-count: 4;
+    --grid-item--min-width: 60px;
 }
 .grid-container > * {
     text-align: center;

umap/static/umap/content.css

@@ -56,9 +56,9 @@ body.login header {
 .map_fragment {
     width: 100%;
 }
-.map_list .map_fragment,
+.map_fragment,
 .demo_map .map_fragment {
-    height: 210px;
+    height: var(--map-fragment-height);
 }
 .map_list .legend {
     padding-top: 7px;
@@ -164,6 +164,9 @@ h2.tabs a:hover {
     color: #efefef;
     text-decoration: underline;
 }
+.more_button {
+    min-height: var(--map-fragment-height);
+}
 
 
 /* **************************** */

umap/static/umap/map.css

@@ -660,10 +660,6 @@ a.umap-control-caption,
 .umap-caption .header i.icon {
     flex-shrink: 0;
 }
-.umap-caption hgroup p,
-.umap-caption hgroup button {
-    margin: 0;
-}
 .umap-browser .main-toolbox {
     padding-left: 4px; /* Align with toolbox below  */
     border-top: 1px solid var(--color-mediumGray);

umap/static/umap/vars.css

@@ -45,6 +45,7 @@
     --box-margin: 14px;
     --text-margin: 7px;
     --dialog-width: 40vw;
+    --map-fragment-height: 210px;
 
     /* z-indexes (leaflet CSS sets the map at 400 by default) */
     --zindex-alert: 500;

umap/templates/auth/user_detail.html

@@ -13,7 +13,7 @@
     </h2>
   </div>
   <div class="wrapper">
-    <div class="map_list row">
+    <div class="row grid-container">
       {% if maps %}
         {% include "umap/map_list.html" %}
       {% else %}

umap/templates/auth/user_stars.html

@@ -13,7 +13,7 @@
     </h2>
   </div>
   <div class="wrapper">
-    <div class="map_list row">
+    <div class="grid-container row">
       {% if maps %}
         {% include "umap/map_list.html" %}
       {% else %}

umap/templates/umap/content.html

@@ -43,22 +43,27 @@
   <script type="text/javascript">
     window.addEventListener('DOMContentLoaded', event => {
       const server = new U.ServerRequest()
-      const getMore = async function (e) {
-        L.DomEvent.stop(e)
-        const [{html}, response, error] = await server.get(this.href)
+      const getMore = async function (link) {
+        const container = link.parentNode
+        container.removeChild(link)
+        const [{html}, response, error] = await server.get(link.href)
         if (!error) {
-          const container = this.parentNode
-          container.innerHTML = html
+          const template = document.createElement('template')
+          template.innerHTML = html
+          container.appendChild(template.content)
+          listenForMore()
+        }
+      }
+      const listenForMore = () => {
         const more = document.querySelector('.more_button')
         if (more) {
-            L.DomEvent.on(more, 'click', getMore, more)
+          L.DomEvent.on(more, 'click', (e) => {
+            L.DomEvent.stop(e)
+            getMore(more)
+          })
         }
       }
-      }
-      const more = document.querySelector('.more_button')
-      if (more) {
-        L.DomEvent.on(more, 'click', getMore, more)
-      }
+      listenForMore()
     })
   </script>
 {% endblock bottom_js %}

umap/templates/umap/home.html

@@ -20,12 +20,14 @@
   {% endif %}
   <div class="wrapper">
     {% if maps %}
+      <div class="row">
         <h2 class="section">
           {% blocktrans %}Get inspired, browse maps{% endblocktrans %}
         </h2>
-      <div class="map_list row">
+        <div class="grid-container">
           {% include "umap/map_list.html" %}
         </div>
+      </div>
     {% endif %}
   </div>
 {% endblock maincontent %}

umap/templates/umap/map_list.html

@@ -1,22 +1,19 @@
 {% load umap_tags i18n %}
 
 {% for map_inst in maps %}
-  <hr />
-  <div class="col wide">
+  <div>
     {% map_fragment map_inst prefix=prefix page=request.GET.p %}
-    <div class="legend">
-      <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
+    <hgroup>
+      <h3><a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a></h3>
       {% with author=map_inst.get_author %}
         {% if author %}
-          <em>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></em>
+          <p>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></p>
         {% endif %}
       {% endwith %}
-    </div>
+    </hgroup>
   </div>
 {% endfor %}
 {% 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 %}

umap/templates/umap/search.html

@@ -12,7 +12,7 @@
 {% block maincontent %}
   {% include "umap/search_bar.html" %}
   <div class="wrapper">
-    <div class="map_list row">
+    <div class="row">
       {% if request.GET.q %}
         {% if maps %}
           <h2>
@@ -22,7 +22,9 @@
               {{ count }} maps found:
             {% endblocktranslate %}
           </h2>
+          <div class="grid-container">
             {% include "umap/map_list.html" with prefix="search_map" %}
+          </div>
         {% else %}
           <h2>
             {% trans "No map found." %}
@@ -32,7 +34,9 @@
         <h2>
           {% trans "Latest created maps" %}
         </h2>
+        <div class="grid-container">
           {% include "umap/map_list.html" with prefix="search_map" %}
+        </div>
       {% endif %}
     </div>
   </div>

umap/templates/umap/team_detail.html

@@ -18,7 +18,7 @@
           {% endif %}
         </div>
     </div>
-    <div class="map_list row">
+    <div class="grid-container row">
     {% if maps %}
       {% include "umap/map_list.html" %}
     {% else %}