Make UI more compact (#59)

* Make table header sticky * Make table header and rows more compact * Match alignment of columns in both header and rows And increase header text contrast * Hide history and logs view options selector Its functionality is not yet implemented * Move event details content to a separate component For ease of implementing new changes and refactoring * Swap placement of event attributes and logs * Make event actions buttons more compact * Move event actions buttons * Make event logs and history more compact
Uninett · Jan 26, 2024 · 523517d · 523517d
1 parent cfbe2be
commit 523517d
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 98 deletions.
diff --git a/src/howitz/templates/components/accordion/event-actions-buttons.html b/src/howitz/templates/components/accordion/event-actions-buttons.html
@@ -1,22 +1,22 @@
 <div
         id="event-actions-buttons"
-        class="flex justify-end gap-x-4"
+        class="flex justify-end flex-nowrap gap-x-4"
 >
 
     {% include "/components/accordion/update-state-btn.html" %}
 
     <button
             disabled
             id="poll-event-{{ id }}"
-            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center"
+            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 text-center"
     >
         Poll
     </button>
 
     <button
             disabled
             id="clear-flapping-{{ id }}"
-            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center">
+            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 text-center">
         Clear Flapping
     </button>
 

diff --git a/src/howitz/templates/components/accordion/event-attributes.html b/src/howitz/templates/components/accordion/event-attributes.html
@@ -14,7 +14,7 @@ <h5 class="text-center text-lg font-bold leading-none text-gray-900 dark:text-wh
                             {{ attr_key }}
                         </p>
                     </div>
-                    <div class="whitespace-normal break-all inline-flex items-center text-sm font-medium text-gray-900 dark:text-white">
+                    <div class="whitespace-normal break-all inline-flex items-center text-xs font-medium text-gray-900 dark:text-white">
                         {{ event_attr.get(attr_key) }}
                     </div>
                 </div>

diff --git a/src/howitz/templates/components/accordion/event-details-content.html b/src/howitz/templates/components/accordion/event-details-content.html
@@ -0,0 +1,30 @@
+<td colspan="100">
+
+    <div
+            id="accordion-body-{{ id }}"
+            aria-labelledby="event-accordion-row-{{ id }}"
+            class="p-2 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+
+        <div
+                class="grid grid-cols-1 content-between"
+        >
+
+            <div
+                    class="flex flex-row-reverse grow-0 gap-4 justify-evenly"
+            >
+                <div class="flex flex-col basis-4/12">
+                    {% with event_attr=event_attr %}
+                        {% include "/components/accordion/event-attributes.html" %}
+                    {% endwith %}
+                </div>
+
+                <div class="flex flex-col basis-8/12">
+                    {% include "/components/accordion/event-actions-buttons.html" %}
+                    {% with id=id, event_msgs=event_msgs %}
+                        {% include "/components/accordion/event-messages-block.html" %}
+                    {% endwith %}
+                </div>
+            </div>
+        </div>
+    </div>
+</td>
diff --git a/src/howitz/templates/components/accordion/event-details.html b/src/howitz/templates/components/accordion/event-details.html
@@ -3,37 +3,5 @@
         class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
 
 >
-    <td colspan="100">
-
-        <div
-                id="accordion-body-{{ id }}"
-                aria-labelledby="event-accordion-row-{{ id }}"
-                class="p-2 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-
-            <div
-                    class="grid grid-cols-1 content-between"
-            >
-
-                {% with id=id %}
-                    {% include "/components/accordion/event-actions-buttons.html" %}
-                {% endwith %}
-
-                <div
-                        class="flex grow-0 gap-5 justify-evenly"
-                >
-                    <div class="flex flex-col basis-4/12">
-                        {% with event_attr=event_attr %}
-                            {% include "/components/accordion/event-attributes.html" %}
-                        {% endwith %}
-                    </div>
-
-                    <div class="flex flex-col basis-8/12">
-                        {% with id=id, event_msgs=event_msgs %}
-                            {% include "/components/accordion/event-messages-block.html" %}
-                        {% endwith %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </td>
+    {% include "/components/accordion/event-details-content.html" %}
 </tr>
diff --git a/src/howitz/templates/components/accordion/event-messages-block.html b/src/howitz/templates/components/accordion/event-messages-block.html
@@ -4,8 +4,6 @@
         class="basis-0 grow overflow-y-scroll overflow-x-auto p-5 bg-white border border-gray-200 rounded-2xl shadow sm:p-5 dark:bg-gray-800 dark:border-gray-700">
     <div class="flex justify-between mb-3">
         <h5 class="text-center text-lg font-bold leading-none text-gray-900 dark:text-white">Logs & History</h5>
-
-        {% include "/components/accordion/messages-view-options.html" %}
     </div>
 
     {% include "/components/accordion/event-messages.html" %}

diff --git a/src/howitz/templates/components/accordion/event-messages.html b/src/howitz/templates/components/accordion/event-messages.html
@@ -9,14 +9,19 @@
             {% for msg in event_msgs %}
 
 
-                <li class="mb-4 ml-4">
+                <li class="mb-3 ml-4">
 
                     <div class="absolute w-3 h-3  rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 {% if msg.user %} bg-orange-950 dark:bg-orange-400 {% else %} bg-blue-950 dark:bg-blue-400 {% endif %}"></div>
-                    <h3 class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+                    <h3 class="mb-1 text-xs font-normal leading-none text-gray-400">
                         {{ msg.user }}
                     </h3>
-                    <time class="text-lg font-semibold text-gray-900 dark:text-white">{{ msg.date }}</time>
-                    <p class="mb-2 text-base font-normal text-gray-500 dark:text-gray-400">{{ msg.log }}</p>
+                    <div
+                            class="flex gap-0 flex-wrap"
+                    >
+                        <time class="mr-2 text-sm font-semibold text-white shrink-0">{{ msg.date }}</time>
+                        <p class="mb-2 text-sm font-normal text-gray-400 break-words">{{ msg.log }}</p>
+                    </div>
+
                 </li>
 
 

diff --git a/src/howitz/templates/components/accordion/update-state-btn.html b/src/howitz/templates/components/accordion/update-state-btn.html
@@ -3,7 +3,7 @@
         hx-get="event/{{ id }}/update_status"
         hx-target="body"
         hx-swap="beforeend"
-        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
 >
     Update Status
 </button>
diff --git a/src/howitz/templates/components/poll/expanded-row.html b/src/howitz/templates/components/poll/expanded-row.html
@@ -8,7 +8,7 @@
             hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
     >
 
-        {% with padding='px-3 py-2' %}
+        {% with padding='px-2 py-1' %}
 
             {% with color=event.color if event.color %}
                 {% if is_selected %}

diff --git a/src/howitz/templates/components/poll/poll-row.html b/src/howitz/templates/components/poll/poll-row.html
@@ -6,7 +6,7 @@
         hx-target="#event-accordion-row-{{ id }}"
         hx-swap="outerHTML"
 >
-    {% with padding='px-3 py-2' %}
+    {% with padding='px-2 py-1' %}
 
         {% with color=event.color if event.color %}
             {% if is_selected %}

diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html
@@ -5,23 +5,23 @@
             hx-get="/show_update_status_modal"
             hx-target="body"
             hx-swap="beforeend"
-            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
     >
         Update Status
     </button>
 
     <button
             disabled
             id="bulk-poll-events"
-            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center"
+            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 text-center"
     >
         Poll
     </button>
 
     <button
             disabled
             id="bulk-clear-flapping"
-            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3.5 py-2.5 mr-2 mb-2 text-center">
+            class="text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 text-center">
         Clear Flapping
     </button>
 

diff --git a/src/howitz/templates/components/popups/modals/update-event-status-modal.html b/src/howitz/templates/components/popups/modals/update-event-status-modal.html
@@ -76,7 +76,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                         hx-trigger="click"
                                         hx-indicator="#bulk-update-indicator"
                                         hx-target-400="#generic-400-error"
-                                        class="mr-1 inline-flex items-center py-2.5 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                                     Update events
 
                                 </button>

diff --git a/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html b/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html
@@ -76,7 +76,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                         hx-swap="outerHTML show:#ol-event-{{ id }}:bottom"
                                         hx-indicator="#bulk-update-indicator"
                                         hx-target-400="#generic-400-error"
-                                        class="mr-1 inline-flex items-center py-2.5 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800 bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                                     Update event
                                 </button>
 

diff --git a/src/howitz/templates/components/row/event-row.html b/src/howitz/templates/components/row/event-row.html
@@ -6,7 +6,7 @@
         hx-target="#event-accordion-row-{{ id }}"
         hx-swap="outerHTML"
 >
-    {% with padding='px-3 py-2' %}
+    {% with padding='px-2 py-1' %}
 
         {% with color=event.color if event.color %}
             {% if is_selected %}

diff --git a/src/howitz/templates/components/row/expanded-row.html b/src/howitz/templates/components/row/expanded-row.html
@@ -8,7 +8,7 @@
             hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
     >
 
-        {% with padding='px-3 py-2' %}
+        {% with padding='px-2 py-1' %}
 
             {% with color=event.color if event.color %}
                 {% if is_selected %}

diff --git a/src/howitz/templates/components/table/events-table.html b/src/howitz/templates/components/table/events-table.html
@@ -5,18 +5,18 @@
         hx-target="#eventlist-list"
         hx-trigger="load"
 >
-    <thead class="text-xs text-center text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-300">
+    <thead class="sticky top-0 z-50 text-xs text-center uppercase bg-gray-700 text-gray-100">
     <tr>
-        <th scope="col" class="border border-slate-600 px-4 py-2"></th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">#</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">OP-STATE</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">ADM-STATE</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">AGE</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">DOWNTIME</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">ROUTER</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">PORT</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2">DESCRIPTION</th>
-        <th scope="col" class="border border-slate-600 px-4 py-2"></th>
+        <th scope="col" class="border border-slate-600 px-2 py-2"></th>
+        <th scope="col" class="border border-slate-600 px-2 py-2">#</th>
+        <th scope="col" class="border border-slate-600 px-2 py-2">OP-STATE</th>
+        <th scope="col" class="border border-slate-600 px-2 py-2">ADM-STATE</th>
+        <th scope="col" class="text-left border border-slate-600 px-2 py-2">AGE</th>
+        <th scope="col" class="text-left border border-slate-600 px-2 py-2">DOWNTIME</th>
+        <th scope="col" class="text-left border border-slate-600 px-2 py-2">ROUTER</th>
+        <th scope="col" class="text-left border border-slate-600 px-2 py-2">PORT</th>
+        <th scope="col" class="text-left border border-slate-600 px-2 py-2">DESCRIPTION</th>
+        <th scope="col" class="border border-slate-600 px-2 py-2"></th>
     </tr>
     </thead>
     <tbody

diff --git a/src/howitz/templates/responses/update-event-response.html b/src/howitz/templates/responses/update-event-response.html
@@ -7,7 +7,7 @@
         hx-target-error="body"
 >
 
-    {% with padding='px-3 py-2' %}
+    {% with padding='px-2 py-1' %}
 
         {% with color=event.color if event.color %}
             {% if is_selected %}
@@ -37,39 +37,7 @@
         class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
 
 >
-    <td colspan="100">
-
-        <div
-                id="accordion-body-{{ id }}"
-                aria-labelledby="event-accordion-row-{{ id }}"
-                class="p-2 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-
-            <div
-                    class="grid grid-cols-1 content-between"
-            >
-
-                {% with id=id %}
-                    {% include "/components/accordion/event-actions-buttons.html" %}
-                {% endwith %}
-
-                <div
-                        class="flex grow-0 gap-5 justify-evenly"
-                >
-                    <div class="flex flex-col basis-4/12">
-                        {% with event_attr=event_attr %}
-                            {% include "/components/accordion/event-attributes.html" %}
-                        {% endwith %}
-                    </div>
-
-                    <div class="flex flex-col basis-8/12">
-                        {% with id=id, event_msgs=event_msgs %}
-                            {% include "/components/accordion/event-messages-block.html" %}
-                        {% endwith %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </td>
+    {% include "/components/accordion/event-details-content.html" %}
 </tr>
 
 <div id="update-event-{{ id }}-status-modal"