From b6e3559abaab47cb8cc053e5288ce2e5383a9ca9 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 25 Sep 2022 11:50:41 -0500
Subject: [PATCH] Update:Notification config UI for mobile #996

---
 client/components/cards/NotificationCard.vue              | 8 ++++----
 .../modals/notification/NotificationEditModal.vue         | 6 +++---
 client/pages/config/notifications.vue                     | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/components/cards/NotificationCard.vue b/client/components/cards/NotificationCard.vue
index 95ba4852..1506cfb5 100644
--- a/client/components/cards/NotificationCard.vue
+++ b/client/components/cards/NotificationCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full border border-white border-opacity-10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
-    <div class="flex items-center">
-      <p class="text-lg font-semibold">{{ eventName }}</p>
+    <div class="flex flex-wrap items-center">
+      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
       <div class="flex-grow" />
 
       <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">Fire onTest Event</ui-btn>
@@ -10,11 +10,11 @@
       <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
       <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</ui-btn>
 
-      <ui-icon-btn bg-color="warning" :size="7" icon-font-size="1.2rem" icon="edit" class="mr-2" @click="editNotification" />
+      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
       <ui-icon-btn bg-color="error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
     </div>
     <div class="pt-4">
-      <p class="text-gray-300 text-sm mb-2">{{ notification.urls.join(', ') }}</p>
+      <p class="text-gray-300 text-xs md:text-sm mb-2">{{ notification.urls.join(', ') }}</p>
 
       <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
       <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
diff --git a/client/components/modals/notification/NotificationEditModal.vue b/client/components/modals/notification/NotificationEditModal.vue
index 3f53db05..831a8b22 100644
--- a/client/components/modals/notification/NotificationEditModal.vue
+++ b/client/components/modals/notification/NotificationEditModal.vue
@@ -6,15 +6,15 @@
       </div>
     </template>
     <form @submit.prevent="submitForm">
-      <div class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
-        <div class="w-full p-8">
+      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full px-3 py-5 md:p-12">
           <ui-dropdown v-model="newNotification.eventName" label="Notification Event" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
 
           <ui-multi-select v-model="newNotification.urls" label="Apprise URL(s)" class="mb-2" />
 
           <ui-text-input-with-label v-model="newNotification.titleTemplate" label="Title Template" class="mb-2" />
 
-          <ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" class="mb-2" />
+          <ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" :rows="4" class="mb-2" />
 
           <p v-if="availableVariables" class="text-sm text-gray-300"><strong>Available variables:</strong> {{ availableVariables.join(', ') }}</p>
 
diff --git a/client/pages/config/notifications.vue b/client/pages/config/notifications.vue
index 4f2577f8..6154e96a 100644
--- a/client/pages/config/notifications.vue
+++ b/client/pages/config/notifications.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-8 mb-2 max-w-3xl mx-auto">
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-3 md:p-8 mb-2 max-w-3xl mx-auto">
       <h2 class="text-xl font-semibold mb-4">Apprise Notification Settings</h2>
       <p class="mb-6 text-gray-200">
         In order to use this feature you will need to have an instance of <a href="https://github.com/caronc/apprise-api" target="_blank" class="hover:underline text-blue-400 hover:text-blue-300">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at
@@ -14,7 +14,7 @@
           <ui-text-input ref="maxNotificationQueueInput" type="number" v-model="maxNotificationQueue" no-spinner :disabled="savingSettings" :padding-x="1" text-center class="w-10" />
 
           <ui-tooltip text="Events are limited to firing 1 per second. Events will be ignored if the queue is at max size. This prevents notification spamming." direction="right">
-            <p class="pl-4 text-lg">Max queue size for notification events<span class="material-icons icon-text ml-1">info_outlined</span></p>
+            <p class="pl-2 md:pl-4 text-base md:text-lg">Max queue size for notification events<span class="material-icons icon-text ml-1">info_outlined</span></p>
           </ui-tooltip>
         </div>
 
@@ -22,7 +22,7 @@
           <ui-text-input ref="maxFailedAttemptsInput" type="number" v-model="maxFailedAttempts" no-spinner :disabled="savingSettings" :padding-x="1" text-center class="w-10" />
 
           <ui-tooltip text="Notifications are disabled once they fail to send this many times." direction="right">
-            <p class="pl-4 text-lg">Max failed attempts<span class="material-icons icon-text ml-1">info_outlined</span></p>
+            <p class="pl-2 md:pl-4 text-base md:text-lg">Max failed attempts<span class="material-icons icon-text ml-1">info_outlined</span></p>
           </ui-tooltip>
         </div>