payfrit/payfrit-biz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch header preview from CSS background-image to <img> tag

Browse source 
CSS background-image with padding-bottom trick for aspect ratio was not
rendering on mobile. Using an actual <img> element with width:100% is
universally reliable across all browsers and devices.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-02-01 07:48:47 -08:00
parent d86ca5a894
commit db5cd90875
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
portal/index.html
View file

@ -579,8 +579,8 @@
<div>
<label style="display: block; margin-bottom: 8px; font-weight: 500;">Header Image</label>
<p style="color: #666; font-size: 13px; margin-bottom: 8px;">Displayed at the top of your menu. Recommended: 1200x400px</p>
<div id="headerPreviewWrapper" style="width: 100%; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff;">
<div id="headerPreview" style="width: 100%; padding-bottom: 33.3%; background-size: cover; background-position: left center; background-repeat: no-repeat;"></div>
<div id="headerPreviewWrapper" style="width: 100%; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #f0f0f0;">
<img id="headerPreview" src="" alt="" style="width: 100%; display: none; border-radius: 8px;">
</div>
<button class="btn btn-secondary" onclick="Portal.uploadHeader()" style="width: 100%;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px;">

6
portal/portal.js
View file

@ -750,7 +750,8 @@ const Portal = {
const headerPreview = document.getElementById('headerPreview');
const headerUrl = biz.HEADERIMAGEURL || biz.HeaderImageURL;
if (headerPreview && headerUrl) {
headerPreview.style.backgroundImage = `url(${headerUrl}?t=${Date.now()})`;
headerPreview.src = `${headerUrl}?t=${Date.now()}`;
headerPreview.style.display = 'block';
}
// Render hours editor
@ -1166,7 +1167,8 @@ const Portal = {
// Update preview using the URL from the response
const preview = document.getElementById('headerPreview');
if (preview && data.HEADERURL) {
preview.style.backgroundImage = `url(${BASE_PATH}${data.HEADERURL}?t=${Date.now()})`;
preview.src = `${BASE_PATH}${data.HEADERURL}?t=${Date.now()}`;
preview.style.display = 'block';
}
} else {
this.toast(data.MESSAGE || 'Failed to upload header', 'error');