lucasw89/KefinTweaks
1
0 Fork 0
mirror of https://github.com/ranaldsgift/KefinTweaks.git synced 2026-11-05 15:52:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve home screen category buttons on desktop and mobile

Browse Source
This commit is contained in:
HighImKevin committed 2026-09-26 08:15:40 -04:00
1 parent 98a3e8fbfd
commit c0c5c456f4
2 files changed
+102 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scripts/homeScreen.css
+77 -11
View File
@@ -347,9 +347,11 @@ body[data-seasonal-background="true"]:has(.homePage:not(.hide))
opacity: 0.18;
transition: opacity 0.2s ease;
}
.kefin-home-chrome:hover,
.kefin-home-chrome:focus-within {
opacity: 1;
@media (hover: hover) and (pointer: fine) {
.kefin-home-chrome:hover,
.kefin-home-chrome:focus-within {
opacity: 1;
}
}
.kefin-home-chrome.hide,
#kefin-home-category-rail.hide,
@@ -395,17 +397,32 @@ html:not([data-active-page="home"]) #kefin-home-create-section-btn {
pointer-events: auto;
display: flex;
}
#kefin-home-category-rail .kefin-home-category-rail:hover,
#kefin-home-category-rail .kefin-home-category-rail:focus-within {
opacity: 1;
background: #0f0f0f !important;
border-radius: 0 25px 25px 0;
box-shadow: 1px 0px 5px -1px black;
@media (hover: hover) and (pointer: fine) {
#kefin-home-category-rail .kefin-home-category-rail:hover,
#kefin-home-category-rail .kefin-home-category-rail:focus-within {
opacity: 1;
background: #0f0f0f !important;
border-radius: 0 25px 25px 0;
box-shadow: 1px 0px 5px -1px black;
}
}
.kefin-home-category-item {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
min-width: 0;
}
.kefin-home-category-btn {
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.75;
-webkit-tap-highlight-color: transparent;
}
.kefin-home-category-btn.is-active {
.kefin-home-category-btn.is-active,
.kefin-home-category-item.is-active .kefin-home-category-btn {
opacity: 1;
color: var(--theme-primary-color, #00a4dc);
background: rgba(0, 164, 220, 0.18);
@@ -414,6 +431,22 @@ html:not([data-active-page="home"]) #kefin-home-create-section-btn {
font-size: 1.35rem;
top: unset !important;
}
.kefin-home-category-btn-label {
display: none;
font-size: 0.65rem;
line-height: 1.1;
font-weight: 500;
letter-spacing: 0.01em;
max-width: 4.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
text-align: center;
}
.kefin-home-category-item.is-active .kefin-home-category-btn-label {
color: var(--theme-primary-color, #00a4dc);
}
@media (max-width: 899px) {
#kefin-home-category-rail .kefin-home-category-rail {
@@ -437,6 +470,39 @@ html:not([data-active-page="home"]) #kefin-home-create-section-btn {
transition:
transform 0.25s ease,
opacity 0.25s ease;
background: var(--jf-palette-AppBar-darkBg, var(--AppBar-background));
}
#kefin-home-category-rail .kefin-home-category-rail:hover,
#kefin-home-category-rail .kefin-home-category-rail:focus-within {
opacity: 1;
background: var(--jf-palette-AppBar-darkBg, var(--AppBar-background)) !important;
border-radius: 0;
box-shadow: 1px 1px 1px 1px #fff !important;
}
.kefin-home-category-btn-label {
display: block;
}
.kefin-home-category-btn:hover,
.kefin-home-category-btn:focus,
.kefin-home-category-btn:focus-visible,
.kefin-home-category-btn:active {
opacity: 0.75;
background: transparent;
color: inherit;
}
.kefin-home-category-btn.is-active,
.kefin-home-category-btn.is-active:hover,
.kefin-home-category-btn.is-active:focus,
.kefin-home-category-btn.is-active:focus-visible,
.kefin-home-category-btn.is-active:active,
.kefin-home-category-item.is-active .kefin-home-category-btn,
.kefin-home-category-item.is-active .kefin-home-category-btn:hover,
.kefin-home-category-item.is-active .kefin-home-category-btn:focus,
.kefin-home-category-item.is-active .kefin-home-category-btn:focus-visible,
.kefin-home-category-item.is-active .kefin-home-category-btn:active {
opacity: 1;
color: var(--theme-primary-color, #00a4dc);
background: rgba(0, 164, 220, 0.18);
}
#kefin-home-category-rail.is-scroll-hidden .kefin-home-category-rail {
transform: translateY(100%);
@@ -448,7 +514,7 @@ html:not([data-active-page="home"]) #kefin-home-create-section-btn {
display: none !important;
}
.homePage:not(.hide) {
padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}
}
scripts/homeScreen3.js
+25 -13
View File
@@ -2042,8 +2042,11 @@
const rail = document.getElementById(HOME_CHROME_CATEGORY_RAIL_ID);
if (rail) {
rail.querySelectorAll('.kefin-home-category-btn').forEach((btn) => {
const active = btn.dataset.categoryId === next;
rail.querySelectorAll('.kefin-home-category-item').forEach((item) => {
const active = item.dataset.categoryId === next;
item.classList.toggle('is-active', active);
const btn = item.querySelector('.kefin-home-category-btn');
if (!btn) return;
btn.classList.toggle('is-active', active);
btn.classList.toggle('emby-tab-button-active', active);
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
@@ -2111,28 +2114,37 @@
inner.className = getCategoryRailNativeClasses();
inner.innerHTML = categories.map((cat) => {
const id = escapeHtmlChrome(cat.id);
const name = escapeHtmlChrome(cat.name || cat.id);
const rawName = typeof cat.name === 'string' ? cat.name.trim() : '';
const name = escapeHtmlChrome(rawName || cat.id);
const icon = escapeHtmlChrome(cat.icon || 'label');
const active = desiredCategory === cat.id;
const labelHtml = rawName
? `<span class="kefin-home-category-btn-label">${escapeHtmlChrome(rawName)}</span>`
: '';
return `
<button type="button"
class="paper-icon-button-light emby-button kefin-home-category-btn${active ? ' is-active emby-tab-button-active' : ''}"
data-category-id="${id}"
title="${name}"
aria-label="${name}"
aria-pressed="${active ? 'true' : 'false'}">
<span class="material-icons emby-button-foreground ${icon}" aria-hidden="true"></span>
</button>
<div class="kefin-home-category-item${active ? ' is-active' : ''}" data-category-id="${id}">
<button type="button"
class="paper-icon-button-light emby-button kefin-home-category-btn${active ? ' is-active emby-tab-button-active' : ''}"
data-category-id="${id}"
title="${name}"
aria-label="${name}"
aria-pressed="${active ? 'true' : 'false'}">
<span class="material-icons emby-button-foreground ${icon}" aria-hidden="true"></span>
</button>
${labelHtml}
</div>
`;
}).join('');
outer.appendChild(inner);
outer.addEventListener('click', (e) => {
const btn = e.target.closest('.kefin-home-category-btn');
const item = e.target.closest('.kefin-home-category-item');
const btn = item?.querySelector('.kefin-home-category-btn') || e.target.closest('.kefin-home-category-btn');
if (!btn) return;
e.preventDefault();
e.stopPropagation();
applyActiveHomeCategory(btn.dataset.categoryId || 'none');
applyActiveHomeCategory(btn.dataset.categoryId || item?.dataset.categoryId || 'none');
btn.blur();
});
document.body.appendChild(outer);