Responsive table for community upcoming events

Author: zachleat

src/site/_includes/components/meetup-link.njk

@@ -1,6 +1,6 @@
-    <li class="mt-4 mb-8">
-    <h4 class="text-white text-lg font-bold">{{ item.group.name }}</h4>
-    <p>{{ item.venue.name }}</p>
-    <time>{{ item.local_date | formatDate }}</time> starting at <time>{{ item.local_time }}</time>
-    <p><a href="{{ item.link }}">{{ item.name }}</a></p>
-    </li>
+  <tr class="{% if loop.index0 % 2 == 0 %}bg-gray-900{% endif %}">
+    <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Group: </span>{{ item.group.name }}</td>
+    <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Name: </span><a href="{{ item.link }}">{{ item.name }}</a></td>
+    <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Venue: </span>{{ item.venue.name }}</dt>
+    <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Date/Time: </span><time>{{ item.local_date | formatDate }}</time> starting at <time>{{ item.local_time }}</time></td>
+  </tr>

src/site/community.njk

@@ -49,12 +49,22 @@ layout: layouts/base.njk
 
 <section>
   <h2>Upcoming Events</h2>
-  <ul>
+  <table>
+    <thead class="hidden md:table-header-group">
+      <tr>
+        <th class="text-left p-4">Group</th>
+        <th class="text-left p-4">Name</th>
+        <th class="text-left p-4">Venue</th>
+        <th class="text-left p-4">Date/Time</th>
+      </tr>
+    </thead>
+    <tbody>
   {% for meetup, data in meetups %}
-    {% set item = meetup%}
+    {% set item = meetup %}
     {% include "components/meetup-link.njk" %}
   {% endfor %}
-  </ul>
+    </tbody>
+  </table>
 </section>