Merge pull request #1078 from stveit/htmx-destinations-centre-content

Center content of destinations page
Uninett · Jan 14, 2025 · 73bac64 · 73bac64
2 parents 035e3fd + dc94ea6
commit 73bac64
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/changelog.d/1079.added.md b/changelog.d/1079.added.md
@@ -0,0 +1 @@
+Centre HTMX destination page content.
diff --git a/src/argus/htmx/static/styles.css b/src/argus/htmx/static/styles.css
@@ -4377,6 +4377,10 @@ details.collapse summary::-webkit-details-marker {
   min-width: fit-content;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -4445,6 +4449,10 @@ details.collapse summary::-webkit-details-marker {
   justify-content: flex-start;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }

diff --git a/src/argus/htmx/templates/htmx/destination/_content.html b/src/argus/htmx/templates/htmx/destination/_content.html
@@ -1,4 +1,4 @@
-<div id="destination-content">
+<div id="destination-content" class="flex flex-col items-center">
   {% include "htmx/destination/_create_form.html" %}
   {% for error in errors %}<p class="text-error">{{ error }}</p>{% endfor %}
   {% include "htmx/destination/_form_list.html" %}

diff --git a/src/argus/htmx/templates/htmx/destination/_create_form.html b/src/argus/htmx/templates/htmx/destination/_create_form.html
@@ -1,8 +1,9 @@
 <form hx-post="{% url 'htmx:htmx-create' %}"
       hx-trigger="submit"
-      hx-target="#destination-content">
+      hx-target="#destination-content"
+      class="max-w-4xl w-full">
   {% csrf_token %}
-  <fieldset class="p-2 border rounded-box border-primary items-center gap-4 flex items-end">
+  <fieldset class="p-2 border rounded-box border-primary items-center gap-4 flex items-end justify-center">
     <legend class="menu-title">Create destination</legend>
     {% for field in create_form %}
       <label class="form-control max-w-xs mb-auto">

diff --git a/src/argus/htmx/templates/htmx/destination/_form_list.html b/src/argus/htmx/templates/htmx/destination/_form_list.html
@@ -1,10 +1,10 @@
-<div id="form-list">
+<div id="form-list" class="max-w-4xl w-full">
   {% for media, forms in grouped_forms.items %}
     <details class="collapse bg-base-200 collapse-arrow" open="">
       <summary class="collapse-title text-xl font-medium">{{ media.name }} ({{ forms|length }})</summary>
       <div class="collapse-content">
         {% for form in forms %}
-          <div class="flex w-full h-fit items-center">
+          <div class="flex w-full h-fit items-center justify-center">
             {% include "htmx/destination/_edit_form.html" %}
             {% include "htmx/destination/_delete_form.html" %}
           </div>