better filter visualization
This commit is contained in:
@@ -14390,3 +14390,98 @@ body.scroller-active #gchat-reopen-bubble {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* Filter badge style on navbar */
|
||||
.filter-badge {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
font-size: 6px;
|
||||
font-weight: 796;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
font-family: var(--font, monospace);
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-badge-sfw {
|
||||
background: var(--badge-sfw, #68a728);
|
||||
}
|
||||
|
||||
.filter-badge-nsfw {
|
||||
background: var(--badge-nsfw, #E10DC3);
|
||||
}
|
||||
|
||||
.filter-badge-nsfl {
|
||||
background: var(--badge-nsfl, #660000);
|
||||
}
|
||||
|
||||
.filter-badge-unt {
|
||||
background: #ff9800;
|
||||
/* Amber/Orange */
|
||||
}
|
||||
|
||||
.filter-badge-all {
|
||||
background: #555;
|
||||
/* Slate grey */
|
||||
}
|
||||
|
||||
/* Dynamic MIME dots styles */
|
||||
.filter-mime-dots {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
margin-left: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mime-dot {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
|
||||
animation: dot-fade-in 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes dot-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mime-dot-video {
|
||||
background-color: #00bcd4;
|
||||
/* Cyan */
|
||||
box-shadow: 0 0 3px #00bcd4;
|
||||
}
|
||||
|
||||
.mime-dot-image {
|
||||
background-color: #2ecc71;
|
||||
/* Green */
|
||||
box-shadow: 0 0 3px #2ecc71;
|
||||
}
|
||||
|
||||
.mime-dot-audio {
|
||||
background-color: #e84393;
|
||||
/* Pink */
|
||||
box-shadow: 0 0 3px #e84393;
|
||||
}
|
||||
|
||||
.mime-dot-flash {
|
||||
background-color: #f1c40f;
|
||||
/* Yellow */
|
||||
box-shadow: 0 0 3px #f1c40f;
|
||||
}
|
||||
@@ -274,8 +274,88 @@ window.cancelAnimFrame = (function () {
|
||||
});
|
||||
});
|
||||
|
||||
if (window.updateFilterBadge) window.updateFilterBadge();
|
||||
};
|
||||
window.updateMimeLabel = updateMimeLabel;
|
||||
|
||||
const updateFilterBadge = () => {
|
||||
const badge = document.getElementById('nav-filter-badge');
|
||||
if (!badge) return;
|
||||
|
||||
let activeMode = 0;
|
||||
if (window.activeMode !== undefined) {
|
||||
activeMode = window.activeMode;
|
||||
} else {
|
||||
const cookieMode = document.cookie.split('; ').find(row => row.startsWith('mode='));
|
||||
if (cookieMode) {
|
||||
activeMode = +cookieMode.split('=')[1];
|
||||
} else if (window.f0ckSession && window.f0ckSession.mode !== undefined) {
|
||||
activeMode = window.f0ckSession.mode;
|
||||
}
|
||||
}
|
||||
|
||||
let hasMimeFilter = false;
|
||||
let mimeStr = '';
|
||||
const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
|
||||
if (cookieMime) {
|
||||
mimeStr = cookieMime.split('=')[1] || '';
|
||||
}
|
||||
const selectedMimes = mimeStr ? mimeStr.split(',').filter(m => ['video', 'audio', 'image', 'flash'].includes(m)) : [];
|
||||
if (selectedMimes.length > 0) {
|
||||
hasMimeFilter = true;
|
||||
}
|
||||
|
||||
let badgeText = '';
|
||||
let badgeClass = 'filter-badge';
|
||||
|
||||
switch (activeMode) {
|
||||
case 0:
|
||||
badgeText = 'SFW';
|
||||
badgeClass += ' filter-badge-sfw';
|
||||
break;
|
||||
case 1:
|
||||
badgeText = 'NSFW';
|
||||
badgeClass += ' filter-badge-nsfw';
|
||||
break;
|
||||
case 4:
|
||||
badgeText = 'NSFL';
|
||||
badgeClass += ' filter-badge-nsfl';
|
||||
break;
|
||||
case 2:
|
||||
badgeText = 'UNT';
|
||||
badgeClass += ' filter-badge-unt';
|
||||
break;
|
||||
case 3:
|
||||
badgeText = 'ALL';
|
||||
badgeClass += ' filter-badge-all';
|
||||
break;
|
||||
default:
|
||||
badgeText = 'SFW';
|
||||
badgeClass += ' filter-badge-sfw';
|
||||
}
|
||||
|
||||
badge.className = badgeClass;
|
||||
badge.innerHTML = badgeText;
|
||||
|
||||
if (hasMimeFilter) {
|
||||
const dotsContainer = document.createElement('span');
|
||||
dotsContainer.className = 'filter-mime-dots';
|
||||
selectedMimes.forEach(mime => {
|
||||
const dot = document.createElement('span');
|
||||
dot.className = `mime-dot mime-dot-${mime}`;
|
||||
dot.title = mime.charAt(0).toUpperCase() + mime.slice(1);
|
||||
dotsContainer.appendChild(dot);
|
||||
});
|
||||
badge.appendChild(dotsContainer);
|
||||
}
|
||||
|
||||
badge.style.display = 'inline-flex';
|
||||
};
|
||||
window.updateFilterBadge = updateFilterBadge;
|
||||
|
||||
document.addEventListener('f0ck:modeChanged', () => {
|
||||
updateFilterBadge();
|
||||
});
|
||||
window.randomizeLogo = () => {
|
||||
const logoArr = window.f0ckBrandImages;
|
||||
if (!logoArr || !logoArr.length) return;
|
||||
@@ -4548,6 +4628,7 @@ window.cancelAnimFrame = (function () {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initSearch();
|
||||
initExcludedTagsModal();
|
||||
if (window.updateFilterBadge) window.updateFilterBadge();
|
||||
});
|
||||
// </search-overlay>
|
||||
|
||||
|
||||
@@ -121,7 +121,22 @@
|
||||
<a href="/settings" title="Settings" class="desktop-only"><i class="fa-solid fa-gear"></i></a>
|
||||
|
||||
<!-- Filter -->
|
||||
<a href="#" id="nav-filter-btn" title="Filter"><i class="fa-solid fa-filter"></i></a>
|
||||
<a href="#" id="nav-filter-btn" title="Filter" style="position: relative; display: inline-flex; align-items: center; justify-content: center;">
|
||||
<i class="fa-solid fa-filter"></i>
|
||||
@if(session.mode == 0)
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
|
||||
@elseif(session.mode == 1)
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-nsfw">NSFW</span>
|
||||
@elseif(session.mode == 4)
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-nsfl">NSFL</span>
|
||||
@elseif(session.mode == 2)
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-unt">UNT</span>
|
||||
@elseif(session.mode == 3)
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-all">ALL</span>
|
||||
@else
|
||||
<span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<!-- Logout -->
|
||||
<a href="/logout" title="Logout" class="desktop-only"><i class="fa-solid fa-right-from-bracket"></i></a>
|
||||
|
||||
Reference in New Issue
Block a user