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

Move preview to full-width section below controls for more preview space

Browse Source
This commit is contained in:
jason
2026-03-08 16:50:57 -05:00
parent 909c206490
commit c344590cb2
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>
</header>
<!-- Controls Section -->
<div class="card fade-in" style="margin-bottom: var(--space-xl);">
<div class="grid grid-cols-2 gap-lg">
<!-- Left Column: Upload & Controls -->
<div class="card fade-in">
<h2>Upload & Transform</h2>
<!-- Left Column: Upload & Dimensions -->
<div>
<h2>Upload & Settings</h2>
<!-- 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;">
Select Image
</label>
@@ -209,6 +211,11 @@
</select>
</div>
{/if}
</div>
<!-- Right Column: Quality & Format -->
<div>
<h2>Quality & Format</h2>
<!-- Quality -->
<div style="margin-bottom: var(--space-lg);">
@@ -252,30 +259,32 @@
{/if}
</button>
</div>
</div>
</div>
<!-- Right Column: Preview -->
<div class="card fade-in" style="display: flex; flex-direction: column;">
<!-- Live Preview Section (Full Width Below) -->
<div class="card fade-in">
<h2>Live Preview</h2>
{#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>
<p style="font-size: 3rem; margin-bottom: var(--space-md)">🖼️</p>
<p class="mb-0">Upload an image to see live preview</p>
</div>
</div>
{: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 -->
<div class="grid grid-cols-2 gap-md" style="flex: 1;">
<div class="grid grid-cols-2 gap-lg">
<!-- Original -->
<div style="display: flex; flex-direction: column;">
<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
src={filePreviewUrl}
alt="Original"
style="max-width: 100%; max-height: 300px; object-fit: contain;"
style="max-width: 100%; max-height: 600px; object-fit: contain;"
/>
</div>
<div style="margin-top: var(--space-sm); text-align: center;">
@@ -288,11 +297,11 @@
<!-- Preview -->
<div style="display: flex; flex-direction: column;">
<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
src={previewUrl}
alt="Preview"
style="max-width: 100%; max-height: 300px; object-fit: contain;"
style="max-width: 100%; max-height: 600px; object-fit: contain;"
/>
</div>
<div style="margin-top: var(--space-sm); text-align: center;">
@@ -322,10 +331,9 @@
{/if}
</div>
{: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>
{/if}
</div>
</div>
</div>