Improve UI/UX and add version to base.html

leethobbit · Nov 25, 2024 · 44e614f · 44e614f
1 parent 41f300a
commit 44e614f
Show file tree

Hide file tree

Showing 17 changed files with 182 additions and 160 deletions.
diff --git a/dragonroost/animals/views.py b/dragonroost/animals/views.py
@@ -45,7 +45,7 @@ class AnimalTableView(
     table_class = AnimalTable
     queryset = Animal.objects.all().order_by("name")
     filterset_class = AnimalFilter
-    paginate_by = 15
+    paginate_by = 10
     title = "Manage Animals"
 
     def get_template_names(self):
@@ -65,7 +65,7 @@ class AnimalTableSearchView(LoginRequiredMixin, SingleTableMixin, FilterView):
     table_class = AnimalTable
     queryset = Animal.objects.all().order_by("name")
     filterset_class = AnimalFilter
-    paginate_by = 15
+    paginate_by = 10
     template_name = "animals/partials/animal_table.html"
 
 
@@ -216,7 +216,7 @@ class SpeciesTableView(LoginRequiredMixin, SingleTableMixin, FilterView):
     table_class = SpeciesTable
     queryset = Species.objects.all().order_by("name")
     filterset_class = SpeciesFilter
-    paginate_by = 15
+    paginate_by = 10
     template_name = "animals/partials/animal_table.html"
 
 

diff --git a/dragonroost/business/views.py b/dragonroost/business/views.py
@@ -49,7 +49,7 @@ def get_template_names(self):
 class LocationTableView(LoginRequiredMixin, SingleTableMixin, ListView):
     table_class = LocationListTable
     queryset = Location.objects.all().order_by("name")
-    paginate_by = 15
+    paginate_by = 10
     template_name = "business/partials/table_partial.html"
 
 
@@ -140,7 +140,7 @@ def get_template_names(self):
 class MeetingTableView(LoginRequiredMixin, SingleTableMixin, ListView):
     table_class = MeetingListTable
     queryset = Meeting.objects.all().order_by("-date")
-    paginate_by = 15
+    paginate_by = 10
     template_name = "business/partials/table_partial.html"
 
 

diff --git a/dragonroost/medical/views.py b/dragonroost/medical/views.py
@@ -27,7 +27,7 @@ class MedicalUpdateTableView(
     table_class = MedicalUpdateTable
     queryset = MedicalUpdate.objects.all().order_by("-date")
     filterset_class = MedicalUpdateFilter
-    paginate_by = 15
+    paginate_by = 10
     title = "Medical Updates List"
 
     def get_template_names(self):
@@ -43,7 +43,7 @@ class MedicalUpdateTableSearchView(LoginRequiredMixin, SingleTableMixin, FilterV
     table_class = MedicalUpdateTable
     queryset = MedicalUpdate.objects.all().order_by("-date")
     filterset_class = MedicalUpdateFilter
-    paginate_by = 15
+    paginate_by = 10
     template_name = "medical/partials/medical_update_table.html"
 
 

diff --git a/dragonroost/people/views.py b/dragonroost/people/views.py
@@ -119,7 +119,7 @@ class PersonHTMxView(SingleTableMixin, PageTitleViewMixin, FilterView):
     table_class = PersonHTMxTable
     queryset = Person.objects.all()
     filterset_class = PersonFilter
-    paginate_by = 15
+    paginate_by = 10
     title = "People Search"
 
     def get_template_names(self) -> list[str]:
@@ -135,5 +135,5 @@ class PersonTableSearchView(LoginRequiredMixin, SingleTableMixin, FilterView):
     table_class = PersonHTMxTable
     queryset = Person.objects.all()
     filterset_class = PersonFilter
-    paginate_by = 15
+    paginate_by = 10
     template_name = "people/partials/person_table.html"
diff --git a/dragonroost/templates/animals/animal_table_htmx.html b/dragonroost/templates/animals/animal_table_htmx.html
@@ -18,10 +18,6 @@
            hx-target="#dialog"
            hx-boost="true"
            hx-push-url="false">Add New Species</a>
-        {# Progress indicator #}
-        <div class="progress">
-          <div class="indeterminate"></div>
-        </div>
       </div>
     </div>
     <div class="row flex-fill">

diff --git a/dragonroost/templates/animals/animal_table_htmx_reload.html b/dragonroost/templates/animals/animal_table_htmx_reload.html
@@ -20,10 +20,6 @@
            hx-target="#dialog"
            hx-boost="true"
            hx-push-url="false">Add New Species</a>
-        {# Progress indicator #}
-        <div class="progress">
-          <div class="indeterminate"></div>
-        </div>
       </div>
     </div>
     <div class="row flex-fill">

diff --git a/dragonroost/templates/animals/species_table_htmx.html b/dragonroost/templates/animals/species_table_htmx.html
@@ -1,13 +1,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'animals:species-create' %}"
-     class="btn btn-primary btn-lg mb-4 btn-info text-start"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Species</a>
-  <div class="text-center"
-       hx-trigger="species_table_update from:body"
-       hx-get="{% url 'animals:species-table-partial' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'animals:species-create' %}"
+       class="btn btn-primary btn-lg mb-4 btn-info text-start"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Species</a>
+    <div class="text-center"
+         hx-trigger="species_table_update from:body"
+         hx-get="{% url 'animals:species-table-partial' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/animals/species_table_htmx_reload.html b/dragonroost/templates/animals/species_table_htmx_reload.html
@@ -3,13 +3,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'animals:species-create' %}"
-     class="btn btn-primary btn-lg mb-4 btn-info text-start"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Species</a>
-  <div class="text-center"
-       hx-trigger="species_table_update from:body"
-       hx-get="{% url 'animals:species-table-partial' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'animals:species-create' %}"
+       class="btn btn-primary btn-lg mb-4 btn-info text-start"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Species</a>
+    <div class="text-center"
+         hx-trigger="species_table_update from:body"
+         hx-get="{% url 'animals:species-table-partial' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/base.html b/dragonroost/templates/base.html
@@ -45,8 +45,8 @@
   <body class="{% block bodyclass %}{% endblock bodyclass %} h-100"
         hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
     {% block body %}
-      <div class="mb-2">
-        <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
+      <div class="">
+        <nav class="navbar navbar-expand-lg bg-primary fixed-top" data-bs-theme="dark">
           <div class="container-fluid">
             <button class="navbar-toggler navbar-toggler-right"
                     type="button"
@@ -95,7 +95,7 @@
           </div>
         </nav>
       </div>
-      <div class="d-flex flex-nowrap" >
+      <div class="d-flex flex-nowrap pt-5 h-100" >
         <div class="d-flex flex-column flex-shrink-0 p-3 rounded border bg-info-subtle">
           <h2 class="mb-3 mb-md-0 text-center display-6">
             <span class="fs-2 text-bold">Shelter Actions</span>
@@ -158,7 +158,17 @@ <h5>Medical</h5>
                  href="{% url 'medical:medical-update-table' %}">Manage Medical Updates</a>
             </li>
           </ul>
-          <hr />
+          <hr>
+          <ul class="list-inline text-center">
+            <li class="list-inline-item">
+              <a href="https://github.com/leethobbit/dragonroost"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" label="Source Code">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+              </svg></a>
+            </li>
+            <li class="list-inline-item">
+              <p>dragonroost-0.2.0</p>
+            </li>
+          </ul>
           <button class="btn btn-primary" hx-get="{% url 'business:feedback-create' %}" hx-target="#dialog">
             Send Feedback
           </button>
@@ -177,7 +187,7 @@ <h5>Medical</h5>
             {% endfor %}
           {% endif %}
           {% block main %}
-            <div id="testing" class="m-5">
+            <div id="testing" class="pt-5 overflow-auto mh-100">
               {% block content %}
                 Click a link on the left sidebar to get started.
                 <br>

diff --git a/dragonroost/templates/business/location_table_htmx.html b/dragonroost/templates/business/location_table_htmx.html
@@ -1,13 +1,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'business:location-create' %}"
-     class="btn btn-lg mb-4 btn-info me-4"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Location</a>
-  <div class="text-center"
-       hx-trigger="location_table_update from:body, location_detail_update from:body"
-       hx-get="{% url 'business:get-location-list' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'business:location-create' %}"
+       class="btn btn-lg mb-4 btn-info me-4"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Location</a>
+    <div class="text-center"
+         hx-trigger="location_table_update from:body, location_detail_update from:body"
+         hx-get="{% url 'business:get-location-list' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/business/location_table_htmx_reload.html b/dragonroost/templates/business/location_table_htmx_reload.html
@@ -3,13 +3,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'business:location-create' %}"
-     class="btn btn-lg mb-4 btn-info me-4"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Location</a>
-  <div class="text-center"
-       hx-trigger="location_table_update from:body, location_detail_update from:body"
-       hx-get="{% url 'business:get-location-list' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'business:location-create' %}"
+       class="btn btn-lg mb-4 btn-info me-4"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Location</a>
+    <div class="text-center"
+         hx-trigger="location_table_update from:body, location_detail_update from:body"
+         hx-get="{% url 'business:get-location-list' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/business/meeting_table_htmx.html b/dragonroost/templates/business/meeting_table_htmx.html
@@ -1,13 +1,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'business:meeting-create' %}"
-     class="btn btn-lg mb-4 btn-info"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Meeting</a>
-  <div class="text-center"
-       hx-trigger="meeting_table_update from:body, meeting_detail_update from:body"
-       hx-get="{% url 'business:get-meeting-list' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'business:meeting-create' %}"
+       class="btn btn-lg mb-4 btn-info"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Meeting</a>
+    <div class="text-center"
+         hx-trigger="meeting_table_update from:body, meeting_detail_update from:body"
+         hx-get="{% url 'business:get-meeting-list' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/business/meeting_table_htmx_reload.html b/dragonroost/templates/business/meeting_table_htmx_reload.html
@@ -3,13 +3,15 @@
 {% load django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'business:meeting-create' %}"
