From 642d606045f086e9eb4c486639dd8847a2b8d824 Mon Sep 17 00:00:00 2001
From: Luke Granger-Brown <git@lukegb.com>
Date: Sat, 1 Jun 2024 10:50:04 +0000
Subject: [PATCH] Make the villages page an unholy chimera of a table and cards

When the screen width is <600px, we display the villages list as a set of cards.
When the screen width is >600px, we display the villages list as a table.

This uses CSS grid.
---
 css/_villages.scss               | 82 ++++++++++++++++++++++++++++++++
 css/main.scss                    |  1 +
 templates/villages/villages.html | 48 ++++++++-----------
 3 files changed, 104 insertions(+), 27 deletions(-)
 create mode 100644 css/_villages.scss

diff --git a/css/_villages.scss b/css/_villages.scss
new file mode 100644
index 000000000..42cf4d82c
--- /dev/null
+++ b/css/_villages.scss
@@ -0,0 +1,82 @@
+/* Villages */
+@use "./_variables.scss" as *;
+
+.village-table {
+  display: grid;
+  padding: 0;
+
+  .village-table-title a {
+    color: inherit;
+  }
+
+  /* Display as cards */
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+
+    .village-table-header {
+      display: none;
+    }
+    .village-table-village {
+      background-color: $highlight-background;
+      color: $highlight-background-text;
+      border-radius: 3px;
+      padding: 10px 15px 10px 15px;
+      margin-bottom: 10px;
+    }
+
+    .village-table-title {
+      color: $highlight-background-text;
+      margin-top: 0;
+    }
+    .village-table-description {
+      margin: 0;
+    }
+  }
+
+  /* Display as table */
+  @media (min-width: 600px) {
+    grid-template-columns: [title-start] auto [title-end desc-start] auto [desc-end links-start] max-content [links-end];
+
+    background-color: $highlight-background;
+    color: $highlight-background-text;
+    border-radius: 3px;
+
+    .village-table-village, .village-table-header {
+      display: contents;
+    }
+    .village-table-header h4 {
+      font-weight: bold;
+    }
+
+    .village-table-title, .village-table-description, .village-table-links {
+      margin: 0;
+      padding: 10px 15px 5px 15px;
+    }
+    .village-table-village .village-table-title {
+      font-size: inherit;
+      font-family: inherit;
+    }
+    .village-table-village::before {
+      display: block;
+      content: '';
+      height: 0;
+      border-top: 1px solid #aaa;
+      grid-column: title-start / links-end;
+    }
+    .village-table-title {
+      grid-column: title-start / title-end;
+      color: $highlight-background-text;
+    }
+    .village-table-description {
+      grid-column: desc-start / desc-end;
+      color: $highlight-background-text;
+    }
+    .village-table-links {
+      grid-column: links-start / links-end;
+    }
+
+    &:not(.village-table-located) {
+      grid-template-columns: [title-start] auto [title-end desc-start] auto [desc-end links-start] 0 [links-end];
+    }
+  }
+}
diff --git a/css/main.scss b/css/main.scss
index 9e0172175..b7ae6b4b3 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -19,6 +19,7 @@
 @use "./_tickets.scss";
 @use "./_responsive_table.scss";
 @use "./_sponsorship.scss";
+@use "./_villages.scss";
 @use "./volunteer_schedule.scss";
 
 @font-face {
diff --git a/templates/villages/villages.html b/templates/villages/villages.html
index b8ec8c881..640eb9a54 100644
--- a/templates/villages/villages.html
+++ b/templates/villages/villages.html
@@ -12,33 +12,27 @@ <h2>Villages</h2>
 {% endif %}
 </p>
 <h3>List of Villages</h3>
-<table class="table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-      {% if any_village_located %}<th></th>{% endif %}
-    </tr>
-  </thead>
-  <tbody>
+<ul class="village-table{% if any_village_located %} village-table-located{% endif %}">
+  <li class="village-table-header">
+    <h4 class="village-table-title">Name</h4>
+    <h4 class="village-table-description">Description</h4>
+  </li>
   {% for village in villages %}
-    <tr>
-      {% if village.url %}
-        <td><a href="{{ village.url }}" rel="nofollow" target="_blank">{{village.name}}</a></td>
-      {% else %}
-        <td>{{village.name}}</td>
-      {% endif %}
-      <td style="overflow-wrap: anywhere">{{village.description}}</td>
-      {% if any_village_located %}
-      <td style="width: 1px; white-space: nowrap;">
-        {% if village.map_link %}
-          <a href="{{ village.map_link }}">📍&nbsp;Map</a>
-        {% endif %}
-      </td>
-      {% endif %}
-      
-    </tr>
+  <li class="village-table-village">
+    <h4 class="village-table-title">
+      {%- if village.url %}<a href="{{ village.url }}" rel="nofollow" target="_blank">{% endif -%}
+      {{- village.name -}}
+      {%- if village.url %}</a>{% endif -%}
+    </h4>
+    <p class="village-table-description">
+      {{ village.description }}
+    </p>
+    {% if village.map_link %}
+      <div class="village-table-links">
+        <a href="{{ village.map_link }}" class="btn btn-primary" target="_blank">📍&nbsp;Map</a>
+      </div>
+    {% endif %}
+  </li>
   {% endfor %}
-  </tbody>
-</table>
+</ul>
 {% endblock %}