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

Fix header image and brand color swatch on mobile

Browse source 
- Hide wrapper div instead of img (avoids mobile empty-src issues)
- Use img onload handler to show wrapper after image loads
- Use backgroundColor instead of background shorthand for swatch

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-02-01 07:59:21 -08:00
parent 69c51b90cb
commit 80b4c0da52
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
portal/index.html
View file

@ -579,8 +579,8 @@
<div> <div>
<label style="display: block; margin-bottom: 8px; font-weight: 500;">Header Image</label> <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> <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Displayed at the top of your menu. Recommended: 1200x400px</p>
<div id="headerPreviewWrapper" style="max-width: 1200px; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff;"> <div id="headerPreviewWrapper" style="max-width: 1200px; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background-color: #fff; display: none;">
<img id="headerPreview" src="" alt="" style="width: 100%; display: none;"> <img id="headerPreview" src="" alt="" style="width: 100%; display: block;">
</div> </div>
<button class="btn btn-secondary" onclick="Portal.uploadHeader()" style="width: 100%;"> <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;"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px;">
@ -593,7 +593,7 @@
<label style="display: block; margin-bottom: 8px; font-weight: 500;">Brand Color</label> <label style="display: block; margin-bottom: 8px; font-weight: 500;">Brand Color</label>
<p style="color: #666; font-size: 13px; margin-bottom: 8px;">Used for accents and fallback backgrounds</p> <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Used for accents and fallback backgrounds</p>
<div style="display: flex; gap: 12px; align-items: center;"> <div style="display: flex; gap: 12px; align-items: center;">
<div id="brandColorSwatch" style="min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-radius: 8px; background: #1B4D3E; border: 2px solid rgba(0,0,0,0.1); cursor: pointer; flex-shrink: 0;" onclick="Portal.showBrandColorPicker()"></div> <div id="brandColorSwatch" style="min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-radius: 8px; background-color: #1B4D3E; border: 2px solid rgba(0,0,0,0.1); cursor: pointer; flex-shrink: 0;" onclick="Portal.showBrandColorPicker()"></div>
<button class="btn btn-secondary" onclick="Portal.showBrandColorPicker()" style="flex: 1;"> <button class="btn btn-secondary" onclick="Portal.showBrandColorPicker()" style="flex: 1;">
Change Color Change Color
</button> </button>

14
portal/portal.js
View file

@ -741,15 +741,18 @@ const Portal = {
if (brandColor) { if (brandColor) {
this.brandColor = brandColor; this.brandColor = brandColor;
const swatch = document.getElementById('brandColorSwatch'); const swatch = document.getElementById('brandColorSwatch');
if (swatch) swatch.style.background = brandColor; if (swatch) swatch.style.backgroundColor = brandColor;
} }
// Load header preview // Load header preview
const headerPreview = document.getElementById('headerPreview'); const headerPreview = document.getElementById('headerPreview');
const headerWrapper = document.getElementById('headerPreviewWrapper');
const headerUrl = biz.HEADERIMAGEURL || biz.HeaderImageURL; const headerUrl = biz.HEADERIMAGEURL || biz.HeaderImageURL;
if (headerPreview && headerUrl) { if (headerPreview && headerUrl) {
headerPreview.onload = function() {
if (headerWrapper) headerWrapper.style.display = 'block';
};
headerPreview.src = `${headerUrl}?t=${Date.now()}`; headerPreview.src = `${headerUrl}?t=${Date.now()}`;
headerPreview.style.display = 'block';
} }
// Render hours editor // Render hours editor
@ -1164,9 +1167,12 @@ const Portal = {
this.toast('Header uploaded successfully!', 'success'); this.toast('Header uploaded successfully!', 'success');
// Update preview using the URL from the response // Update preview using the URL from the response
const preview = document.getElementById('headerPreview'); const preview = document.getElementById('headerPreview');
const wrapper = document.getElementById('headerPreviewWrapper');
if (preview && data.HEADERURL) { if (preview && data.HEADERURL) {
preview.onload = function() {
if (wrapper) wrapper.style.display = 'block';
};
preview.src = `${BASE_PATH}${data.HEADERURL}?t=${Date.now()}`; preview.src = `${BASE_PATH}${data.HEADERURL}?t=${Date.now()}`;
preview.style.display = 'block';
} }
} else { } else {
this.toast(data.MESSAGE || 'Failed to upload header', 'error'); this.toast(data.MESSAGE || 'Failed to upload header', 'error');
@ -1244,7 +1250,7 @@ const Portal = {
if (data.OK) { if (data.OK) {
this.brandColor = color; this.brandColor = color;
const swatch = document.getElementById('brandColorSwatch'); const swatch = document.getElementById('brandColorSwatch');
if (swatch) swatch.style.background = color; if (swatch) swatch.style.backgroundColor = color;
this.closeModal(); this.closeModal();
this.toast('Brand color saved!', 'success'); this.toast('Brand color saved!', 'success');
} else { } else {