jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

styling interval inputs

Browse Source
This commit is contained in:
jude 2022-03-24 22:40:05 +00:00
parent abfe492192
commit 08fd88ce54
2 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/static/css/style.css
View File

@ -80,6 +80,31 @@ div.reminderContent {
margin: 8px; 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 { .left-pad {
padding-left: 1rem; padding-left: 1rem;
padding-right: 0.2rem; padding-right: 0.2rem;

23
web/templates/reminder_dashboard/guild_reminder.html.tera
View File

@ -151,22 +151,15 @@
<div class="field"> <div class="field">
<a class="intervalLabel"><label class="label">Interval <i class="fas fa-chevron-down"></i></label></a> <a class="intervalLabel"><label class="label">Interval <i class="fas fa-chevron-down"></i></label></a>
<div class="control intervalSelector"> <div class="control intervalSelector">
<div class="columns"> <div class="input interval-group">
<div class="column"> <div class="interval-group-left">
<input class="input" type="number" name="interval_months" placeholder="Months"> <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>
</div> <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>
<div class="column"> <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
<input class="input" type="number" name="interval_days" placeholder="Days"> <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
</div> <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
<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> </div>
<button><span class="icon"><i class="fas fa-trash"></i></span></button>
</div> </div>
</div> </div>
</div> </div>