mirror/Wallos
1
0
Fork 0
mirror of https://github.com/ellite/Wallos.git synced 2026-07-31 18:25:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve menu navigation on grid mode

Browse Source
This commit is contained in:
Miguel Ribeiro
2026-07-13 15:15:19 +02:00
parent 6e26ab9f11
commit fba35d33bd
2 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/subscriptions.js
View File

@@ -325,6 +325,10 @@ function searchLogo() {
if (logoSearchBackdrop) {
logoSearchBackdrop.classList.add("is-open");
}
const subscriptionForm = document.querySelector("#subscription-form");
if (subscriptionForm) {
subscriptionForm.classList.add("scroll-locked");
}
const logoSearchTitle = document.querySelector("#logo-search-title");
if (logoSearchTitle) {
const baseTitle = logoSearchTitle.dataset.title;
@@ -427,6 +431,10 @@ function closeLogoSearch() {
if (logoSearchBackdrop) {
logoSearchBackdrop.classList.remove("is-open");
}
const subscriptionForm = document.querySelector("#subscription-form");
if (subscriptionForm) {
subscriptionForm.classList.remove("scroll-locked");
}
const logoSearchTitle = document.querySelector("#logo-search-title");
if (logoSearchTitle) {
logoSearchTitle.textContent = logoSearchTitle.dataset.title;

40
styles/styles.css
View File

@@ -1921,6 +1921,13 @@ button.dark-theme-button i {
overflow-y: auto;
width: 90%;
display: none;
scrollbar-width: none;
-ms-overflow-style: none;
}
.subscription-form::-webkit-scrollbar,
.subscription-modal::-webkit-scrollbar {
display: none;
}
.subscription-form.is-open,
@@ -1928,6 +1935,10 @@ button.dark-theme-button i {
display: block;
}
.subscription-form.scroll-locked {
overflow: hidden;
}
.subscription-form h3,
.subscription-modal h3 {
padding-bottom: 15px;
@@ -4044,7 +4055,7 @@ body.details-open {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
gap: 6px;
position: absolute;
inset: 0;
transform: rotateY(180deg);
@@ -4052,7 +4063,7 @@ body.details-open {
backface-visibility: hidden;
background-color: var(--box-background-color);
border-radius: inherit;
padding: 14px 12px;
padding: 12px 10px;
box-sizing: border-box;
overflow-y: auto;
}
@@ -4071,14 +4082,14 @@ body.details-open {
align-items: center;
gap: 10px;
width: 100%;
border: none;
background-color: transparent;
border: 1px solid var(--input-border-color);
background-color: var(--input-background-color);
color: var(--text-color);
font-family: Barlow, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
font-weight: 500;
font-size: 15px;
font-weight: 600;
text-align: start;
padding: 10px 12px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
box-sizing: border-box;
@@ -4086,17 +4097,19 @@ body.details-open {
.subscription-back .back-action:hover {
background-color: var(--surface-hover);
border-color: var(--main-color);
}
.subscription-back .back-action>i {
color: var(--main-color);
font-size: 14px;
font-size: 15px;
width: 18px;
text-align: center;
}
.subscription-back .back-action.delete:hover {
background-color: rgba(var(--error-color-rgb), 0.1);
border-color: var(--error-color);
}
.subscription-back .back-action.delete:hover>i {
@@ -4134,14 +4147,19 @@ body.details-open {
@media (max-width: 768px) {
.subscriptions.grid-view .subscription-back {
padding: 10px 8px;
padding: 8px;
gap: 4px;
}
.subscription-back .back-action {
font-size: 13px;
padding: 7px 10px;
font-size: 14px;
padding: 6px 10px;
gap: 8px;
}
.subscription-back .back-action>i {
font-size: 14px;
}
}
.stats-section {