From 37177c24319a03a40bb2b92d3044c9da20e66a76 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sat, 23 Sep 2023 18:04:41 +0100
Subject: [PATCH] Update styles for mobile

---
 web/static/css/style.css                      | 159 +++++++++++++++---
 .../guild_reminder.html.tera                  |  43 +++--
 2 files changed, 153 insertions(+), 49 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 6d4ea76..63f80a8 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -129,6 +129,12 @@ div.split-controls {
     margin-top: 0 !important;
 }
 
+.reminder-settings > .column {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
 div.reminderContent {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -291,10 +297,19 @@ div.dashboard-sidebar:not(.mobile-sidebar) {
     flex-direction: column;
 }
 
+ul.guildList {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+}
+
 div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
-    position: fixed;
-    bottom: 0;
-    width: 226px;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+div.dashboard-sidebar svg {
+    flex-shrink: 0;
 }
 
 div.mobile-sidebar {
@@ -444,8 +459,7 @@ input.default-width {
 .customizable.is-400x300 img {
     margin-top: 10px;
     width: 100%;
-    min-height: 100px;
-    max-height: 400px;
+    height: 100px;
 }
 
 .customizable.is-32x32 img {
@@ -589,6 +603,14 @@ input.default-width {
     border-bottom: 1px solid #fff;
 }
 
+.channel-selector {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
 li.highlight {
     margin-bottom: 0 !important;
 }
@@ -632,6 +654,21 @@ li.highlight {
     }
 }
 
+@media only screen and (max-width: 1023px) {
+    p.title.pageTitle {
+        display: none;
+    }
+
+    .dashboard-frame {
+        margin-top: 4rem !important;
+    }
+
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+}
+
 @media only screen and (max-width: 768px) {
     .button-row-edit {
         display: flex;
@@ -642,26 +679,6 @@ li.highlight {
         width: 100%;
         margin: 4px;
     }
-
-    p.title.pageTitle {
-        display: none;
-    }
-
-    .dashboard-frame {
-        margin-top: 4rem !important;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .customizable.thumbnail img {
-        width: 60px;
-        height: 60px;
-    }
-
-    .customizable.is-24x24 img {
-        width: 16px;
-        height: 16px;
-    }
 }
 
 /* loader */
@@ -679,6 +696,86 @@ li.highlight {
 
 /* END */
 
+div.reminderError {
+    margin: 10px;
+    padding: 14px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+}
+
+div.reminderError .errorHead {
+    display: flex;
+    flex-direction: row;
+}
+
+div.reminderError .errorIcon {
+    padding: 8px;
+    border-radius: 4px;
+    margin-right: 12px;
+}
+
+div.reminderError .errorIcon .fas {
+    display: none
+}
+
+div.reminderError[data-case="deleted"] .errorIcon {
+    background-color: #e7e5e4;
+}
+
+div.reminderError[data-case="failed"] .errorIcon {
+    background-color: #fecaca;
+}
+
+div.reminderError[data-case="sent"] .errorIcon {
+    background-color: #d9f99d;
+}
+
+div.reminderError[data-case="deleted"] .errorIcon .fas.fa-trash {
+    display: block;
+}
+
+div.reminderError[data-case="failed"] .errorIcon .fas.fa-exclamation-triangle {
+    display: block;
+}
+
+div.reminderError[data-case="sent"] .errorIcon .fas.fa-check {
+    display: block;
+}
+
+div.reminderError .errorHead .reminderName {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    flex-grow: 1;
+}
+
+div.reminderError .errorHead .reminderTime {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 4px;
+    border-color: #e5e5e5;
+    border-width: 1px;
+    border-style: solid;
+}
+
+div.reminderError .reminderMessage {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    flex-grow: 1;
+    font-style: italic;
+}
+
 /* other stuff */
 
 .half-rem {
@@ -716,6 +813,18 @@ a.switch-pane {
     text-overflow: ellipsis;
 }
 
+.guild-submenu {
+    display: none;
+}
+
+.guild-submenu li {
+    font-size: 0.8rem;
+}
+
+a.switch-pane.is-active ~ .guild-submenu {
+    display: block;
+}
+
 .feedback {
     background-color: #5865F2;
 }
diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera
index ac510fe..2b8844c 100644
--- a/web/templates/reminder_dashboard/guild_reminder.html.tera
+++ b/web/templates/reminder_dashboard/guild_reminder.html.tera
@@ -133,32 +133,27 @@
             </article>
         </div>
         <div class="column settings">
-            <div class="columns">
-                <div class="column">
-                    <div class="field channel-field">
-                        <div class="collapses">
-                            <label class="label" for="channelOption">Channel*</label>
-                        </div>
-                        <div class="control has-icons-left">
-                            <div class="select">
-                                <select name="channel" class="channel-selector">
-                                </select>
-                            </div>
-                            <div class="icon is-small is-left">
-                                <i class="fas fa-hashtag"></i>
-                            </div>
-                        </div>
+            <div class="field channel-field">
+                <div class="collapses">
+                    <label class="label" for="channelOption">Channel*</label>
+                </div>
+                <div class="control has-icons-left">
+                    <div class="select">
+                        <select name="channel" class="channel-selector">
+                        </select>
+                    </div>
+                    <div class="icon is-small is-left">
+                        <i class="fas fa-hashtag"></i>
                     </div>
                 </div>
-                <div class="column">
-                    <div class="field">
-                        <div class="control">
-                            <label class="label collapses">
-                                Time*
-                                <input class="input prefill-now" type="datetime-local" step="1" name="time">
-                            </label>
-                        </div>
-                    </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    <label class="label collapses">
+                        Time*
+                        <input class="input prefill-now" type="datetime-local" step="1" name="time">
+                    </label>
                 </div>
             </div>