From f7abca8d1022a703e35a45710be00de49b92f63c Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 7 May 2025 21:56:27 +0300
Subject: [PATCH] minor design update

---
 ui/assets/css/style.css         | 4 ++++
 ui/components/ConditionForm.vue | 6 +++---
 ui/components/History.vue       | 4 ++--
 ui/components/Queue.vue         | 4 ++--
 ui/pages/conditions.vue         | 6 +++---
 ui/pages/notifications.vue      | 6 +++---
 ui/pages/presets.vue            | 6 +++---
 ui/pages/tasks.vue              | 6 +++---
 8 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index db506ea5..48234947 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -313,3 +313,7 @@ hr {
 .is-justify-self-end {
   justify-self: end;
 }
+
+.is-full-height {
+  height: 100%;
+}
diff --git a/ui/components/ConditionForm.vue b/ui/components/ConditionForm.vue
index efe4be7e..144940c6 100644
--- a/ui/components/ConditionForm.vue
+++ b/ui/components/ConditionForm.vue
@@ -2,7 +2,7 @@
   <main class="columns mt-2 is-multiline">
     <div class="column is-12">
       <form autocomplete="off" id="addForm" @submit.prevent="checkInfo()">
-        <div class="card">
+        <div class="card is-flex is-full-height is-flex-direction-column">
           <div class="card-header">
             <div class="card-header-title is-text-overflow is-block">
               <span class="icon-text">
@@ -21,7 +21,7 @@
             </div>
           </div>
 
-          <div class="card-content">
+          <div class="card-content is-flex-grow-1">
 
             <div class="columns is-multiline is-mobile">
 
@@ -106,7 +106,7 @@
             </div>
           </div>
 
-          <div class="card-footer">
+          <div class="card-footer mt-auto">
             <div class="card-footer-item">
               <button class="button is-fullwidth is-primary" :disabled="addInProgress" type="submit"
                 :class="{ 'is-loading': addInProgress }" form="addForm">
diff --git a/ui/components/History.vue b/ui/components/History.vue
index ee74d7a5..1821a43c 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -190,7 +190,7 @@
     <div class="columns is-multiline" v-else>
       <LateLoader :unrender="true" :min-height="hideThumbnail ? 210 : 410" class="column is-6"
         v-for="item in sortCompleted" :key="item._id">
-        <div class="card"
+        <div class="card is-flex is-full-height is-flex-direction-column"
           :class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
           <header class="card-header has-tooltip">
 
@@ -239,7 +239,7 @@
               </template>
             </figure>
           </div>
-          <div class="card-content">
+          <div class="card-content is-flex-grow-1">
             <div class="columns is-mobile is-multiline">
               <div class="column is-12" v-if="item.error">
                 <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index 3f9d21b9..f5261c05 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -118,7 +118,7 @@
     <div class="columns is-multiline" v-else>
       <LateLoader :unrender="true" :min-height="hideThumbnail ? 265 : 475" class="column is-6"
         v-for="item in stateStore.queue" :key="item._id">
-        <div class="card">
+        <div class="card is-flex is-full-height is-flex-direction-column">
           <header class="card-header">
             <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
               <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
@@ -148,7 +148,7 @@
               </template>
             </figure>
           </div>
-          <div class="card-content">
+          <div class="card-content is-flex-grow-1">
             <div class="columns is-multiline is-mobile">
               <div class="column is-12">
                 <div class="progress-bar is-unselectable">
diff --git a/ui/pages/conditions.vue b/ui/pages/conditions.vue
index ee55ffe6..3c0120dd 100644
--- a/ui/pages/conditions.vue
+++ b/ui/pages/conditions.vue
@@ -37,7 +37,7 @@
       <div class="column is-12" v-if="!toggleForm">
         <div class="columns is-multiline" v-if="items.length > 0">
           <div class="column is-6" v-for="cond in items" :key="cond.id">
-            <div class="card">
+            <div class="card is-flex is-full-height is-flex-direction-column">
               <header class="card-header">
                 <div class="card-header-title is-text-overflow is-block" v-text="cond.name" />
                 <div class="card-header-icon">
@@ -52,7 +52,7 @@
                   </button>
                 </div>
               </header>
-              <div class="card-content">
+              <div class="card-content is-flex-grow-1">
                 <div class="content">
                   <p class="is-text-overflow">
                     <span class="icon"><i class="fa-solid fa-filter" /></span>
@@ -69,7 +69,7 @@
                   <pre><code>{{ filterItem(cond) }}</code></pre>
                 </div>
               </div>
-              <div class="card-footer">
+              <div class="card-footer mt-auto">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(cond)">
                     <span class="icon"><i class="fa-solid fa-cog" /></span>
diff --git a/ui/pages/notifications.vue b/ui/pages/notifications.vue
index e31905ac..9ca2f80d 100644
--- a/ui/pages/notifications.vue
+++ b/ui/pages/notifications.vue
@@ -59,7 +59,7 @@ div.is-centered {
       <div class="column is-12" v-if="!toggleForm">
         <div class="columns is-multiline" v-if="notifications && notifications.length > 0">
           <div class="column is-6" v-for="item in notifications" :key="item.id">
-            <div class="card">
+            <div class="card is-flex is-full-height is-flex-direction-column">
               <header class="card-header">
                 <div class="card-header-title is-text-overflow is-block">
                   {{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
@@ -75,7 +75,7 @@ div.is-centered {
                   </button>
                 </div>
               </header>
-              <div class="card-content">
+              <div class="card-content is-flex-grow-1">
                 <div class="content">
                   <p>
                     <span class="icon"><i class="fa-solid fa-list-ul" /></span>
@@ -92,7 +92,7 @@ div.is-centered {
                   <pre><code>{{ filterItem(item) }}</code></pre>
                 </div>
               </div>
-              <div class="card-footer">
+              <div class="card-footer mt-auto">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(item);">
                     <span class="icon"><i class="fa-solid fa-trash-can" /></span>
diff --git a/ui/pages/presets.vue b/ui/pages/presets.vue
index 6c974d78..d3d503a7 100644
--- a/ui/pages/presets.vue
+++ b/ui/pages/presets.vue
@@ -54,7 +54,7 @@ div.is-centered {
       <div class="column is-12" v-if="!toggleForm">
         <div class="columns is-multiline" v-if="presetsNoDefault && presetsNoDefault.length > 0">
           <div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
-            <div class="card">
+            <div class="card is-flex is-full-height is-flex-direction-column">
               <header class="card-header">
                 <div class="card-header-title is-text-overflow is-block" v-text="item.name" />
                 <div class="card-header-icon">
@@ -69,7 +69,7 @@ div.is-centered {
                   </button>
                 </div>
               </header>
-              <div class="card-content">
+              <div class="card-content is-flex-grow-1">
                 <div class="content">
                   <p class="is-text-overflow"
                     v-if="item?.format && false === ['default', 'not_set'].includes(item.format)">
@@ -99,7 +99,7 @@ div.is-centered {
                   <pre><code>{{ filterItem(item) }}</code></pre>
                 </div>
               </div>
-              <div class="card-footer">
+              <div class="card-footer mt-auto">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(item)">
                     <span class="icon"><i class="fa-solid fa-cog" /></span>
diff --git a/ui/pages/tasks.vue b/ui/pages/tasks.vue
index d60c364e..2cf46b27 100644
--- a/ui/pages/tasks.vue
+++ b/ui/pages/tasks.vue
@@ -52,7 +52,7 @@ div.is-centered {
       <div class="column is-12" v-if="!toggleForm">
         <div class="columns is-multiline" v-if="tasks && tasks.length > 0">
           <div class="column is-6" v-for="item in tasks" :key="item.id">
-            <div class="card">
+            <div class="card is-flex is-full-height is-flex-direction-column">
               <header class="card-header">
                 <div class="card-header-title is-text-overflow is-block">
                   <NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
@@ -63,7 +63,7 @@ div.is-centered {
                   </a>
                 </div>
               </header>
-              <div class="card-content">
+              <div class="card-content is-flex-grow-1">
                 <div class="content">
                   <p class="is-text-overflow">
                     <span class="icon"><i class="fa-solid fa-clock" /></span>
@@ -87,7 +87,7 @@ div.is-centered {
                   </p>
                 </div>
               </div>
-              <div class="card-footer">
+              <div class="card-footer mt-auto">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(item);">
                     <span class="icon"><i class="fa-solid fa-cog" /></span>