kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

closing #13

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-16 18:39:30 +02:00
parent b96d97e213
commit 589fa84847
8 changed files with 182 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
public/s/css/f0ckm.css
View File

@@ -1724,7 +1724,8 @@ body.sidebar-right-hidden .global-sidebar-right {
display: grid;
grid-template-rows: auto auto auto;
justify-items: center;
align-content: baseline; /*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
align-content: baseline;
/*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
overflow: visible;
padding: 20px;
min-height: 0;
@@ -1997,8 +1998,13 @@ body.sidebar-right-hidden .global-sidebar-right {
/* ─── Sidebar Skeleton Loader ─────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: -300px 0; }
100% { background-position: 300px 0; }
0% {
background-position: -300px 0;
}
100% {
background-position: 300px 0;
}
}
.sidebar-skeleton-item {
@@ -2028,12 +2034,10 @@ body.sidebar-right-hidden .global-sidebar-right {
/* Shared shimmer base */
.skeleton-avatar,
.skeleton-line {
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 40%,
rgba(255,255,255,0.04) 80%
);
rgba(255, 255, 255, 0.04) 80%);
background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
border-radius: 3px;
@@ -2050,22 +2054,51 @@ body.sidebar-right-hidden .global-sidebar-right {
height: 10px;
}
.skeleton-name { width: 55%; }
.skeleton-time { width: 35%; height: 8px; opacity: 0.65; }
.skeleton-name {
width: 55%;
}
.skeleton-text-long { width: 90%; margin-bottom: 6px; }
.skeleton-text-medium { width: 70%; margin-bottom: 6px; }
.skeleton-text-short { width: 45%; margin-bottom: 0; }
.skeleton-time {
width: 35%;
height: 8px;
opacity: 0.65;
}
.skeleton-text-long {
width: 90%;
margin-bottom: 6px;
}
.skeleton-text-medium {
width: 70%;
margin-bottom: 6px;
}
.skeleton-text-short {
width: 45%;
margin-bottom: 0;
}
/* Stagger the shimmer phase so each item feels alive individually (cycles every 5) */
.sidebar-skeleton-item:nth-child(5n+2) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+2) .skeleton-line { animation-delay: 0.2s; }
.sidebar-skeleton-item:nth-child(5n+2) .skeleton-line {
animation-delay: 0.2s;
}
.sidebar-skeleton-item:nth-child(5n+3) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+3) .skeleton-line { animation-delay: 0.4s; }
.sidebar-skeleton-item:nth-child(5n+3) .skeleton-line {
animation-delay: 0.4s;
}
.sidebar-skeleton-item:nth-child(5n+4) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+4) .skeleton-line { animation-delay: 0.6s; }
.sidebar-skeleton-item:nth-child(5n+4) .skeleton-line {
animation-delay: 0.6s;
}
.sidebar-skeleton-item:nth-child(5n+5) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+5) .skeleton-line { animation-delay: 0.8s; }
.sidebar-skeleton-item:nth-child(5n+5) .skeleton-line {
animation-delay: 0.8s;
}
/* Mobile Stacking for Legacy Mode (max-width: 999px) */
@media (max-width: 999px) {
@@ -3677,7 +3710,8 @@ ul.navbar-nav li.nav-item {
content: "" !important;
} */
.fa-solid.fa-angle-up, .fa-regular.fa-image {
.fa-solid.fa-angle-up,
.fa-regular.fa-image {
margin-right: 5px;
}
@@ -4344,6 +4378,26 @@ span.placeholder {
object-fit: contain;
}
/* Inline image expansion */
.embed-responsive.is-expanded::before {
display: none !important;
}
.embed-responsive.is-expanded {
height: auto !important;
overflow: visible !important;
}
.embed-responsive.is-expanded .embed-responsive-image,
.embed-responsive.is-expanded a#elfe,
.embed-responsive.is-expanded img#f0ck-image {
position: static !important;
height: auto !important;
width: auto !important;
max-width: 100% !important;
max-height: 100% !important;
}
a#elfe {
height: 100%;
width: 100%;
@@ -6292,8 +6346,10 @@ button#togglebg {
}
.fader-in {
/*opacity: 0.4 !important;*/ /* default */
opacity: 0.1 !important; /* darker */
/*opacity: 0.4 !important;*/
/* default */
opacity: 0.1 !important;
/* darker */
}
.fader-out {
@@ -6320,19 +6376,22 @@ button#togglebg {
/* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */
div.posts>a.lazy-thumb:not(.loaded) {
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 40%,
rgba(255,255,255,0.04) 80%
);
rgba(255, 255, 255, 0.04) 80%);
background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
/* Stagger shimmer phases so items feel alive individually */
div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+2) { animation-delay: 0.2s; }
div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+3) { animation-delay: 0.4s; }
div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+2) {
animation-delay: 0.2s;
}
div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+3) {
animation-delay: 0.4s;
}
/* Make individual item entry subtler and faster for infinite scroll */
@@ -13668,9 +13727,11 @@ body.scroller-active #gchat-reopen-bubble {
}
}
#nav-meme-link, #nav-upload-link {
#nav-meme-link,
#nav-upload-link {
white-space: nowrap;
}
/* --- Admin IP History Styles --- */
.admin-ips-table {
width: 100%;
@@ -13678,6 +13739,7 @@ body.scroller-active #gchat-reopen-bubble {
border-spacing: 0 8px;
color: var(--white);
}
.admin-ips-table th {
padding: 15px;
text-align: left;
@@ -13687,19 +13749,24 @@ body.scroller-active #gchat-reopen-bubble {
color: #888;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-ips-table tr {
transition: all 0.2s ease;
}
.admin-ips-table tbody tr {
background: rgba(255, 255, 255, 0.02);
}
.admin-ips-table tbody tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.admin-ips-table td {
padding: 15px;
vertical-align: middle;
}
.ip-badge {
font-family: monospace;
padding: 4px 10px;
@@ -13712,10 +13779,12 @@ body.scroller-active #gchat-reopen-bubble {
display: inline-block;
max-width: 100%;
}
.date-cell {
font-size: 0.85rem;
color: #aaa;
}
.date-label {
display: block;
font-size: 0.7rem;

8
public/s/js/f0ckm.js
View File

@@ -7822,8 +7822,16 @@ document.addEventListener('DOMContentLoaded', () => {
const elfe = e.target.closest('#elfe');
if (elfe) {
e.preventDefault();
const expandOnClick = localStorage.getItem('imageExpandOnClick') !== 'false';
if (expandOnClick) {
const wrapper = elfe.closest('.embed-responsive');
if (wrapper) {
wrapper.classList.toggle('is-expanded');
}
} else {
openImageModal(elfe.href);
}
}
});
};

