Update lists UI

src/static/main.css

@@ -2,6 +2,34 @@
   width: fit-content;
 }
 
+.max-w-content {
+  max-width: 600px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px
+}
+
+@media screen and (min-width: 600px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.card-header {
+  flex: 0 1 auto !important;
+}
+
+.card-title {
+  margin-top: var(--bs-card-title-spacer-y);
+}
+
+.link {
+  text-decoration: 2px solid underline;
+}
+
 .container-xs {
   max-width: 100%;
 }

src/templates/spokanetech/partials/human_readable_datetime.htm

@@ -1 +1,2 @@
-{{ object.date_time|date:'l, F j, Y' }} at {{ object.date_time|date:'g:i A' }}
+{% load web_extras %}
+{{ object.date_time|date:'l, F j, Y' }} at {{ object.date_time|date:'g:i A' }}{% if duration %} to {{ object.date_time|add_time:duration|date:'g:i A' }} {% endif %}

src/web/templates/web/event_list.html

@@ -0,0 +1,5 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block content %}
+{% include "web/partials/event_list.htm" %}
+{% endblock content %}

src/web/templates/web/partials/detail_event.htm

@@ -1,44 +1,45 @@
 {% load web_extras markdownify %}
+<div class="max-w-content">
+  <h1 class="mb-3 text-primary">
+    {{ object }}
+  </h1>
 
-<h1 class="mb-3 text-primary">
-  {{ object }}
-</h1>
-
-<div class="mb-3 d-inline-block">
-  {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object only %}
-  {% if object.duration %}for {{ object.duration|timedelta }}{% endif %}
-</div>
+  <div class="mb-3 d-inline-block">
+    {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object only %}
+  </div>
 
-<div class="mb-3 card fit-content">
-  <div class="card-body">
-    <div class="card-title">
-      <a href="{{ object.group.get_absolute_url }}">{{ object.group }}</a>
+  <div class="mb-3 card fit-content">
+    <div class="card-body">
+      <div class="card-title my-0">
+        <a href="{{ object.group.get_absolute_url }}">{{ object.group }}</a>
+      </div>
     </div>
-    <p class="card-text">{{ object.group.description|truncatewords_html:10 }}</p>
   </div>
-</div>
 
-<p>
-  <h2>Description</h2>
-  {{ object.description|markdownify }}
-</p>
-<p>
-  <h3>Tags</h3>
-  <ul>
-  {% for tag in object.tags.all %}
-  <li><a href="/events?tags={{ tag.id }}&">{{ tag.value }}</a></li>
-  {% empty %}
-    <li>None!</li>
-  {% endfor %}
-  </ul>
-</p>
+  <p>
+    <h2>Description</h2>
+    {{ object.description|markdownify }}
+  </p>
 
-{% if event.url %}
-<a class="btn btn-primary" href="{{ event.url }}" target="_blank">
-  RSVP <i class="fa-solid fa-arrow-up-right-from-square"></i> 
-</a>
-{% endif %}
+  <p>
+    <h3>Tags</h3>
+    <ul>
+    {% for tag in object.tags.all %}
+    <li><a href="/events?tags={{ tag.id }}&">{{ tag.value }}</a></li>
+    {% empty %}
+      <li>None!</li>
+    {% endfor %}
+    </ul>
+  </p>
 
-{% if can_edit %}
-<a href="{% url 'web:update_event' object.pk %}" class="btn btn-primary">Edit</a>
-{% endif %}
+  {% if event.url %}
+  <a class="btn btn-primary" href="{{ event.url }}" target="_blank">
+    RSVP <i class="fa-solid fa-arrow-up-right-from-square"></i> 
+  </a>
+  {% endif %}
+  {% if can_edit %}
+  <a href="{% url 'web:update_event' object.pk %}" class="btn btn-outline-primary">
+    Edit <i class="fa-solid fa-pen-to-square"></i>
+  </a>
+  {% endif %}
+</div>

src/web/templates/web/partials/detail_tech_group.htm

@@ -1,13 +1,22 @@
 {% load markdownify %}
