jason/pnger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Move preview to full-width section below controls for more preview space' (#7) from feature/ui-upgrade-dark-mode-preview into main

Browse Source 
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
jason
2026-03-08 16:52:05 -05:00
parent 6f55ecb1d3 c344590cb2
commit e1fa4fb6ad
1 changed files with 196 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/App.svelte
View File

@@ -131,13 +131,15 @@
</button> </button>
</header> </header>
<!-- Controls Section -->
<div class="card fade-in" style="margin-bottom: var(--space-xl);">
<div class="grid grid-cols-2 gap-lg"> <div class="grid grid-cols-2 gap-lg">
<!-- Left Column: Upload & Controls --> <!-- Left Column: Upload & Dimensions -->
<div class="card fade-in"> <div>
<h2>Upload & Transform</h2> <h2>Upload & Settings</h2>
<!-- File Upload --> <!-- File Upload -->
<div style="margin-bottom: var(--space-xl);"> <div style="margin-bottom: var(--space-lg);">
<label style="display: block; margin-bottom: var(--space-sm); font-weight: 500;"> <label style="display: block; margin-bottom: var(--space-sm); font-weight: 500;">
Select Image Select Image
</label> </label>
@@ -209,6 +211,11 @@
</select> </select>
</div> </div>
{/if} {/if}
</div>
<!-- Right Column: Quality & Format -->
<div>
<h2>Quality & Format</h2>
<!-- Quality --> <!-- Quality -->
<div style="margin-bottom: var(--space-lg);"> <div style="margin-bottom: var(--space-lg);">
@@ -252,30 +259,32 @@
{/if} {/if}
</button> </button>
</div> </div>
</div>
</div>
<!-- Right Column: Preview --> <!-- Live Preview Section (Full Width Below) -->
<div class="card fade-in" style="display: flex; flex-direction: column;"> <div class="card fade-in">
<h2>Live Preview</h2> <h2>Live Preview</h2>
{#if !file} {#if !file}
<div style="flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); text-align: center; padding: var(--space-2xl);"> <div style="display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); text-align: center; padding: var(--space-2xl); min-height: 400px;">
<div> <div>
<p style="font-size: 3rem; margin-bottom: var(--space-md)">🖼️</p> <p style="font-size: 3rem; margin-bottom: var(--space-md)">🖼️</p>
<p class="mb-0">Upload an image to see live preview</p> <p class="mb-0">Upload an image to see live preview</p>
</div> </div>
</div> </div>
{:else if showPreview} {:else if showPreview}
<div style="flex: 1; display: flex; flex-direction: column; gap: var(--space-lg);"> <div style="display: flex; flex-direction: column; gap: var(--space-lg);">
<!-- Image Comparison --> <!-- Image Comparison -->
<div class="grid grid-cols-2 gap-md" style="flex: 1;"> <div class="grid grid-cols-2 gap-lg">
<!-- Original --> <!-- Original -->
<div style="display: flex; flex-direction: column;"> <div style="display: flex; flex-direction: column;">
<h3 style="font-size: 1rem; margin-bottom: var(--space-sm);">Original</h3> <h3 style="font-size: 1rem; margin-bottom: var(--space-sm);">Original</h3>
<div style="flex: 1; border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary);"> <div style="border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); min-height: 500px;">
<img <img
src={filePreviewUrl} src={filePreviewUrl}
alt="Original" alt="Original"
style="max-width: 100%; max-height: 300px; object-fit: contain;" style="max-width: 100%; max-height: 600px; object-fit: contain;"
/> />
</div> </div>
<div style="margin-top: var(--space-sm); text-align: center;"> <div style="margin-top: var(--space-sm); text-align: center;">
@@ -288,11 +297,11 @@
<!-- Preview --> <!-- Preview -->
<div style="display: flex; flex-direction: column;"> <div style="display: flex; flex-direction: column;">
<h3 style="font-size: 1rem; margin-bottom: var(--space-sm);">Preview</h3> <h3 style="font-size: 1rem; margin-bottom: var(--space-sm);">Preview</h3>
<div style="flex: 1; border: 2px solid var(--color-accent); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary);"> <div style="border: 2px solid var(--color-accent); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); min-height: 500px;">
<img <img
src={previewUrl} src={previewUrl}
alt="Preview" alt="Preview"
style="max-width: 100%; max-height: 300px; object-fit: contain;" style="max-width: 100%; max-height: 600px; object-fit: contain;"
/> />
</div> </div>
<div style="margin-top: var(--space-sm); text-align: center;"> <div style="margin-top: var(--space-sm); text-align: center;">
@@ -322,10 +331,9 @@
{/if} {/if}
</div> </div>
{:else} {:else}
<div style="flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary);"> <div style="display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); min-height: 500px;">
<div class="spinner" style="width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%;"></div> <div class="spinner" style="width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%;"></div>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
</div>