From 08fd88ce54b7478a70fc6936c6fd9fa7f248aaf1 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Thu, 24 Mar 2022 22:40:05 +0000
Subject: [PATCH] styling interval inputs

---
 web/static/css/style.css                      | 25 +++++++++++++++++++
 .../guild_reminder.html.tera                  | 23 ++++++-----------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index d81e3d5..6f67961 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -80,6 +80,31 @@ div.reminderContent {
     margin: 8px;
 }
 
+div.interval-group > button {
+    margin-left: auto;
+}
+
+div.interval-group > .interval-group-left > input {
+    -webkit-appearance: none;
+    border-style: none;
+    background-color: #eee;
+    font-size: 1rem;
+    font-family: monospace;
+}
+
+div.interval-group > .interval-group-left > input.w2 {
+    width: 3ch;
+}
+
+div.interval-group > .interval-group-left > input.w3 {
+    width: 6ch;
+}
+
+div.interval-group {
+    display: flex;
+    flex-direction: row;
+}
+
 .left-pad {
     padding-left: 1rem;
     padding-right: 0.2rem;
diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera
index 644ab85..afd7a39 100644
--- a/web/templates/reminder_dashboard/guild_reminder.html.tera
+++ b/web/templates/reminder_dashboard/guild_reminder.html.tera
@@ -151,22 +151,15 @@
             <div class="field">
                 <a class="intervalLabel"><label class="label">Interval <i class="fas fa-chevron-down"></i></label></a>
                 <div class="control intervalSelector">
-                    <div class="columns">
-                        <div class="column">
-                            <input class="input" type="number" name="interval_months" placeholder="Months">
-                        </div>
-                        <div class="column">
-                            <input class="input" type="number" name="interval_days" placeholder="Days">
-                        </div>
-                        <div class="column">
-                            <input class="input" type="number" name="interval_hours" placeholder="Hours">
-                        </div>
-                        <div class="column">
-                            <input class="input" type="number" name="interval_minutes" placeholder="Minutes">
-                        </div>
-                        <div class="column">
-                            <input class="input" type="number" name="interval_seconds" placeholder="Seconds">
+                    <div class="input interval-group">
+                        <div class="interval-group-left">
+                            <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span style="width: 0.5rem"></span> months, <span style="width: 0.5rem"></span>
+                            <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span style="width: 0.5rem"></span> days, <span style="width: 0.5rem"></span>
+                            <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
+                            <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
+                            <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
                         </div>
+                        <button><span class="icon"><i class="fas fa-trash"></i></span></button>
                     </div>
                 </div>
             </div>