Increase the size of reminder names. Restyle.

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;