Restyle to work on most screen sizes

web/src/routes/dashboard/export.rs

@@ -12,8 +12,7 @@ use sqlx::{MySql, Pool};
 
 use crate::routes::{
     dashboard::{
-        create_reminder, generate_uid, ImportBody, Reminder, ReminderCsv, ReminderTemplateCsv,
+        create_reminder, ImportBody, ReminderCreate, ReminderCsv, ReminderTemplateCsv, TodoCsv,
-        TodoCsv,
     },
     JsonResult,
 };
@@ -141,11 +140,11 @@ pub async fn import_reminders(
 
                         match channel_id.parse::<u64>() {
                             Ok(channel_id) => {
-                                let reminder = Reminder {
+                                let reminder = ReminderCreate {
                                     attachment: record.attachment,
                                     attachment_name: record.attachment_name,
                                     avatar: record.avatar,
-                                    channel: Some(channel_id),
+                                    channel: channel_id,
                                     content: record.content,
                                     embed_author: record.embed_author,
                                     embed_author_url: record.embed_author_url,
@@ -168,12 +167,8 @@ pub async fn import_reminders(
                                     name: record.name,
                                     restartable: record.restartable,
                                     tts: record.tts,
-                                    uid: generate_uid(),
                                     username: record.username,
                                     utc_time: record.utc_time,
-                                    status: "pending".to_string(),
-                                    status_change_time: None,
-                                    status_message: None,
                                 };
 
                                 create_reminder(

web/src/routes/dashboard/guild.rs

@@ -26,7 +26,7 @@ use crate::{
     routes::{
         dashboard::{
             create_database_channel, create_reminder, template_name_default, DeleteReminder,
-            DeleteReminderTemplate, PatchReminder, Reminder, ReminderTemplate,
+            DeleteReminderTemplate, PatchReminder, Reminder, ReminderCreate, ReminderTemplate,
         },
         JsonResult,
     },
@@ -298,7 +298,7 @@ pub async fn delete_reminder_template(
 #[post("/api/guild/<id>/reminders", data = "<reminder>")]
 pub async fn create_guild_reminder(
     id: u64,
-    reminder: Json<Reminder>,
+    reminder: Json<ReminderCreate>,
     cookies: &CookieJar<'_>,
     serenity_context: &State<Context>,
     pool: &State<Pool<MySql>>,

web/src/routes/dashboard/mod.rs

@@ -118,6 +118,37 @@ pub struct EmbedField {
     inline: bool,
 }
 
+#[derive(Deserialize)]
+pub struct ReminderCreate {
+    #[serde(with = "base64s")]
+    attachment: Option<Vec<u8>>,
+    attachment_name: Option<String>,
+    avatar: Option<String>,
+    channel: u64,
+    content: String,
+    embed_author: String,
+    embed_author_url: Option<String>,
+    embed_color: u32,
+    embed_description: String,
+    embed_footer: String,
+    embed_footer_url: Option<String>,
+    embed_image_url: Option<String>,
+    embed_thumbnail_url: Option<String>,
+    embed_title: String,
+    embed_fields: Option<Json<Vec<EmbedField>>>,
+    enabled: bool,
+    expires: Option<NaiveDateTime>,
+    interval_seconds: Option<u32>,
+    interval_days: Option<u32>,
+    interval_months: Option<u32>,
+    #[serde(default = "name_default")]
+    name: String,
+    restartable: bool,
+    tts: bool,
+    username: Option<String>,
+    utc_time: NaiveDateTime,
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct Reminder {
     #[serde(with = "base64s")]
@@ -383,7 +414,7 @@ pub async fn create_reminder(
     pool: impl sqlx::Executor<'_, Database = Database> + Copy,
     guild_id: GuildId,
     user_id: UserId,
-    reminder: Reminder,
+    reminder: ReminderCreate,
 ) -> JsonResult {
     // check guild in db
     match sqlx::query!("SELECT 1 as A FROM guilds WHERE guild = ?", guild_id.0)
@@ -403,7 +434,7 @@ pub async fn create_reminder(
     }
 
     // validate channel
-    let channel = reminder.channel.map(|c| ChannelId(c).to_channel_cached(&ctx)).flatten();
+    let channel = ChannelId(reminder.channel).to_channel_cached(&ctx);
     let channel_exists = channel.is_some();
 
     let channel_matches_guild =
@@ -418,7 +449,7 @@ pub async fn create_reminder(
         return Err(json!({"error": "Channel not found"}));
     }
 
-    let channel = create_database_channel(&ctx, ChannelId(reminder.channel.unwrap()), pool).await;
+    let channel = create_database_channel(&ctx, ChannelId(reminder.channel), pool).await;
 
     if let Err(e) = channel {
         warn!("`create_database_channel` returned an error code: {:?}", e);

web/static/css/style.css

@@ -129,6 +129,12 @@ div.split-controls {
     margin-top: 0 !important;
 }
 
+.reminder-settings > .column {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
 div.reminderContent {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -294,7 +300,7 @@ div.dashboard-sidebar:not(.mobile-sidebar) {
 ul.guildList {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: scroll;
+    overflow: auto;
 }
 
 div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
@@ -453,8 +459,7 @@ input.default-width {
 .customizable.is-400x300 img {
     margin-top: 10px;
     width: 100%;
-    min-height: 100px;
+    height: 100px;
-    max-height: 400px;
 }
 
 .customizable.is-32x32 img {
@@ -598,6 +603,14 @@ input.default-width {
     border-bottom: 1px solid #fff;
 }
 
+.channel-selector {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
 li.highlight {
     margin-bottom: 0 !important;
 }
@@ -641,6 +654,21 @@ li.highlight {
     }
 }
 
+@media only screen and (max-width: 1023px) {
+    p.title.pageTitle {
+        display: none;
+    }
+
+    .dashboard-frame {
+        margin-top: 4rem !important;
+    }
+
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+}
+
 @media only screen and (max-width: 768px) {
     .button-row-edit {
         display: flex;
@@ -651,26 +679,6 @@ li.highlight {
         width: 100%;
         margin: 4px;
     }
-
-    p.title.pageTitle {
-        display: none;
-    }
-
-    .dashboard-frame {
-        margin-top: 4rem !important;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .customizable.thumbnail img {
-        width: 60px;
-        height: 60px;
-    }
-
-    .customizable.is-24x24 img {
-        width: 16px;
-        height: 16px;
-    }
 }
 
 /* loader */

web/templates/reminder_dashboard/templates/guild_reminder.html.tera

@@ -133,32 +133,27 @@
             </article>
         </div>
         <div class="column settings">
-            <div class="columns">
+            <div class="field channel-field">
-                <div class="column">
+                <div class="collapses">
-                    <div class="field channel-field">
+                    <label class="label" for="channelOption">Channel*</label>
-                        <div class="collapses">
+                </div>
-                            <label class="label" for="channelOption">Channel*</label>
+                <div class="control has-icons-left">
-                        </div>
+                    <div class="select">
-                        <div class="control has-icons-left">
+                        <select name="channel" class="channel-selector">
-                            <div class="select">
+                        </select>
-                                <select name="channel" class="channel-selector">
+                    </div>
-                                </select>
+                    <div class="icon is-small is-left">
-                            </div>
+                        <i class="fas fa-hashtag"></i>
-                            <div class="icon is-small is-left">
-                                <i class="fas fa-hashtag"></i>
-                            </div>
-                        </div>
                     </div>
                 </div>
-                <div class="column">
+            </div>
-                    <div class="field">
+
-                        <div class="control">
+            <div class="field">
-                            <label class="label collapses">
+                <div class="control">
-                                Time*
+                    <label class="label collapses">
-                                <input class="input prefill-now" type="datetime-local" step="1" name="time">
+                        Time*
-                            </label>
+                        <input class="input prefill-now" type="datetime-local" step="1" name="time">
-                        </div>
+                    </label>
-                    </div>
                 </div>
             </div>