From f21d5224353b3c4a25dfc5f0c282045375fd40d1 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sun, 27 Mar 2022 19:17:30 +0100
Subject: [PATCH] mobile appearence

---
 Rocket.toml                                   |  2 +-
 web/static/css/style.css                      | 22 +++++++++++++---
 web/static/js/interval.js                     | 26 +++++++++----------
 web/templates/base.html.tera                  |  7 ++---
 web/templates/dashboard.html.tera             |  4 +--
 .../reminder_dashboard.html.tera              |  6 ++---
 6 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/Rocket.toml b/Rocket.toml
index eef8409..e2933e7 100644
--- a/Rocket.toml
+++ b/Rocket.toml
@@ -1,5 +1,5 @@
 [default]
-address = "127.0.0.1"
+address = "0.0.0.0"
 port = 5000
 template_dir = "web/templates"
 
diff --git a/web/static/css/style.css b/web/static/css/style.css
index 6f67961..1ece04c 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -40,6 +40,9 @@ div.reminderContent.is-collapsed .columns {
 div.reminderContent.is-collapsed input[name="name"] {
     display: inline-flex;
     flex-grow: 1;
+    border: none;
+    font-weight: 700;
+    background: none;
 }
 
 div.reminderContent.is-collapsed button.hide-box {
@@ -84,6 +87,7 @@ div.interval-group > button {
     margin-left: auto;
 }
 
+/* Interval inputs */
 div.interval-group > .interval-group-left > input {
     -webkit-appearance: none;
     border-style: none;
@@ -104,6 +108,7 @@ div.interval-group {
     display: flex;
     flex-direction: row;
 }
+/* !Interval inputs */
 
 .left-pad {
     padding-left: 1rem;
@@ -167,7 +172,7 @@ img.rounded-corners {
 
 div.brand {
     text-align: center;
-    height: 48px;
+    height: 52px;
     background-color: #8fb677;
 }
 
@@ -185,7 +190,7 @@ div.dashboard-sidebar {
 
 div.mobile-sidebar {
     z-index: 100;
-    height: 100vh;
+    min-height: 100vh;
     position: absolute;
     top: 0;
     display: none;
@@ -350,7 +355,6 @@ textarea, input {
     border-radius: 4px;
     border-left: 4px solid #fff;
     background-color: #2f3136;
-    width: 500px;
 }
 
 .embed-author-box {
@@ -447,3 +451,15 @@ textarea, input {
     border-radius: 2px;
     border-bottom: 1px solid #fff;
 }
+
+@media only screen and (max-width: 768px) {
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+
+    .customizable.is-24x24 img {
+        width: 16px;
+        height: 16px;
+    }
+}
diff --git a/web/static/js/interval.js b/web/static/js/interval.js
index 24eb2d0..e56c8fc 100644
--- a/web/static/js/interval.js
+++ b/web/static/js/interval.js
@@ -45,25 +45,23 @@ document.querySelector(".interval-group").addEventListener(
 );
 
 $intervalGroup.querySelector("button.clear").addEventListener("click", () => {
-    document
-        .querySelector(".interval-group")
-        .querySelectorAll("input")
-        .forEach((el) => {
-            el.value = "";
-        });
+    $intervalGroup.querySelectorAll("input").forEach((el) => {
+        el.value = "";
+    });
 });
 
 document.addEventListener("remindersLoaded", (event) => {
     for (reminder of event.detail) {
-        update_input(reminder.node.querySelector(".interval-group input"));
+        let $intervalGroup = reminder.node.querySelector(".interval-group");
 
-        reminder.node.querySelector("button.clear").addEventListener("click", () => {
-            reminder.node
-                .querySelector(".interval-group")
-                .querySelectorAll("input")
-                .forEach((el) => {
-                    el.value = "";
-                });
+        $intervalGroup.addEventListener("blur", (ev) => {
+            if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup);
+        });
+
+        $intervalGroup.querySelector("button.clear").addEventListener("click", () => {
+            $intervalGroup.querySelectorAll("input").forEach((el) => {
+                el.value = "";
+            });
         });
     }
 });
diff --git a/web/templates/base.html.tera b/web/templates/base.html.tera
index d188b1b..a033a67 100644
--- a/web/templates/base.html.tera
+++ b/web/templates/base.html.tera
@@ -84,7 +84,7 @@
                 <i class="fab fa-discord"></i>
             </a>
             <a class="navbar-item" href="/help">
-                <i class="fab fa-book"></i>
+                <i class="fas fa-book"></i>
             </a>
 
             <div class="navbar-item">
@@ -130,7 +130,7 @@
                 <div class="hero-foot has-text-centered">
                     <a class="button is-size-4 is-rounded is-light" href="/oauth/login">
                         <p class="is-size-4">
-                            Login with Discord <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                            <span>Login with Discord</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                         </p>
                     </a>
                 </div>
@@ -158,9 +158,6 @@
                 <a href="https://patreon.com/jellywx"><strong>Patreon</strong></a> | <a href="https://discord.jellywx.com"><strong>Discord</strong></a> | <a href="https://github.com/JellyWX"><strong>GitHub</strong></a>
                 <br>
                 or, <a href="mailto:jude@jellywx.com">Email me</a>
-                <br>
-                <span class="icon"><i class="fab fa-monero"></i></span>
-                <strong>XMR</strong> 49oP6DzzEzdC6VkxE6hGoLSRw5awvEx5cGGXH327tck15LWk8SFgLUAjS2yZqssMWN3JPRraR68ApHi4GGSLtCDmLbF7euH
             </p>
         </div>
     </footer>
diff --git a/web/templates/dashboard.html.tera b/web/templates/dashboard.html.tera
index 031b966..2b12a4e 100644
--- a/web/templates/dashboard.html.tera
+++ b/web/templates/dashboard.html.tera
@@ -244,7 +244,7 @@
                 <ul class="menu-list">
                     <li>
                         <a class="show-modal" data-modal="chooseTimezoneModal">
-                            <span class="icon"><i class="fas fa-map-pin"></i></span> Timezone
+                            <span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
                         </a>
                     </li>
                 </ul>
@@ -279,7 +279,7 @@
                     </p>
                     <a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
                         <p class="is-size-4">
-                            Add to Server <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                            <span>Add to Server</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                         </p>
                     </a>
                 </div>
diff --git a/web/templates/reminder_dashboard/reminder_dashboard.html.tera b/web/templates/reminder_dashboard/reminder_dashboard.html.tera
index d23edde..c3c7c56 100644
--- a/web/templates/reminder_dashboard/reminder_dashboard.html.tera
+++ b/web/templates/reminder_dashboard/reminder_dashboard.html.tera
@@ -9,7 +9,7 @@
         <br>
 
         <div class="field">
-            <div class="columns">
+            <div class="columns is-mobile">
                 <div class="column">
                     <strong>Reminders</strong>
                 </div>
@@ -30,8 +30,8 @@
                 <div class="column is-narrow">
                     <div class="control has-icons-left">
                         <div class="select is-small">
-                            <select id="expandAll">
-                                <option value="" selected>Expand/Collapse...</option>
+                            <select id="expandAll" style="width: 60px">
+                                <option value="" selected></option>
                                 <option value="expand">Expand All</option>
                                 <option value="collapse">Collapse All</option>
                             </select>