Fix some mobile styles. Fix race condition in client side

This commit is contained in:
jude 2023-07-23 12:06:03 +01:00
parent 8799089b2d
commit b4f07cfc1c
3 changed files with 43 additions and 13 deletions

View File

@ -104,7 +104,7 @@ div.split-controls {
.name-bar { .name-bar {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 1;
} }
.hide-button-bar { .hide-button-bar {
@ -116,8 +116,17 @@ div.split-controls {
padding-bottom: 16px; padding-bottom: 16px;
} }
.tts-row {
padding-bottom: 10px;
}
.reminder-topbar { .reminder-topbar {
display: flex; display: flex;
margin-bottom: 0 !important;
}
.reminder-settings {
margin-top: 0 !important;
} }
div.reminderContent { div.reminderContent {
@ -128,11 +137,19 @@ div.reminderContent {
border-radius: 8px; border-radius: 8px;
} }
div.interval-group > button { /* Interval inputs */
margin-left: auto; .div.interval-group .clear:focus {
outline: none;
box-shadow: none !important;
}
div.interval-group .clear {
border: none;
background: none;
padding: 1px;
margin-right: -3px;
} }
/* Interval inputs */
div.interval-group > .interval-group-left input { div.interval-group > .interval-group-left input {
-webkit-appearance: none; -webkit-appearance: none;
border-style: none; border-style: none;
@ -146,12 +163,13 @@ div.interval-group > .interval-group-left input.w2 {
} }
div.interval-group > .interval-group-left input.w3 { div.interval-group > .interval-group-left input.w3 {
width: 6ch; width: 3ch;
} }
div.interval-group { div.interval-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
} }
/* !Interval inputs */ /* !Interval inputs */
@ -547,6 +565,18 @@ input.default-width {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
@media only screen and (max-width: 768px) {
.button-row {
display: flex;
flex-direction: column;
}
.button-row > button {
width: 100%;
margin: 4px;
}
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.customizable.thumbnail img { .customizable.thumbnail img {
width: 60px; width: 60px;

View File

@ -595,7 +595,7 @@ document.querySelectorAll(".show-modal").forEach((element) => {
}); });
}); });
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", async () => {
$loader.classList.remove("is-hidden"); $loader.classList.remove("is-hidden");
mentions.attach(document.querySelectorAll("textarea")); mentions.attach(document.querySelectorAll("textarea"));
@ -615,7 +615,7 @@ document.addEventListener("DOMContentLoaded", () => {
hideBox.closest(".reminderContent").classList.toggle("is-collapsed"); hideBox.closest(".reminderContent").classList.toggle("is-collapsed");
}); });
fetch("/dashboard/api/user") await fetch("/dashboard/api/user")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {
@ -629,7 +629,7 @@ document.addEventListener("DOMContentLoaded", () => {
} }
}); });
fetch("/dashboard/api/user/guilds") await fetch("/dashboard/api/user/guilds")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {

View File

@ -1,5 +1,5 @@
<div class="reminderContent {% if creating %}creator{% endif %}"> <div class="reminderContent {% if creating %}creator{% endif %}">
<div class="columns column reminder-topbar"> <div class="columns is-mobile column reminder-topbar">
{% if not creating %} {% if not creating %}
<div class="invert-collapses channel-bar"> <div class="invert-collapses channel-bar">
#channel #channel
@ -19,7 +19,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns reminder-settings">
<div class="column discord-frame"> <div class="column discord-frame">
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
@ -167,7 +167,7 @@
<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>
<div class="control intervalSelector" style="min-width: 400px;" > <div class="control intervalSelector">
<div class="input interval-group"> <div class="input interval-group">
<div class="interval-group-left"> <div class="interval-group-left">
<label> <label>
@ -206,7 +206,7 @@
</div> </div>
</div> </div>
<div class="columns"> <div class="columns is-mobile tts-row">
<div class="column has-text-centered"> <div class="column has-text-centered">
<div class="is-boxed"> <div class="is-boxed">
<label class="label">Enable TTS <input type="checkbox" name="tts"></label> <label class="label">Enable TTS <input type="checkbox" name="tts"></label>
@ -230,7 +230,7 @@
</div> </div>
</div> </div>
<div> <div class="button-row">
<span class="pad-left"></span> <span class="pad-left"></span>
{% if creating %} {% if creating %}
<button class="button is-success" id="createReminder"> <button class="button is-success" id="createReminder">