-<h1>{{ object }}</h1>
-{% if object.homepage %}
-    <a href="{{ object.homepage }}">{{ object.homepage }}</a>
-{% endif %}
-{% if object.description %}
-    <hr>
-    <p>{{ object.description|markdownify }}</p>
-{% endif %}
+<div class="max-w-content">
+    <h1>
+        <i class="{{ object.icon }}"></i>
+        {{ object }}
+    </h1>
+    {% if object.homepage %}
+        <a href="{{ object.homepage }}">{{ object.homepage }}</a>
+    {% endif %}
+    <hr class>
+    {% if object.description %}
+    {{ object.description|markdownify }}
+    {% else %}
+    <i>No description</i>
+    {% endif %}
 
-{% if can_edit %}
-<a href="{% url 'web:edit_tech_group' object.pk %}" class="btn btn-primary">Edit</a>
-{% endif %}
+    {% if can_edit %}
+    <a href="{% url 'web:edit_tech_group' object.pk %}" class="btn btn-outline-primary">
+        Edit <i class="fa-solid fa-pen-to-square"></i>
+      </a>
+    {% endif %}
+</div>

src/web/templates/web/partials/event_list.htm

@@ -0,0 +1,42 @@
+{% extends 'web/partials/generic_list.htm' %}
+{% load web_extras markdownify %}
+
+{% block content %}
+<div class="grid">
+  {% for object in queryset %}
+  <div class="card mb-0">
+    <div class="card-body card-header">
+      <h5 class="card-title">
+        <a href="{{ object.get_absolute_url }}" class="link">
+          {{ object }}
+        </a>
+      </h5>
+      <span data-testid="date_time">
+        {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object duration=object.duration only %}
+      </span>
+    </div>
+    <div class="card-body">
+      {% if object.tags.all %}
+      <div class="mb-1">
+        {% for tag in object.tags.all %}
+        <a href="{% url 'web:list_events' %}?tags={{ tag.pk }}" class="badge rounded-pill text-bg-primary">{{ tag }}</a>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+      {{ object.description|markdownify|truncatewords_html:50 }}
+    </div>
+    <div class="card-body d-flex flex-wrap align-items-end justify-content-between" style="gap: 8px;">
+      <a href="{{ object.group.get_absolute_url }}" class="card-link">
+        {{ object.group }}
+      </a>
+      <div class="flex-grow-1 text-end">
+        <a href="{{ object.url }}" target="_blank" class="card-link">
+          RSVP <i class="fa-solid fa-arrow-up-right-from-square"></i> 
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endblock content %}

src/web/templates/web/partials/generic_list.htm

