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

56
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.
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. */
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;
}
}
@@ -11507,11 +11509,12 @@ body.layout-legacy .navbar-header {
}
/* layout-modern: restore sidebar right-padding AND block-flow for generic pages
(profile, settings, subscriptions, etc.) — identical behaviour to layout-legacy.
Specialized pages (index, item, meme) manage their own layout, so exclude them. */
@media (min-width: 1200px) {
(profile, settings, subscriptions, tags, etc.) — identical behaviour to layout-legacy.
Specialized pages (index, item, meme) manage their own layout, so exclude them.
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)) {
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)) {
@@ -13080,10 +13083,8 @@ body.layout-modern .tag-ac-input {
Full-height chat layout — conversation page
══════════════════════════════════════════════════════════ */
/* ── DESKTOP (> 768px): same pattern as the sidebar ───────
position:fixed takes it out of flow entirely — no pagewrapper
padding, no body scroll involvement, just viewport-anchored. */
@media (min-width: 769px) {
/* ── UNIVERSAL: position:fixed takes it out of flow entirely ───────
No pagewrapper padding, no body scroll involvement, just viewport-anchored. */
.messages-convo-page {
position: fixed !important;
top: var(--navbar-h, 50px) !important;
@@ -13096,26 +13097,21 @@ body.layout-modern .tag-ac-input {
transition: right 0.3s ease-in-out;
}
@media (min-width: 1200px) {
/* Desktop: 300px reserved space (both layouts) */
@media (min-width: 1000px) {
body:not(.sidebar-right-hidden) .messages-convo-page {
right: 300px !important;
}
body.layout-modern:not(.sidebar-right-hidden) .messages-convo-page {
right: 400px !important;
}
/* Attached Mobile: mobile sidebar width reserved space */
@media (min-width: 600px) and (max-width: 999px) {
body:not(.sidebar-right-hidden) .messages-convo-page {
right: min(280px, 80vw) !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 ─────────
Works on mobile; locks the pagewrapper to the viewport. */
@media (max-width: 768px) {
/* Kill the pagewrapper min-height and overflow so body doesn't scroll behind it */
html:has(.messages-convo-page),
body:has(.messages-convo-page) {
height: 100%;
@@ -13123,16 +13119,9 @@ body.layout-modern .tag-ac-input {
}
body:has(.messages-convo-page) .pagewrapper {
position: fixed;
top: var(--navbar-h, 50px);
left: 0;
right: 0;
bottom: 0;
min-height: 0 !important;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
padding: 0 !important;
}
/* ── Shared: convo pane is a flex column ──────────────────
@@ -13142,7 +13131,8 @@ body.layout-modern .tag-ac-input {
overflow: hidden;
padding: 0;
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;
display: flex;
flex-direction: column;

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

@@ -13,8 +13,9 @@
/* Meme Creator Styles */
.meme-creator-container {
box-sizing: border-box !important;
padding: 20px;
max-width: 1200px;
max-width: 100%;
width: 100%;
margin: 0 auto;
position: relative;
@@ -238,22 +239,49 @@ canvas#memeCanvas {
color: var(--white, #fff);
}
/* Mobile Stacking - Simple 2-Row Layout */
/* Mobile Stacking - Clean Flexbox Column Layout */
@media (max-width: 950px) {
.meme-editor-layout {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 0.6fr auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px;
}
.meme-controls {
box-sizing: border-box !important;
width: 100% !important;
grid-row: 2;
max-width: 100% !important;
overflow: visible !important;
}
.canvas-wrapper {
box-sizing: border-box !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;
overflow: visible !important;
height: auto !important;
@@ -294,20 +322,19 @@ canvas#memeCanvas {
/* Sidebar space reservation for meme pages */
.meme-layout-wrapper {
box-sizing: border-box !important;
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 */
.meme-layout-wrapper {
body:not(.sidebar-right-hidden) .meme-layout-wrapper {
padding-right: 300px;
}
}
/* Collapse reserved space when sidebar is hidden */
body.sidebar-right-hidden .meme-layout-wrapper {
padding-right: 0;
}
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).
const hasDedicatedWrapper = !!(
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
? '.index-layout-wrapper, .pagination-container-fluid'
? '.index-layout-wrapper, .meme-layout-wrapper, .messages-convo-page, .pagination-container-fluid'
: '.pagination-container-fluid, .pagewrapper';
return document.querySelectorAll(sel);
};
@@ -6737,9 +6739,15 @@ window.cancelAnimFrame = (function () {
if (animateWrappers) {
wrappers.forEach(w => {
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';
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');
});
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; }
/* 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 */
html, body, .pagewrapper, #main, .layout-modern react-wrapper, .layout-legacy react-wrapper {
height: auto !important;