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

genki

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-23 20:42:49 +02:00
parent 7a4432277d
commit 3f149531da
4 changed files with 98 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2252,7 +2252,9 @@ body.layout-modern .global-sidebar-right {
/* layout-modern: force sidebar-right off-screen at ≤599px. /* layout-modern: force sidebar-right off-screen at ≤599px.
JS also adds sidebar-right-hidden, but this CSS rule is a reliable failsafe JS also adds sidebar-right-hidden, but this CSS rule is a reliable failsafe
that matches layout-legacy's always-hidden behavior at this width. */ that matches layout-legacy's always-hidden behavior at this width. */
body.layout-modern .item-sidebar-right { body.layout-modern .item-sidebar-right,
body.layout-modern .index-sidebar-right,
body.layout-modern .global-sidebar-right {
right: calc(-1 * min(280px, 80vw)) !important; right: calc(-1 * min(280px, 80vw)) !important;
} }
} }
@@ -11507,11 +11509,12 @@ body.layout-legacy .navbar-header {
} }
/* layout-modern: restore sidebar right-padding AND block-flow for generic pages /* layout-modern: restore sidebar right-padding AND block-flow for generic pages
(profile, settings, subscriptions, etc.) — identical behaviour to layout-legacy. (profile, settings, subscriptions, tags, etc.) — identical behaviour to layout-legacy.
Specialized pages (index, item, meme) manage their own layout, so exclude them. */ Specialized pages (index, item, meme) manage their own layout, so exclude them.
@media (min-width: 1200px) { Must be ≥1000px so the gap at 1000–1199px is covered. */
@media (min-width: 1000px) {
body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) { body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
padding-right: 400px; padding-right: 300px;
} }
body.layout-modern.sidebar-right-hidden>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) { body.layout-modern.sidebar-right-hidden>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
@@ -13080,59 +13083,45 @@ body.layout-modern .tag-ac-input {
Full-height chat layout — conversation page Full-height chat layout — conversation page
══════════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════════ */
/* ── DESKTOP (> 768px): same pattern as the sidebar ─────── /* ── UNIVERSAL: position:fixed takes it out of flow entirely ───────
position:fixed takes it out of flow entirely — no pagewrapper No pagewrapper padding, no body scroll involvement, just viewport-anchored. */
padding, no body scroll involvement, just viewport-anchored. */ .messages-convo-page {
@media (min-width: 769px) { position: fixed !important;
.messages-convo-page { top: var(--navbar-h, 50px) !important;
position: fixed !important; bottom: 0 !important;
top: var(--navbar-h, 50px) !important; left: 0 !important;
bottom: 0 !important; right: 0 !important;
left: 0 !important; z-index: 1;
right: 0 !important; display: flex !important;
z-index: 1; flex-direction: column !important;
display: flex !important; transition: right 0.3s ease-in-out;
flex-direction: column !important; }
transition: right 0.3s ease-in-out;
}
@media (min-width: 1200px) { /* Desktop: 300px reserved space (both layouts) */
body:not(.sidebar-right-hidden) .messages-convo-page { @media (min-width: 1000px) {
right: 300px !important; body:not(.sidebar-right-hidden) .messages-convo-page {
} right: 300px !important;
body.layout-modern:not(.sidebar-right-hidden) .messages-convo-page {
right: 400px !important;
}
}
/* Kill the layout-legacy pagewrapper min-height:100vh that causes body overflow */
body:has(.messages-convo-page) .pagewrapper {
min-height: 0 !important;
overflow: hidden;
} }
} }
/* ── MOBILE (≤ 768px): position:fixed pagewrapper ───────── /* Attached Mobile: mobile sidebar width reserved space */
Works on mobile; locks the pagewrapper to the viewport. */ @media (min-width: 600px) and (max-width: 999px) {
@media (max-width: 768px) { body:not(.sidebar-right-hidden) .messages-convo-page {
right: min(280px, 80vw) !important;
html:has(.messages-convo-page),
body:has(.messages-convo-page) {
height: 100%;
overflow: hidden;
} }
}
body:has(.messages-convo-page) .pagewrapper { /* Kill the pagewrapper min-height and overflow so body doesn't scroll behind it */
position: fixed; html:has(.messages-convo-page),
top: var(--navbar-h, 50px); body:has(.messages-convo-page) {
left: 0; height: 100%;
right: 0; overflow: hidden;
bottom: 0; }
overflow: hidden;
padding: 0; body:has(.messages-convo-page) .pagewrapper {
display: flex; min-height: 0 !important;
flex-direction: column; overflow: hidden;
} padding: 0 !important;
} }
/* ── Shared: convo pane is a flex column ────────────────── /* ── Shared: convo pane is a flex column ──────────────────
@@ -13142,7 +13131,8 @@ body.layout-modern .tag-ac-input {
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
max-width: 720px; max-width: 720px;
width: 100%; /* Removed width: 100% here because it overconstrains the fixed element
against left:0 and right:300px, causing negative margins and overlap. */
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

57
public/s/css/meme-creator.css
View File

@@ -13,8 +13,9 @@
/* Meme Creator Styles */ /* Meme Creator Styles */
.meme-creator-container { .meme-creator-container {
box-sizing: border-box !important;
padding: 20px; padding: 20px;
max-width: 1200px; max-width: 100%;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
@@ -238,22 +239,49 @@ canvas#memeCanvas {
color: var(--white, #fff); color: var(--white, #fff);
} }
/* Mobile Stacking - Simple 2-Row Layout */ /* Mobile Stacking - Clean Flexbox Column Layout */
@media (max-width: 950px) { @media (max-width: 950px) {
.meme-editor-layout { .meme-editor-layout {
display: grid !important; display: flex !important;
grid-template-columns: 1fr !important; flex-direction: column !important;
grid-template-rows: 0.6fr auto !important; align-items: center !important;
gap: 20px; gap: 20px;
} }
.meme-controls { .meme-controls {
box-sizing: border-box !important;
width: 100% !important; width: 100% !important;
grid-row: 2; max-width: 100% !important;
overflow: visible !important; overflow: visible !important;
} }
.canvas-wrapper { .canvas-wrapper {
box-sizing: border-box !important;
width: 100% !important; width: 100% !important;
grid-row: 1; max-width: 100% !important;
margin-bottom: 10px;
overflow: visible !important;
height: auto !important;
}
}
/* Stack early when sidebar is open (sidebar is 300px, so 950 + 300 = 1250px)
This prevents the canvas from shrinking too much when the sidebar takes space. */
@media (max-width: 1250px) {
body:not(.sidebar-right-hidden) .meme-editor-layout {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px;
}
body:not(.sidebar-right-hidden) .meme-controls {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
body:not(.sidebar-right-hidden) .canvas-wrapper {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 10px; margin-bottom: 10px;
overflow: visible !important; overflow: visible !important;
height: auto !important; height: auto !important;
@@ -294,20 +322,19 @@ canvas#memeCanvas {
/* Sidebar space reservation for meme pages */ /* Sidebar space reservation for meme pages */
.meme-layout-wrapper { .meme-layout-wrapper {
box-sizing: border-box !important;
width: 100%; width: 100%;
transition: padding-right 0.3s ease-in-out;
} }
@media (min-width: 1200px) { @media (min-width: 1000px) {
/* Reserve space for the fixed sidebar so content doesn't flow behind it */ /* Reserve space for the fixed sidebar so content doesn't flow behind it */
.meme-layout-wrapper { body:not(.sidebar-right-hidden) .meme-layout-wrapper {
padding-right: 300px; padding-right: 300px;
} }
/* Collapse reserved space when sidebar is hidden */
body.sidebar-right-hidden .meme-layout-wrapper {
padding-right: 0;
}
} }
/* Collapse reserved space when sidebar is hidden */
body.sidebar-right-hidden .meme-layout-wrapper {
padding-right: 0 !important;
}

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

@@ -6711,10 +6711,12 @@ window.cancelAnimFrame = (function () {
// get 300px snapped, making the grid 600px too narrow, then jumping back on settle). // get 300px snapped, making the grid 600px too narrow, then jumping back on settle).
const hasDedicatedWrapper = !!( const hasDedicatedWrapper = !!(
document.querySelector('.index-layout-wrapper') || document.querySelector('.index-layout-wrapper') ||
document.querySelector('.item-layout-container') document.querySelector('.item-layout-container') ||
document.querySelector('.meme-layout-wrapper') ||
document.querySelector('.messages-convo-page')
); );
const sel = hasDedicatedWrapper const sel = hasDedicatedWrapper
? '.index-layout-wrapper, .pagination-container-fluid' ? '.index-layout-wrapper, .meme-layout-wrapper, .messages-convo-page, .pagination-container-fluid'
: '.pagination-container-fluid, .pagewrapper'; : '.pagination-container-fluid, .pagewrapper';
return document.querySelectorAll(sel); return document.querySelectorAll(sel);
}; };
@@ -6737,9 +6739,15 @@ window.cancelAnimFrame = (function () {
if (animateWrappers) { if (animateWrappers) {
wrappers.forEach(w => { wrappers.forEach(w => {
const isPagination = w.classList.contains('pagination-container-fluid'); const isPagination = w.classList.contains('pagination-container-fluid');
const prop = isPagination ? 'right' : 'padding-right'; const isMessages = w.classList.contains('messages-convo-page');
const prop = (isPagination || isMessages) ? 'right' : 'padding-right';
const targetVal = isHidden ? sidebarWidth + 'px' : '0px'; const targetVal = isHidden ? sidebarWidth + 'px' : '0px';
w.style.setProperty('transition', isPagination ? `${prop} 0.3s ease-in-out` : 'none', 'important');
// Lightweight layouts (pagination, messages) animate smoothly.
// Heavy/reflow-intensive layouts snap instantly to avoid reflow lag.
const shouldAnimate = (isPagination || isMessages);
w.style.setProperty('transition', shouldAnimate ? `${prop} 0.3s ease-in-out` : 'none', 'important');
w.style.setProperty(prop, targetVal, 'important'); w.style.setProperty(prop, targetVal, 'important');
}); });
void sidebar.offsetWidth; // settle layout before sidebar transform begins void sidebar.offsetWidth; // settle layout before sidebar transform begins

2
views/meme-creator.html
View File

@@ -8,7 +8,7 @@
.meme-title { font-family: 'Impact', 'VCR', sans-serif; } .meme-title { font-family: 'Impact', 'VCR', sans-serif; }
/* NUCLEAR VISIBILITY RESET: Override any and all parent constraints for this page */ /* NUCLEAR VISIBILITY RESET: Override any and all parent constraints for this page */
@media (max-width: 950px) { @media (max-width: 1250px) {
/* Target all possible shell triggers */ /* Target all possible shell triggers */
html, body, .pagewrapper, #main, .layout-modern react-wrapper, .layout-legacy react-wrapper { html, body, .pagewrapper, #main, .layout-modern react-wrapper, .layout-legacy react-wrapper {
height: auto !important; height: auto !important;