@@ -0,0 +1,79 @@
+{% load handyhelper_tags web_extras markdownify %}
+{# much of this code is from https://github.com/davidslusser/django-handyhelpers/blob/main/handyhelpers/templates/handyhelpers/generic/bs5/generic_list_content.htm #}
+
+<div class="d-flex flex-wrap">
+  <div class="flex-grow-1">
+    <h1>{{ title }}</h1>
+  </div>
+  <div class="d-flex align-items-center">
+    {# include extra_controls #}
+    {% if extra_controls.items %}
+    {% for name, control in extra_controls.items %}
+        <a href="{{ control.url }}" title="{{ control.title }}" class="mx-1">{{ control.icon|safe }}</a>
+    {% endfor %}
+    {% endif %}
+
+    {# To include a create form, exposed via modal, include create_form (dict) in the context of your view. The create_from must include modal_name and link_title fields #}
+    {% if create_form %}
+    {% if allow_create_groups and request.user|in_any_group:allow_create_groups %}
+    <a href="#" data-bs-toggle="modal" data-bs-target="#modal_{{ create_form.modal_name }}" title="{{ create_form.tool_tip|default_if_none:'create' }}" class="mx-1">
+        <i class="fas fa-plus-circle"></i>
+        {% if create_form.link_title %} {{ create_form.link_title }} {% endif %}
+    </a>
+    {% endif %}
+    {% endif %}
+
+    {# To include a filter form, exposed via modal, include filter_form (dict) in the context of your view. The filter_from must include modal_name and link_title fields #}
+    {% if filter_form %}
+    <a href="#" data-bs-toggle="modal" data-bs-target="#modal_{{ filter_form.modal_name }}" title="{{ filter_form.tool_tip|default_if_none:'filter' }}" class="mx-1">
+        <i class="fas fa-filter"></i>
+        {% if filter_form.link_title %} {{ filter_form.link_title }} {% endif %}
+    </a>
+        {% if filter_form.undo and request.META.QUERY_STRING %}
+        <a href="{% url 'handyhelpers:show_all_list_view' %}" title="clear filters" class="ms-1">
+            <i class="fas fa-undo-alt"></i>
+        </a>
+        {% endif %}
+    {% endif %}
+  </div>
+</div>
+
+{% block content %}{% endblock content %}
+
+{% if is_paginated_view %}
+{% include 'handyhelpers/generic/bs5/partials/pagination_controls.htm' %}
+{% endif %}
+
+{# include classic modals if create or filter form is included #}
+{% if create_form or filter_form %}
+    {% include 'handyhelpers/component/bs5/modals.htm' %}
+{% endif %}
+
+{# include generic modal form for the create object form if passed from the view #}
+{% with create_form as form_data %}
+    {% include 'handyhelpers/generic/bs5/generic_modal_form.htm' %}
+{% endwith %}
+
+{# include generic modal form for the filter object form if passed from the view #}
+{% with filter_form as form_data %}
+    {% include 'handyhelpers/generic/bs5/generic_modal_form.htm' %}
+{% endwith %}
+
+{# include custom modal html/js template if passed in from the view #}
+{% if modals %}
+    {% include modals %}
+{% endif %}
+
+{# block for additional static content #}
+{% block additional_static %}
+{% if add_static %}
+{{ add_static|safe }}
+{% endif %}
+{% endblock additional_static %}
+
+{# block for additional template content #}
+{% block additional_template %}
+{% if add_template %}
+{% include add_template %}
+{% endif %}
+{% endblock additional_template %}

src/web/templates/web/partials/modal/detail_event.htm

@@ -1,3 +1,4 @@
+{% load web_extras markdownify %}
 <div class="container-fluid my-3">
     {% if object.group %}
     <div class="row my-3">
@@ -8,19 +9,15 @@
     {% if object.description %}
     <div class="row my-3">
         <div class="col-4 fw-bold text-primary">Description:</div>
-        <div class="col-8 text-secondary">{{ object.description }}</div>
+        <div class="col-8 text-secondary">{{ object.description|markdownify }}</div>
     </div>
     {% endif %}
     {% if object.date_time %}
     <div class="row my-3">
-        <div class="col-4 fw-bold text-primary">Date/Time:</div>
-        <div class="col-8 text-secondary">{{ object.date_time }}</div>
-    </div>
-    {% endif %}
-    {% if object.duration %}
-    <div class="row my-3">
-        <div class="col-4 fw-bold text-primary">Duration:</div>
-        <div class="col-8 text-secondary">{{ object.duration }} hours</div>
+        <div class="col-4 fw-bold text-primary">When:</div>
+        <div class="col-8 text-secondary">
+            {% include 'spokanetech/partials/human_readable_datetime.htm' with object=object duration=object.duration only %}
+        </div>
     </div>
     {% endif %}
     {% if object.location %}

src/web/templates/web/partials/techgroup_list.htm

@@ -0,0 +1,26 @@
+{% load web_extras markdownify %}
+<h1>Tech Groups</h1>
+
+<div class="grid">
+  {% for object in queryset %}
+  <div class="card mb-0">
+    <div class="card-body card-header">
+      <h5 class="card-title">
+        <a href="{{ object.get_absolute_url }}" class="link">
+          {{ object }}
+        </a>
+      </h5>
+    </div>
+    <div class="card-body">
+      {{ object.description|markdownify|truncatewords_html:50 }}
+    </div>
+    <div class="card-body d-flex flex-wrap align-items-end justify-content-between" style="gap: 8px;">
+      <div class="flex-grow-1 text-end">
+        <a href="{{ object.homepage }}" target="_blank" class="card-link">
+          Homepage <i class="fa-solid fa-arrow-up-right-from-square"></i> 
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>

src/web/templates/web/techgroup_list.html

@@ -0,0 +1,5 @@
+{% extends 'spokanetech/base.html' %}
+
+{% block content %}
+{% include "web/partials/techgroup_list.htm" %}
+{% endblock content %}