From 8799089b2d771d5d3df679aa05d390588e26b2e7 Mon Sep 17 00:00:00 2001 From: jude Date: Sat, 22 Jul 2023 15:06:53 +0100 Subject: [PATCH] Increase the size of reminder names. Restyle. --- Cargo.lock | 2 +- Cargo.toml | 2 +- .../20230722130906_increase_reminder_name.sql | 2 + web/src/consts.rs | 1 + web/src/routes/dashboard/mod.rs | 3 +- web/static/css/style.css | 84 +++- web/static/js/main.js | 18 + .../guild_reminder.html.tera | 457 +++++++++--------- 8 files changed, 319 insertions(+), 250 deletions(-) create mode 100644 migrations/20230722130906_increase_reminder_name.sql diff --git a/Cargo.lock b/Cargo.lock index f6c93f5..1e2a8df 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2217,7 +2217,7 @@ checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78" [[package]] name = "reminder-rs" -version = "1.6.19" +version = "1.6.20" dependencies = [ "base64 0.21.2", "chrono", diff --git a/Cargo.toml b/Cargo.toml index cf7a45b..8f207a8 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "reminder-rs" -version = "1.6.19" +version = "1.6.20" authors = ["Jude Southworth "] edition = "2021" license = "AGPL-3.0 only" diff --git a/migrations/20230722130906_increase_reminder_name.sql b/migrations/20230722130906_increase_reminder_name.sql new file mode 100644 index 0000000..fa82303 --- /dev/null +++ b/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'; diff --git a/web/src/consts.rs b/web/src/consts.rs index 8ca284a..957eaf4 100644 --- a/web/src/consts.rs +++ b/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; diff --git a/web/src/routes/dashboard/mod.rs b/web/src/routes/dashboard/mod.rs index fdfd337..4168a4a 100644 --- a/web/src/routes/dashboard/mod.rs +++ b/web/src/routes/dashboard/mod.rs @@ -18,7 +18,7 @@ use crate::{ CHARACTERS, DAY, DEFAULT_AVATAR, MAX_CONTENT_LENGTH, MAX_EMBED_AUTHOR_LENGTH, MAX_EMBED_DESCRIPTION_LENGTH, MAX_EMBED_FIELDS, MAX_EMBED_FIELD_TITLE_LENGTH, MAX_EMBED_FIELD_VALUE_LENGTH, MAX_EMBED_FOOTER_LENGTH, MAX_EMBED_TITLE_LENGTH, - MAX_URL_LENGTH, MAX_USERNAME_LENGTH, MIN_INTERVAL, + MAX_NAME_LENGTH, MAX_URL_LENGTH, MAX_USERNAME_LENGTH, MIN_INTERVAL, }, routes::JsonResult, Database, Error, @@ -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); diff --git a/web/static/css/style.css b/web/static/css/style.css index a8001ca..f55adc1 100644 --- a/web/static/css/style.css +++ b/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 { diff --git a/web/static/js/main.js b/web/static/js/main.js index 912cbc1..d66b5a7 100644 --- a/web/static/js/main.js +++ b/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; diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera index 5918800..cfbf38c 100644 --- a/web/templates/reminder_dashboard/guild_reminder.html.tera +++ b/web/templates/reminder_dashboard/guild_reminder.html.tera @@ -1,251 +1,262 @@ -
-
-
-
-

- - Image for discord avatar - -

-
-
-
-
- - -
- - +
+
+ {% if not creating %} +
+ #channel +
+ {% endif %} +
+
+
+ + +
+
+
+
+ +
+
+
+
+
+
+

+ + Image for discord avatar + +

+
+
+
+
+ + +
+ + -
-
- -
-
-
-

- - Image for embed author - -

-
- -
- - -
-
- - - -
- - -
- -
-
- -
- - +
+
+ +
+
+
+

+ + Image for embed author + +

- - +
+ + +
+ + + +
+ + +
+ +
+
+ +
+ + +
+ + + +
+
+
+ +
+

+ + Square thumbnail embedded image + +

-
-

- - Square thumbnail embedded image - -

-
-
- -

- - Large embedded image - -

- -
-

+

- Footer profile-like image + Large embedded image

- - -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
+
+

+ + Footer profile-like image + +

-
-
-
-
- -
-
-
- -
-
- + + +
-
-
-
-
- -
-
-
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
-
-
-
- -
-
-
- - - - -