joshuacoles/wallos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix subscription form on short displays

Browse Source
This commit is contained in:
ellite 2024-01-26 18:04:15 +01:00
parent 43ddc8754c
commit ad9afb79fc
3 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
about.php
View File

@ -9,7 +9,7 @@
<h2><?= translate('about_and_credits', $i18n) ?></h2> <h2><?= translate('about_and_credits', $i18n) ?></h2>
</header> </header>
<div class="credits-list"> <div class="credits-list">
<p>Wallos v1.2.0</p> <p>Wallos v1.2.1</p>
<p><?= translate('license', $i18n) ?>: <p><?= translate('license', $i18n) ?>:
<span> <span>
GPLv3 GPLv3

6
scripts/dashboard.js
View File

@ -85,6 +85,8 @@ function fillEditFormFields(subscription) {
function openEditSubscription(event, id) { function openEditSubscription(event, id) {
event.stopPropagation(); event.stopPropagation();
const body = document.querySelector('body');
body.classList.add('no-scroll');
const url = `endpoints/subscription/get.php?id=${id}`; const url = `endpoints/subscription/get.php?id=${id}`;
fetch(url) fetch(url)
.then((response) => { .then((response) => {
@ -111,11 +113,15 @@ function addSubscription() {
resetForm(); resetForm();
const modal = document.getElementById('subscription-form'); const modal = document.getElementById('subscription-form');
modal.classList.add("is-open"); modal.classList.add("is-open");
const body = document.querySelector('body');
body.classList.add('no-scroll');
} }
function closeAddSubscription() { function closeAddSubscription() {
const modal = document.getElementById('subscription-form'); const modal = document.getElementById('subscription-form');
modal.classList.remove("is-open"); modal.classList.remove("is-open");
const body = document.querySelector('body');
body.classList.remove('no-scroll');
resetForm(); resetForm();
} }

9
styles/styles.css
View File

@ -6,6 +6,10 @@ body {
color: #202020; color: #202020;
} }
body.no-scroll {
overflow-y: hidden;
}
h2, h3 { h2, h3 {
font-weight: 500; font-weight: 500;
} }
@ -821,13 +825,15 @@ input[type="checkbox"] {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
z-index: 3; z-index: 3;
max-width: 800px; max-width: 800px;
max-height: calc(100vh - 34px);
overflow: auto;
overflow-y: auto;
width: 90%; width: 90%;
display: none; display: none;
} }
@ -853,6 +859,7 @@ input[type="checkbox"] {
@media (max-width: 768px) { @media (max-width: 768px) {
.subscription-form { .subscription-form {
width: 100%; width: 100%;
max-height: 100vh;
} }
.subscription-form .buttons input { .subscription-form .buttons input {