Make event and ack feeds more vertically compact

Uninett · Jan 22, 2025 · d705ebe · d705ebe
1 parent 605b38e
commit d705ebe
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/src/argus/htmx/static/styles.css b/src/argus/htmx/static/styles.css
@@ -4320,8 +4320,8 @@ details.collapse summary::-webkit-details-marker {
   flex-grow: 1;
 }
 
-.border-collapse {
-  border-collapse: collapse;
+.grow-0 {
+  flex-grow: 0;
 }
 
 .border-separate {
@@ -4406,20 +4406,6 @@ details.collapse summary::-webkit-details-marker {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.divide-y > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
-.divide-solid > :not([hidden]) ~ :not([hidden]) {
-  border-style: solid;
-}
-
-.divide-none > :not([hidden]) ~ :not([hidden]) {
-  border-style: none;
-}
-
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -4568,6 +4554,10 @@ details.collapse summary::-webkit-details-marker {
   padding-bottom: 0.25rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
 .pt-0\.5 {
   padding-top: 0.125rem;
 }

diff --git a/src/argus/htmx/templates/htmx/incident/incident_detail.html b/src/argus/htmx/templates/htmx/incident/incident_detail.html
@@ -83,36 +83,38 @@ <h3 class="font-bold">Ticket</h3>
           </section>
         </section>
         <section id="acknowledgements" class="card">
-          <h2 class="card-title">Acknowledgements</h2>
-          <div class="divide-y divide-solid">
+          <h2 class="card-title pl-8">Acknowledgements</h2>
+          <div class="card-body gap-4 grow-0">
             {% for ack in incident.acks %}
-              <div class="card-body flex-none">
+              <div class="px-2">
                 <p>{{ ack.event.description }}</p>
                 <p>
                   {{ ack.event.actor }}
                   {{ ack.event.timestamp|date:preferences.argus_htmx.datetime_format }}
                 </p>
                 {% if ack.expiration %}<p>Expires: {{ ack.expiration|date:preferences.argus_htmx.datetime_format }}</p>{% endif %}
               </div>
+              {% if not forloop.last %}<hr />{% endif %}
             {% endfor %}
-            <div class="card-actions divide-none">
+            <div class="card-actions grow-0">
               {% include "htmx/incident/_incident_acknowledge_modal.html" with action="ack" dialog_id="create-acknowledgment-dialog" button_title="Create acknowledgment" header="Submit acknowledgment" explanation="Write a message describing why this incident was acknowledged" cancel_text="Cancel" submit_text="Submit" %}
             </div>
           </div>
         </section>
         <section id="events" class="card">
-          <h2 class="card-title">Related events</h2>
-          <div class="divide-y divide-solid">
+          <h2 class="card-title pl-8">Related events</h2>
+          <div class="gap-4 card-body flex-none">
             {% for event in incident.events.all %}
               {% if not event.ack %}
-                <div class="card-body flex-none">
+                <div class="px-2">
                   <p>{{ event.get_type_display }}</p>
                   <p>{{ event.description }}</p>
                   <p>
                     {{ event.actor }}
                     {{ event.timestamp|date:preferences.argus_htmx.datetime_format }}
                   </p>
                 </div>
+                {% if not forloop.last %}<hr />{% endif %}
               {% endif %}
             {% endfor %}
           </div>