Increase the size of reminder names. Restyle.

migrations/20230722130906_increase_reminder_name.sql

@@ -0,0 +1,2 @@
+ALTER TABLE reminders MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder';
+ALTER TABLE reminder_template MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder';

web/src/consts.rs

@@ -2,6 +2,7 @@ pub const DISCORD_OAUTH_TOKEN: &'static str = "https://discord.com/api/oauth2/to
 pub const DISCORD_OAUTH_AUTHORIZE: &'static str = "https://discord.com/api/oauth2/authorize";
 pub const DISCORD_API: &'static str = "https://discord.com/api";
 
+pub const MAX_NAME_LENGTH: usize = 100;
 pub const MAX_CONTENT_LENGTH: usize = 2000;
 pub const MAX_EMBED_DESCRIPTION_LENGTH: usize = 4096;
 pub const MAX_EMBED_TITLE_LENGTH: usize = 256;

web/src/routes/dashboard/mod.rs

@@ -400,6 +400,7 @@ pub async fn create_reminder(
     let channel = channel.unwrap();
 
     // validate lengths
+    check_length!(MAX_NAME_LENGTH, reminder.name);
     check_length!(MAX_CONTENT_LENGTH, reminder.content);
     check_length!(MAX_EMBED_DESCRIPTION_LENGTH, reminder.embed_description);
     check_length!(MAX_EMBED_TITLE_LENGTH, reminder.embed_title);

web/static/css/style.css

@@ -11,7 +11,7 @@ div.reminderContent.is-collapsed .column.discord-frame {
     display: none;
 }
 
-div.reminderContent.is-collapsed .collapses {
+div.reminderContent.is-collapsed .column.settings {
     display: none;
 }
 
@@ -23,42 +23,42 @@ div.reminderContent .invert-collapses {
     display: none;
 }
 
-div.reminderContent.is-collapsed .settings {
-    display: flex;
-    flex-direction: row;
-    padding-bottom: 0;
-}
-
-div.reminderContent.is-collapsed .channel-field {
-    display: inline-flex;
-    order: 1;
-}
-
-div.reminderContent.is-collapsed .reminder-topbar {
-    display: inline-flex;
-    margin-bottom: 0px;
-    flex-grow: 1;
-    order: 2;
-}
-
 div.reminderContent.is-collapsed input[name="name"] {
     display: inline-flex;
     flex-grow: 1;
     border: none;
-    font-weight: 700;
     background: none;
+    box-shadow: none;
+    opacity: 1;
 }
 
-div.reminderContent.is-collapsed button.hide-box {
+div.reminderContent.is-collapsed .hide-box {
     display: inline-flex;
 }
 
-div.reminderContent.is-collapsed button.hide-box i {
+div.reminderContent.is-collapsed .hide-box i {
     transform: rotate(90deg);
 }
 /* END */
 
 /* dashboard styles */
+.hide-box {
+    border: none;
+    background: none;
+}
+
+.hide-box:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+.channel-bar {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-weight: bold;
+}
+
 button.inline-btn {
     height: 100%;
     padding: 5px;
@@ -85,11 +85,47 @@ div.discord-embed {
     position: relative;
 }
 
+div.split-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 2;
+}
+
+.reminder-topbar > div {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.settings {
+    display: flex;
+    flex-direction: column;
+}
+
+.name-bar {
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.hide-button-bar {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.patreon-only {
+    padding-bottom: 16px;
+}
+
+.reminder-topbar {
+    display: flex;
+}
+
 div.reminderContent {
-    padding: 2px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 14px;
     background-color: #f5f5f5;
     border-radius: 8px;
-    margin: 8px;
 }
 
 div.interval-group > button {

web/static/js/main.js

@@ -56,6 +56,12 @@ function switch_pane(selector) {
 }
 
 function update_select(sel) {
+    let channelDisplay = sel.closest("div.reminderContent").querySelector(".channel-bar");
+
+    if (channelDisplay !== null) {
+        channelDisplay.textContent = `#${sel.selectedOptions[0].textContent}`;
+    }
+
     if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
         sel.closest("div.reminderContent").querySelector("img.discord-avatar").src =
             sel.selectedOptions[0].dataset["webhookAvatar"];
@@ -231,6 +237,11 @@ async function serialize_reminder(node, mode) {
         }
     }
 
+    let name = node.querySelector('input[name="name"]').value;
+    if (name.length > 100) {
+        return { error: "Name exceeds maximum length (100)." };
+    }
+
     let rgb_color = window.getComputedStyle(
         node.querySelector("div.discord-embed")
     ).borderLeftColor;
@@ -366,6 +377,7 @@ function deserialize_reminder(reminder, frame, mode) {
     }
 
     update_interval(frame);
+    update_select(frame.querySelector(".channel-selector"));
 
     const lastChild = frame.querySelector("div.embed-multifield-box .embed-field-box");
 
@@ -451,6 +463,12 @@ document.addEventListener("channelsLoaded", () => {
 document.addEventListener("remindersLoaded", (event) => {
     const guild = guildId();
 
+    document.querySelectorAll("select.channel-selector").forEach((el) => {
+        el.addEventListener("change", (e) => {
+            update_select(e.target);
+        });
+    });
+
     for (let reminder of event.detail) {
         let node = reminder.node;
 

web/templates/reminder_dashboard/guild_reminder.html.tera

@@ -1,4 +1,25 @@
-<div class="columns reminderContent {% if creating %}creator{% endif %}">
+<div class="reminderContent {% if creating %}creator{% endif %}">
+    <div class="columns column reminder-topbar">
+        {% if not creating %}
+        <div class="invert-collapses channel-bar">
+            #channel
+        </div>
+        {% endif %}
+        <div class="name-bar">
+            <div class="field">
+                <div class="control">
+                    <label class="label sr-only">Reminder Name</label>
+                    <input class="input" type="text" name="name" placeholder="Reminder Name" maxlength="100">
+                </div>
+            </div>
+        </div>
+        <div class="hide-button-bar">
+            <button class="button hide-box">
+                <span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
+            </button>
+        </div>
+    </div>
+    <div class="columns">
         <div class="column discord-frame">
             <article class="media">
                 <figure class="media-left">
@@ -112,22 +133,6 @@
             </article>
         </div>
         <div class="column settings">
-        <div class="columns is-mobile reminder-topbar">
-            <div class="column">
-                <div class="field">
-                    <div class="control">
-                        <label class="label sr-only">Reminder Name</label>
-                        <input class="input" type="text" name="name" placeholder="Reminder Name">
-                    </div>
-                </div>
-            </div>
-            <div class="column is-narrow">
-                <button class="button is-rounded hide-box">
-                    <span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
-                </button>
-            </div>
-        </div>
-
             <div class="columns">
                 <div class="column">
                     <div class="field channel-field">
@@ -157,7 +162,8 @@
                 </div>
             </div>
 
-        <div class="collapses">
+            <div class="collapses split-controls">
+                <div>
                     <div class="patreon-only">
                         <div class="field">
                             <label class="label">Interval <a class="foreground" href="/help/intervals"><i class="fas fa-question-circle"></i></a></label>
@@ -222,6 +228,7 @@
                             </div>
                         </div>
                     </div>
+                </div>
 
                 <div>
                     <span class="pad-left"></span>
@@ -244,8 +251,12 @@
                         <button class="button is-danger delete-reminder">
                             Delete
                         </button>
+                        <button class="button is-info demo-reminder">
+                            Demo
+                        </button>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
+</div>