mobile appearence

Rocket.toml

@@ -1,5 +1,5 @@
 [default]
-address = "127.0.0.1"
+address = "0.0.0.0"
 port = 5000
 template_dir = "web/templates"
 

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;
+    }
+}

web/static/js/interval.js

@@ -45,23 +45,21 @@ document.querySelector(".interval-group").addEventListener(
 );
 
 $intervalGroup.querySelector("button.clear").addEventListener("click", () => {
-    document
+    $intervalGroup.querySelectorAll("input").forEach((el) => {
-        .querySelector(".interval-group")
-        .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", () => {
+        $intervalGroup.addEventListener("blur", (ev) => {
-            reminder.node
+            if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup);
-                .querySelector(".interval-group")
+        });
-                .querySelectorAll("input")
+
-                .forEach((el) => {
+        $intervalGroup.querySelector("button.clear").addEventListener("click", () => {
+            $intervalGroup.querySelectorAll("input").forEach((el) => {
                 el.value = "";
             });
         });

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>

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>

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">
+                            <select id="expandAll" style="width: 60px">
-                                <option value="" selected>Expand/Collapse...</option>
+                                <option value="" selected></option>
                                 <option value="expand">Expand All</option>
                                 <option value="collapse">Collapse All</option>
                             </select>