-     class="btn btn-lg mb-4 btn-info"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Meeting</a>
-  <div class="text-center"
-       hx-trigger="meeting_table_update from:body, meeting_detail_update from:body"
-       hx-get="{% url 'business:get-meeting-list' %}"
-       hx-target="this">{% render_table table %}</div>
+  <div class="container-fluid">
+    <a href="{% url 'business:meeting-create' %}"
+       class="btn btn-lg mb-4 btn-info"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Meeting</a>
+    <div class="text-center"
+         hx-trigger="meeting_table_update from:body, meeting_detail_update from:body"
+         hx-get="{% url 'business:get-meeting-list' %}"
+         hx-target="this">{% render_table table %}</div>
+  </div>
 {% endblock content %}
diff --git a/dragonroost/templates/medical/medical_update_table_htmx.html b/dragonroost/templates/medical/medical_update_table_htmx.html
@@ -3,26 +3,28 @@
 {% load render_table from django_tables2 %}
 
 {% block content %}
-  <a href="{% url 'medical:medical-update-create' %}"
-     class="btn btn-lg mb-4 btn-info me-4"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Medical Update</a>
-  {# Search form #}
-  <form hx-get="{% url 'medical:get-medical-update-results' %}"
-        hx-target="div.table-container"
-        hx-swap="outerHTML"
-        hx-indicator=".progress"
-        class="form-inline">
-    {% crispy filter.form %}
-  </form>
-  {# Progress indicator #}
-  <div class="progress">
-    <div class="indeterminate"></div>
+  <div class="container-fluid">
+    <a href="{% url 'medical:medical-update-create' %}"
+       class="btn btn-lg mb-4 btn-info me-4"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Medical Update</a>
+    {# Search form #}
+    <form hx-get="{% url 'medical:get-medical-update-results' %}"
+          hx-target="div.table-container"
+          hx-swap="outerHTML"
+          hx-indicator=".progress"
+          class="form-inline">
+      {% crispy filter.form %}
+    </form>
+    {# Progress indicator #}
+    <div class="progress">
+      <div class="indeterminate"></div>
+    </div>
+    {# The actual table #}
+    <div class="text-center"
+         hx-trigger="medical_update_table_update from:body, medical_update_detail_update from:body"
+         hx-get="{% url 'medical:get-medical-update-results' %}"
+         hx-target="this">{% render_table table %}</div>
   </div>
-  {# The actual table #}
-  <div class="text-center"
-       hx-trigger="medical_update_table_update from:body, medical_update_detail_update from:body"
-       hx-get="{% url 'medical:get-medical-update-results' %}"
-       hx-target="this">{% render_table table %}</div>
 {% endblock content %}
diff --git a/dragonroost/templates/medical/medical_update_table_htmx_reload.html b/dragonroost/templates/medical/medical_update_table_htmx_reload.html
@@ -5,26 +5,28 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-  <a href="{% url 'medical:medical-update-create' %}"
-     class="btn btn-lg mb-4 btn-info me-4"
-     hx-target="#dialog"
-     hx-boost="true"
-     hx-push-url="false">Add New Medical Update</a>
-  {# Search form #}
-  <form hx-get="{% url 'medical:get-medical-update-results' %}"
-        hx-target="div.table-container"
-        hx-swap="outerHTML"
-        hx-indicator=".progress"
-        class="form-inline">
-    {% crispy filter.form %}
-  </form>
-  {# Progress indicator #}
-  <div class="progress">
-    <div class="indeterminate"></div>
+  <div class="container-fluid">
+    <a href="{% url 'medical:medical-update-create' %}"
+       class="btn btn-lg mb-4 btn-info me-4"
+       hx-target="#dialog"
+       hx-boost="true"
+       hx-push-url="false">Add New Medical Update</a>
+    {# Search form #}
+    <form hx-get="{% url 'medical:get-medical-update-results' %}"
+          hx-target="div.table-container"
+          hx-swap="outerHTML"
+          hx-indicator=".progress"
+          class="form-inline">
+      {% crispy filter.form %}
+    </form>
+    {# Progress indicator #}
+    <div class="progress">
+      <div class="indeterminate"></div>
+    </div>
+    {# The actual table #}
+    <div class="text-center"
+         hx-trigger="medical_update_table_update from:body, medical_update_detail_update from:body"
+         hx-get="{% url 'medical:get-medical-update-results' %}"
+         hx-target="this">{% render_table table %}</div>
   </div>
-  {# The actual table #}
-  <div class="text-center"
-       hx-trigger="medical_update_table_update from:body, medical_update_detail_update from:body"
-       hx-get="{% url 'medical:get-medical-update-results' %}"
-       hx-target="this">{% render_table table %}</div>
 {% endblock content %}