mobile appearence

This commit is contained in:
jude 2022-03-27 19:17:30 +01:00
parent 3add718cdf
commit f21d522435
6 changed files with 39 additions and 28 deletions

View File

@ -1,5 +1,5 @@
[default]
address = "127.0.0.1"
address = "0.0.0.0"
port = 5000
template_dir = "web/templates"

View File

@ -40,6 +40,9 @@ div.reminderContent.is-collapsed .columns {
div.reminderContent.is-collapsed input[name="name"] {
display: inline-flex;
flex-grow: 1;
border: none;
font-weight: 700;
background: none;
}
div.reminderContent.is-collapsed button.hide-box {
@ -84,6 +87,7 @@ div.interval-group > button {
margin-left: auto;
}
/* Interval inputs */
div.interval-group > .interval-group-left > input {
-webkit-appearance: none;
border-style: none;
@ -104,6 +108,7 @@ div.interval-group {
display: flex;
flex-direction: row;
}
/* !Interval inputs */
.left-pad {
padding-left: 1rem;
@ -167,7 +172,7 @@ img.rounded-corners {
div.brand {
text-align: center;
height: 48px;
height: 52px;
background-color: #8fb677;
}
@ -185,7 +190,7 @@ div.dashboard-sidebar {
div.mobile-sidebar {
z-index: 100;
height: 100vh;
min-height: 100vh;
position: absolute;
top: 0;
display: none;
@ -350,7 +355,6 @@ textarea, input {
border-radius: 4px;
border-left: 4px solid #fff;
background-color: #2f3136;
width: 500px;
}
.embed-author-box {
@ -447,3 +451,15 @@ textarea, input {
border-radius: 2px;
border-bottom: 1px solid #fff;
}
@media only screen and (max-width: 768px) {
.customizable.thumbnail img {
width: 60px;
height: 60px;
}
.customizable.is-24x24 img {
width: 16px;
height: 16px;
}
}

View File

@ -45,23 +45,21 @@ document.querySelector(".interval-group").addEventListener(
);
$intervalGroup.querySelector("button.clear").addEventListener("click", () => {
document
.querySelector(".interval-group")
.querySelectorAll("input")
.forEach((el) => {
$intervalGroup.querySelectorAll("input").forEach((el) => {
el.value = "";
});
});
document.addEventListener("remindersLoaded", (event) => {
for (reminder of event.detail) {
update_input(reminder.node.querySelector(".interval-group input"));
let $intervalGroup = reminder.node.querySelector(".interval-group");
reminder.node.querySelector("button.clear").addEventListener("click", () => {
reminder.node
.querySelector(".interval-group")
.querySelectorAll("input")
.forEach((el) => {
$intervalGroup.addEventListener("blur", (ev) => {
if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup);
});
$intervalGroup.querySelector("button.clear").addEventListener("click", () => {
$intervalGroup.querySelectorAll("input").forEach((el) => {
el.value = "";
});
});

View File

@ -84,7 +84,7 @@
<i class="fab fa-discord"></i>
</a>
<a class="navbar-item" href="/help">
<i class="fab fa-book"></i>
<i class="fas fa-book"></i>
</a>
<div class="navbar-item">
@ -130,7 +130,7 @@
<div class="hero-foot has-text-centered">
<a class="button is-size-4 is-rounded is-light" href="/oauth/login">
<p class="is-size-4">
Login with Discord <span class="icon"><i class="fas fa-chevron-right"></i></span>
<span>Login with Discord</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
</p>
</a>
</div>
@ -158,9 +158,6 @@
<a href="https://patreon.com/jellywx"><strong>Patreon</strong></a> | <a href="https://discord.jellywx.com"><strong>Discord</strong></a> | <a href="https://github.com/JellyWX"><strong>GitHub</strong></a>
<br>
or, <a href="mailto:jude@jellywx.com">Email me</a>
<br>
<span class="icon"><i class="fab fa-monero"></i></span>
<strong>XMR</strong> 49oP6DzzEzdC6VkxE6hGoLSRw5awvEx5cGGXH327tck15LWk8SFgLUAjS2yZqssMWN3JPRraR68ApHi4GGSLtCDmLbF7euH
</p>
</div>
</footer>

View File

@ -244,7 +244,7 @@
<ul class="menu-list">
<li>
<a class="show-modal" data-modal="chooseTimezoneModal">
<span class="icon"><i class="fas fa-map-pin"></i></span> Timezone
<span class="icon"><i class="fas fa-map-marked"></i></span> Timezone
</a>
</li>
</ul>
@ -279,7 +279,7 @@
</p>
<a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
<p class="is-size-4">
Add to Server <span class="icon"><i class="fas fa-chevron-right"></i></span>
<span>Add to Server</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
</p>
</a>
</div>

View File

@ -9,7 +9,7 @@
<br>
<div class="field">
<div class="columns">
<div class="columns is-mobile">
<div class="column">
<strong>Reminders</strong>
</div>
@ -30,8 +30,8 @@
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll">
<option value="" selected>Expand/Collapse...</option>
<select id="expandAll" style="width: 60px">
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>