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

banner stuff

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-16 22:46:25 +02:00
parent 9608398a8e
commit 353fc382de
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13903,8 +13903,8 @@ i.iconset#a_oc {
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--author-banner, none); background-image: var(--author-banner, none);
background-size: cover; background-size: var(--author-banner-size, cover);
background-position: center; background-position: var(--author-banner-position, center);
opacity: 0.3; opacity: 0.3;
z-index: -1; z-index: -1;
border-radius: inherit; border-radius: inherit;

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

@@ -387,7 +387,7 @@
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.className = 'banner-crop-canvas'; canvas.className = 'banner-crop-canvas';
canvas.width = 400; canvas.width = 400;
canvas.height = 140; canvas.height = 120;
canvasWrapper.appendChild(canvas); canvasWrapper.appendChild(canvas);
const controls = document.createElement('div'); const controls = document.createElement('div');
@@ -450,7 +450,7 @@
const clamp = (val, min, max) => Math.min(Math.max(val, min), max); const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const draw = () => { const draw = () => {
ctx.clearRect(0, 0, 400, 140); ctx.clearRect(0, 0, 400, 120);
ctx.drawImage(img, panX, panY, img.naturalWidth * zoom, img.naturalHeight * zoom); ctx.drawImage(img, panX, panY, img.naturalWidth * zoom, img.naturalHeight * zoom);
// Update hint with live coords/zoom // Update hint with live coords/zoom
@@ -460,7 +460,7 @@
const getBounds = (z) => { const getBounds = (z) => {
return { return {
minX: 400 - img.naturalWidth * z, minX: 400 - img.naturalWidth * z,
minY: 140 - img.naturalHeight * z minY: 120 - img.naturalHeight * z
}; };
}; };
@@ -603,7 +603,7 @@
confirmBtn.addEventListener('click', () => { confirmBtn.addEventListener('click', () => {
// Target output dimensions (3x the preview for high-res) // Target output dimensions (3x the preview for high-res)
const outW = 1200; const outW = 1200;
const outH = 420; const outH = 360;
const outCanvas = document.createElement('canvas'); const outCanvas = document.createElement('canvas');
outCanvas.width = outW; outCanvas.width = outW;
outCanvas.height = outH; outCanvas.height = outH;
@@ -688,7 +688,7 @@
const newDiv = document.createElement('div'); const newDiv = document.createElement('div');
newDiv.id = 'banner-preview'; newDiv.id = 'banner-preview';
newDiv.className = 'banner-preview-img'; newDiv.className = 'banner-preview-img';
newDiv.style.cssText = `width:100%;aspect-ratio:400/140;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/${res.banner_file}?t=${Date.now()}');background-size:${payload.banner_size};background-position:${payload.banner_position};background-repeat:no-repeat;`; newDiv.style.cssText = `width:100%;aspect-ratio:400/120;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/${res.banner_file}?t=${Date.now()}');background-size:${payload.banner_size};background-position:${payload.banner_position};background-repeat:no-repeat;`;
a.appendChild(newDiv); a.appendChild(newDiv);
bannerPreview.replaceWith(a); bannerPreview.replaceWith(a);
} else { } else {