8
public/s/js/settings.js
View File

@@ -711,6 +711,14 @@
});
}
const imageExpandToggle = document.getElementById('image_expand_toggle');
if (imageExpandToggle) {
imageExpandToggle.checked = localStorage.getItem('imageExpandOnClick') !== 'false';
imageExpandToggle.addEventListener('change', () => {
localStorage.setItem('imageExpandOnClick', imageExpandToggle.checked);
});
}
// Background Blur Toggle
const backgroundToggle = document.getElementById('show_background_toggle');
if (backgroundToggle) {

2
src/inc/locales/de.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Verhindert die automatische Wiedergabe von Videos und Audio",
"disable_swiping": "Wischen deaktivieren",
"disable_swiping_hint": "Navigation per Wischen auf Mobilgeräten deaktivieren",
"image_expand_on_click": "Bilder beim Klicken inline erweitern",
"image_expand_on_click_hint": "Anstatt das Scroll-Zoom-Modal zu öffnen, wird ein Bild beim Klicken innerhalb der Seite auf volle Größe erweitert.",
"enable_bg_blur": "Hintergrundunschärfe aktivieren",
"enable_bg_blur_hint": "Unscharfen Hintergrund bei Beiträgen anzeigen",
"render_emojis": "Emojis in Zitatantworten anzeigen",

2
src/inc/locales/en.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Prevent videos and audio from playing automatically",
"disable_swiping": "Disable Swiping",
"disable_swiping_hint": "Disable swipe-to-navigate on mobile devices",
"image_expand_on_click": "Expand images inline on click",
"image_expand_on_click_hint": "Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.",
"enable_bg_blur": "Enable Background blur",
"enable_bg_blur_hint": "Show blurred background on items",
"render_emojis": "Render emojis in quote replies",

2
src/inc/locales/nl.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Voorkomen dat video's en audio automatisch worden afgespeeld",
"disable_swiping": "Swipen uitschakelen",
"disable_swiping_hint": "Swipe-to-navigate uitschakelen op mobiele apparaten",
"image_expand_on_click": "Afbeeldingen inline vergroten bij klikken",
"image_expand_on_click_hint": "In plaats van de scroll-zoom-modal te openen, wordt een afbeelding bij klikken vergroot tot volledige grootte binnen de pagina.",
"enable_bg_blur": "Achtergrondvervaging inschakelen",
"enable_bg_blur_hint": "Vervaagde achtergrond tonen bij items",
"render_emojis": "Emoji's weergeven in antwoorden",

2
src/inc/locales/zange.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Vermeiden Sie das automatische Abspielen von Videos und Tondateien",
"disable_swiping": "Wischen deaktivieren",
"disable_swiping_hint": "Deaktivieren der Wisch-Navigation auf Mobilgeräten",
"image_expand_on_click": "Bildli beim Klickle inline uffblähe",
"image_expand_on_click_hint": "Anstatt dat Scroll-Zoom-Moped aufzumache, wird n Bild beim Klickle uff volle Größ im Bereich uffgepumpt.",
"enable_bg_blur": "Hintergrundunschärfe aktivieren",
"enable_bg_blur_hint": "Gefalteten Hintergrund auf Elementen anzeigen",
"render_emojis": "Emojis in Zitatantworten darstellen",

7
views/settings.html
View File

@@ -110,6 +110,13 @@
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.scroll_nav_hint') }}</small>
</div>
<div class="setting-item" style="margin-bottom: 15px;">
<label for="image_expand_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="image_expand_toggle">
<span>{{ t('settings.image_expand_on_click') || 'Expand images inline on click' }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.' }}</small>
</div>
<div class="setting-item" style="margin-top: 15px;">
<label for="disable_autoplay_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;">