Increase the size of reminder names. Restyle.

This commit is contained in:
jude 2023-07-22 15:06:53 +01:00
parent 88c4830209
commit 8799089b2d
8 changed files with 319 additions and 250 deletions

2
Cargo.lock generated
View File

@ -2217,7 +2217,7 @@ checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78"
[[package]] [[package]]
name = "reminder-rs" name = "reminder-rs"
version = "1.6.19" version = "1.6.20"
dependencies = [ dependencies = [
"base64 0.21.2", "base64 0.21.2",
"chrono", "chrono",

View File

@ -1,6 +1,6 @@
[package] [package]
name = "reminder-rs" name = "reminder-rs"
version = "1.6.19" version = "1.6.20"
authors = ["Jude Southworth <judesouthworth@pm.me>"] authors = ["Jude Southworth <judesouthworth@pm.me>"]
edition = "2021" edition = "2021"
license = "AGPL-3.0 only" license = "AGPL-3.0 only"

View File

@ -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';

View File

@ -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_OAUTH_AUTHORIZE: &'static str = "https://discord.com/api/oauth2/authorize";
pub const DISCORD_API: &'static str = "https://discord.com/api"; 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_CONTENT_LENGTH: usize = 2000;
pub const MAX_EMBED_DESCRIPTION_LENGTH: usize = 4096; pub const MAX_EMBED_DESCRIPTION_LENGTH: usize = 4096;
pub const MAX_EMBED_TITLE_LENGTH: usize = 256; pub const MAX_EMBED_TITLE_LENGTH: usize = 256;

View File

@ -18,7 +18,7 @@ use crate::{
CHARACTERS, DAY, DEFAULT_AVATAR, MAX_CONTENT_LENGTH, MAX_EMBED_AUTHOR_LENGTH, 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_DESCRIPTION_LENGTH, MAX_EMBED_FIELDS, MAX_EMBED_FIELD_TITLE_LENGTH,
MAX_EMBED_FIELD_VALUE_LENGTH, MAX_EMBED_FOOTER_LENGTH, MAX_EMBED_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, routes::JsonResult,
Database, Error, Database, Error,
@ -400,6 +400,7 @@ pub async fn create_reminder(
let channel = channel.unwrap(); let channel = channel.unwrap();
// validate lengths // validate lengths
check_length!(MAX_NAME_LENGTH, reminder.name);
check_length!(MAX_CONTENT_LENGTH, reminder.content); check_length!(MAX_CONTENT_LENGTH, reminder.content);
check_length!(MAX_EMBED_DESCRIPTION_LENGTH, reminder.embed_description); check_length!(MAX_EMBED_DESCRIPTION_LENGTH, reminder.embed_description);
check_length!(MAX_EMBED_TITLE_LENGTH, reminder.embed_title); check_length!(MAX_EMBED_TITLE_LENGTH, reminder.embed_title);

View File

@ -11,7 +11,7 @@ div.reminderContent.is-collapsed .column.discord-frame {
display: none; display: none;
} }
div.reminderContent.is-collapsed .collapses { div.reminderContent.is-collapsed .column.settings {
display: none; display: none;
} }
@ -23,42 +23,42 @@ div.reminderContent .invert-collapses {
display: none; 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"] { div.reminderContent.is-collapsed input[name="name"] {
display: inline-flex; display: inline-flex;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
font-weight: 700;
background: none; background: none;
box-shadow: none;
opacity: 1;
} }
div.reminderContent.is-collapsed button.hide-box { div.reminderContent.is-collapsed .hide-box {
display: inline-flex; display: inline-flex;
} }
div.reminderContent.is-collapsed button.hide-box i { div.reminderContent.is-collapsed .hide-box i {
transform: rotate(90deg); transform: rotate(90deg);
} }
/* END */ /* END */
/* dashboard styles */ /* 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 { button.inline-btn {
height: 100%; height: 100%;
padding: 5px; padding: 5px;
@ -85,11 +85,47 @@ div.discord-embed {
position: relative; 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 { div.reminderContent {
padding: 2px; margin-top: 10px;
margin-bottom: 10px;
padding: 14px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 8px; border-radius: 8px;
margin: 8px;
} }
div.interval-group > button { div.interval-group > button {

View File

@ -56,6 +56,12 @@ function switch_pane(selector) {
} }
function update_select(sel) { 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"]) { if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
sel.closest("div.reminderContent").querySelector("img.discord-avatar").src = sel.closest("div.reminderContent").querySelector("img.discord-avatar").src =
sel.selectedOptions[0].dataset["webhookAvatar"]; 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( let rgb_color = window.getComputedStyle(
node.querySelector("div.discord-embed") node.querySelector("div.discord-embed")
).borderLeftColor; ).borderLeftColor;
@ -366,6 +377,7 @@ function deserialize_reminder(reminder, frame, mode) {
} }
update_interval(frame); update_interval(frame);
update_select(frame.querySelector(".channel-selector"));
const lastChild = frame.querySelector("div.embed-multifield-box .embed-field-box"); const lastChild = frame.querySelector("div.embed-multifield-box .embed-field-box");
@ -451,6 +463,12 @@ document.addEventListener("channelsLoaded", () => {
document.addEventListener("remindersLoaded", (event) => { document.addEventListener("remindersLoaded", (event) => {
const guild = guildId(); const guild = guildId();
document.querySelectorAll("select.channel-selector").forEach((el) => {
el.addEventListener("change", (e) => {
update_select(e.target);
});
});
for (let reminder of event.detail) { for (let reminder of event.detail) {
let node = reminder.node; let node = reminder.node;

View File

@ -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"> <div class="column discord-frame">
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
@ -112,22 +133,6 @@
</article> </article>
</div> </div>
<div class="column settings"> <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="columns">
<div class="column"> <div class="column">
<div class="field channel-field"> <div class="field channel-field">
@ -157,7 +162,8 @@
</div> </div>
</div> </div>
<div class="collapses"> <div class="collapses split-controls">
<div>
<div class="patreon-only"> <div class="patreon-only">
<div class="field"> <div class="field">
<label class="label">Interval <a class="foreground" href="/help/intervals"><i class="fas fa-question-circle"></i></a></label> <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> </div>
</div>
<div> <div>
<span class="pad-left"></span> <span class="pad-left"></span>
@ -244,8 +251,12 @@
<button class="button is-danger delete-reminder"> <button class="button is-danger delete-reminder">
Delete Delete
</button> </button>
<button class="button is-info demo-reminder">
Demo
</button>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>