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

fdas

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-16 16:39:37 +02:00
parent de7102ed03
commit 8dc0854de2
9 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8925,7 +8925,7 @@ span.badge.badge-current {
gap: 30px;
background: var(--metadata-bg);
border-radius: 8px;
margin-bottom: 20px;
padding-bottom: 20px;
}
@media (max-width: 768px) {
@@ -13667,6 +13667,7 @@ i.iconset#a_oc {
background: var(--nav-bg);
position: relative;
z-index: 1;
min-height: 140px;
}
.profile_head::before {

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

@@ -390,8 +390,8 @@
const canvasWrapper = document.createElement('div');
canvasWrapper.style.cssText = `
width: 100%;
max-width: 600px;
aspect-ratio: 4 / 1;
max-width: 400px;
aspect-ratio: 400 / 140;
position: relative;
overflow: hidden;
border: 1px solid var(--nav-border-color);
@@ -402,8 +402,8 @@
`;
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 300;
canvas.width = 400;
canvas.height = 140;
canvas.style.cssText = 'width:100%;height:100%;display:block;cursor:move;touch-action:none;pointer-events:auto !important;';
canvasWrapper.appendChild(canvas);
@@ -472,7 +472,7 @@
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const draw = () => {
ctx.clearRect(0, 0, 1200, 300);
ctx.clearRect(0, 0, 400, 140);
ctx.drawImage(img, panX, panY, img.naturalWidth * zoom, img.naturalHeight * zoom);
// Update hint with live coords/zoom
@@ -481,8 +481,8 @@
const getBounds = (z) => {
return {
minX: 1200 - img.naturalWidth * z,
minY: 300 - img.naturalHeight * z
minX: 400 - img.naturalWidth * z,
minY: 140 - img.naturalHeight * z
};
};
@@ -492,15 +492,15 @@
return;
}
// Determine minimum zoom so the image fully covers 1200x400 canvas without black edges
minZoom = Math.max(1200 / img.naturalWidth, 300 / img.naturalHeight);
// Determine minimum zoom so the image fully covers 400x140 canvas without black edges
minZoom = Math.max(400 / img.naturalWidth, 140 / img.naturalHeight);
maxZoom = minZoom * 4;
if (existingConfig && existingConfig.bgSize && existingConfig.bgSize !== 'cover') {
const match = existingConfig.bgSize.match(/([\d.]+)%/);
if (match) {
const pct = parseFloat(match[1]);
const iw = (pct / 100) * 1200;
const iw = (pct / 100) * 400;
zoom = Math.max(minZoom, Math.min(maxZoom, iw / img.naturalWidth));
} else {
zoom = minZoom;
@@ -511,8 +511,8 @@
const iw = img.naturalWidth * zoom;
const ih = img.naturalHeight * zoom;
const maxPanX = 1200 - iw;
const maxPanY = 300 - ih;
const maxPanX = 400 - iw;
const maxPanY = 140 - ih;
if (existingConfig && existingConfig.bgPos && existingConfig.bgPos !== 'center') {
const parts = existingConfig.bgPos.split(' ');
@@ -543,13 +543,13 @@
const t = pct / 100;
const newZoom = minZoom + (maxZoom - minZoom) * t;
const imgCenterX = (600 - panX) / oldZoom;
const imgCenterY = (150 - panY) / oldZoom;
const imgCenterX = (200 - panX) / oldZoom;
const imgCenterY = (70 - panY) / oldZoom;
zoom = newZoom;
const bounds = getBounds(zoom);
panX = Math.max(bounds.minX, Math.min(0, 600 - imgCenterX * zoom));
panY = Math.max(bounds.minY, Math.min(0, 150 - imgCenterY * zoom));
panX = Math.max(bounds.minX, Math.min(0, 200 - imgCenterX * zoom));
panY = Math.max(bounds.minY, Math.min(0, 70 - imgCenterY * zoom));
draw();
};
@@ -626,13 +626,13 @@
const iw = img.naturalWidth * zoom;
const ih = img.naturalHeight * zoom;
const maxPanX = 1200 - iw;
const maxPanX = 400 - iw;
const posXPercent = maxPanX === 0 ? 50 : (panX / maxPanX) * 100;
const maxPanY = 300 - ih;
const maxPanY = 140 - ih;
const posYPercent = maxPanY === 0 ? 50 : (panY / maxPanY) * 100;
const bgSize = `${(iw / 1200) * 100}% auto`;
const bgSize = `${(iw / 400) * 100}% auto`;
const bgPos = `${posXPercent.toFixed(2)}% ${posYPercent.toFixed(2)}%`;
cleanup();
@@ -700,7 +700,7 @@
const newDiv = document.createElement('div');
newDiv.id = 'banner-preview';
newDiv.className = 'banner-preview-img';
newDiv.style.cssText = `width:100%;aspect-ratio:4/1;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/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;`;
a.appendChild(newDiv);
bannerPreview.replaceWith(a);
} else {
@@ -857,8 +857,8 @@
if (bannerPreview) {
const ph = document.createElement('div');
ph.id = 'banner-preview'; ph.className = 'banner-preview-img banner-placeholder';
ph.style.cssText = 'width:100%;aspect-ratio:4/1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;';
ph.textContent = 'No banner set';
ph.style.cssText = 'width:100%;aspect-ratio:400/140;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;';
ph.textContent = window.f0ckI18n?.settings_no_banner_set || 'No banner set';
// Replace the <a> wrapper if it exists, otherwise just the preview element
const parentA = bannerPreview.closest('a');
@@ -1753,6 +1753,10 @@
const data = await res.json();
if (data.success) {
showAccountStatus(descriptionStatus, 'Description updated successfully!', 'success');
const liveDesc = document.querySelector('.user-infobox-description');
if (liveDesc) {
liveDesc.textContent = description || 'Welcome to my profile! This is a live preview.';
}
} else {
alert(data.msg || 'Error saving description');
}
@@ -1786,6 +1790,10 @@
const data = await res.json();
if (data.success) {
showAccountStatus(descriptionStatus, 'Description cleared!', 'success');
const liveDesc = document.querySelector('.user-infobox-description');
if (liveDesc) {
liveDesc.textContent = 'Welcome to my profile! This is a live preview.';
}
} else {
alert(data.msg || 'Error clearing description');
}

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

@@ -139,6 +139,9 @@
"no_file_selected": "Keine Datei ausgewählt",
"upload_btn": "Hochladen",
"remove_custom": "Eigenen entfernen",
"current_banner": "Aktuelles Banner",
"banner_hint": "Max. 5 MB. Erlaubt: gif, jpg, png, webp",
"no_banner_set": "Kein Banner gesetzt",
"custom_description": "Eigene Beschreibung",
"description_placeholder": "Beschreibung zum Profil hinzufügen",
"save_description": "Beschreibung speichern",

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

@@ -139,6 +139,9 @@
"no_file_selected": "No file selected",
"upload_btn": "Upload",
"remove_custom": "Remove Custom",
"current_banner": "Current Banner",
"banner_hint": "Max 5MB. Allowed: gif, jpg, png, webp",
"no_banner_set": "No banner set",
"custom_description": "Custom Description",
"description_placeholder": "Add a description to your profile",
"save_description": "Save Description",

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

@@ -139,6 +139,9 @@
"no_file_selected": "Geen bestand geselecteerd",
"upload_btn": "Uploaden",
"remove_custom": "Aangepaste Verwijderen",
"current_banner": "Huidige Banner",
"banner_hint": "Max 5MB. Toegestaan: gif, jpg, png, webp",
"no_banner_set": "Geen banner ingesteld",
"custom_description": "Aangepaste Beschrijving",
"description_placeholder": "Voeg een beschrijving toe aan je profiel",
"save_description": "Beschrijving Opslaan",

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

@@ -139,6 +139,9 @@
"no_file_selected": "Keine Datei ausgewählt",
"upload_btn": "Aufladieren",
"remove_custom": "Benutzerdefiniertes entfernen",
"current_banner": "Aktuelles Banner",
"banner_hint": "Max 5MB. Erlaubt: gif, jpg, png, webp",
"no_banner_set": "Kein Banner gesetzt",
"custom_description": "Benutzerdefinierte Beschreibung",
"description_placeholder": "Fügen Sie Ihrem Profil eine Beschreibung hinzu",
"save_description": "Beschreibung speichern",

2
src/inc/routes/apiv2/settings.mjs
View File

@@ -438,7 +438,7 @@ export default router => {
return res.json({ success: false, msg: 'Invalid description format' }, 400);
}
const cleanDescription = description ? description.trim().substring(0, 255) : null;
const cleanDescription = description ? description.trim().substring(0, 2000) : null;
try {
await db`

13
views/settings.html
View File

@@ -126,7 +126,7 @@
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.custom_description') }}</legend>
<div class="setting-item">
<textarea id="profile_description" class="input" placeholder="{{ t('settings.description_placeholder') }}"
maxlength="255">{!! session.description || '' !!}</textarea>
maxlength="2000">{!! session.description || '' !!}</textarea>
<div class="profile-settings-actions">
<button type="button" id="btn-save-description" class="button">{{ t('settings.save_description') }}</button>
<button type="button" id="btn-clear-description" class="button button-danger">{{ t('settings.clear') }}</button>
@@ -141,21 +141,22 @@
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">Profile Banner</legend>
<div class="avatar-settings-wrapper">
<div class="avatar-preview-container" style="width: 360px; max-width: 100%;">
<div class="avatar-preview-label">Current Banner</div>
<div class="avatar-preview-label">{{ t('settings.current_banner') }}</div>
@if(banner_file)
<a href="/user/{!! session.user !!}" target="_blank" style="display:block; width: 100%;">
<div id="banner-preview" class="banner-preview-img" style="width:100%;aspect-ratio:4/1;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/{{ banner_file }}');background-size:{{ banner_size || 'cover' }};background-position:{{ banner_position || 'center' }};background-repeat:no-repeat;"></div>
<div id="banner-preview" class="banner-preview-img" style="width:100%;aspect-ratio:400/140;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/{{ banner_file }}');background-size:{{ banner_size || 'cover' }};background-position:{{ banner_position || 'center' }};background-repeat:no-repeat;"></div>
</a>
@else
<div id="banner-preview" class="banner-preview-img banner-placeholder" style="width:100%;aspect-ratio:4/1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;">No banner set</div>
<div id="banner-preview" class="banner-preview-img banner-placeholder" style="width:100%;aspect-ratio:400/140;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;">{{ t('settings.no_banner_set') }}</div>
@endif
</div>
<div class="avatar-upload-section">
<p class="avatar-hint">{{ t('settings.banner_hint') }}</p>
<div class="avatar-upload-wrapper">
<input type="file" id="banner-file-input" accept="image/gif,image/jpeg,image/png,image/webp" hidden>
<button type="button" id="banner-choose-btn" class="button">Choose File</button>
<span id="banner-filename" class="avatar-filename">No file selected</span>
<button type="button" id="banner-choose-btn" class="button">{{ t('settings.choose_file') }}</button>
<span id="banner-filename" class="avatar-filename">{{ t('settings.no_file_selected') }}</span>
</div>
<div class="avatar-progress-wrapper" id="banner-progress-wrapper" style="display: none;">

1
views/snippets/footer.html
View File

@@ -437,6 +437,7 @@
upload_comment_placeholder: "{{ t('upload.item_comment_placeholder') || 'Comment (optional)...' }}",
upload_tags_placeholder: "{{ t('upload.item_tags_placeholder') || 'Tags...' }}",
upload_add_more: "{{ t('upload.add_more') || 'Add more' }}",
settings_no_banner_set: "{{ t('settings.no_banner_set') || 'No banner set' }}",
// timeago
timeago_just_now: "{{ t('timeago.just_now') }}",
timeago_year: "{{ t('timeago.year') }}",