fix: update layout
This commit is contained in:
@@ -24,7 +24,7 @@
|
|||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 24rem;
|
max-height: 32rem;
|
||||||
background:
|
background:
|
||||||
repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%);
|
repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%);
|
||||||
background-size: 16px 16px;
|
background-size: 16px 16px;
|
||||||
|
|||||||
@@ -83,44 +83,45 @@
|
|||||||
<div class="error-banner" role="alert">{errorText}</div>
|
<div class="error-banner" role="alert">{errorText}</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<div class="stage panel">
|
||||||
|
<div class="side">
|
||||||
|
<h2 class="heading-section">Исходник</h2>
|
||||||
{#if !source}
|
{#if !source}
|
||||||
<DropZone onFile={handleFile} onError={(message) => (errorText = message)} />
|
<DropZone onFile={handleFile} onError={(message) => (errorText = message)} />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="layout">
|
<div class="media">
|
||||||
<div class="result-col">
|
<Preview image={source} />
|
||||||
<h2 class="heading-section">{isInfo ? 'Изображение' : 'Результат'}</h2>
|
|
||||||
{#if status === 'processing' && !result}
|
|
||||||
<EmptyState title="Обработка…" hint="Изображение обрабатывается, это займёт немного времени" />
|
|
||||||
{:else}
|
|
||||||
<Preview image={isInfo ? source : result} />
|
|
||||||
{/if}
|
|
||||||
{#if isInfo && info}
|
|
||||||
<InfoPanel {info} />
|
|
||||||
{/if}
|
|
||||||
<div class="reset-row">
|
|
||||||
<Button variant="secondary" onclick={reset}>Загрузить другое изображение</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Button variant="secondary" onclick={reset}>Заменить изображение</Button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if !isInfo}
|
<div class="side">
|
||||||
<div class="params-col">
|
<h2 class="heading-section">{isInfo ? 'Сводка' : 'Результат'}</h2>
|
||||||
<h2 class="heading-section">Параметры</h2>
|
{#if !source}
|
||||||
{#if tool.params.length > 0}
|
<div class="media">
|
||||||
<ParamForm params={tool.params} bind:values />
|
<EmptyState
|
||||||
<Button
|
title="Результат появится здесь"
|
||||||
onclick={apply}
|
hint="Сначала загрузите исходное изображение слева"
|
||||||
busy={status === 'processing'}
|
/>
|
||||||
busyText="Обработка…"
|
</div>
|
||||||
fullWidth
|
{:else if !isInfo && status === 'processing' && !result}
|
||||||
>
|
<div class="media">
|
||||||
Применить
|
<EmptyState
|
||||||
</Button>
|
title="Обработка…"
|
||||||
{:else}
|
hint="Изображение обрабатывается, это займёт немного времени"
|
||||||
<p class="hint text-caption text-muted">
|
/>
|
||||||
У этого инструмента нет параметров — результат уже готов.
|
</div>
|
||||||
</p>
|
{:else if isInfo}
|
||||||
|
<div class="media">
|
||||||
|
{#if info}
|
||||||
|
<InfoPanel {info} />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="download-row">
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="media">
|
||||||
|
<Preview image={result} />
|
||||||
|
</div>
|
||||||
<DownloadButton
|
<DownloadButton
|
||||||
image={result}
|
image={result}
|
||||||
format={outputOf(tool)}
|
format={outputOf(tool)}
|
||||||
@@ -128,8 +129,22 @@
|
|||||||
params={sanitized}
|
params={sanitized}
|
||||||
onError={showError}
|
onError={showError}
|
||||||
/>
|
/>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if source && !isInfo}
|
||||||
|
<div class="params-card panel">
|
||||||
|
<h2 class="heading-section">Параметры</h2>
|
||||||
|
{#if tool.params.length > 0}
|
||||||
|
<ParamForm params={tool.params} bind:values />
|
||||||
|
<Button onclick={apply} busy={status === 'processing'} busyText="Обработка…" fullWidth>
|
||||||
|
Применить
|
||||||
|
</Button>
|
||||||
|
{:else}
|
||||||
|
<p class="hint text-caption text-muted">
|
||||||
|
У этого инструмента нет параметров — результат уже готов.
|
||||||
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -149,32 +164,58 @@
|
|||||||
margin-bottom: var(--space-3);
|
margin-bottom: var(--space-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout {
|
.stage {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
gap: var(--space-5);
|
gap: var(--space-4);
|
||||||
align-items: start;
|
padding: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side + .side {
|
||||||
|
border-left: 1px solid var(--border);
|
||||||
|
padding-left: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side h2 {
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-card {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
padding: var(--space-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 48rem) {
|
@media (max-width: 48rem) {
|
||||||
.layout {
|
.stage {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.result-col h2,
|
.side + .side {
|
||||||
.params-col h2 {
|
border-left: none;
|
||||||
margin-bottom: var(--space-2);
|
padding-left: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.reset-row {
|
|
||||||
margin-top: var(--space-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-row {
|
|
||||||
margin-top: var(--space-4);
|
|
||||||
padding-top: var(--space-3);
|
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
|
padding-top: var(--space-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
|
|||||||
@@ -82,9 +82,7 @@
|
|||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 64rem;
|
padding: var(--space-4) var(--space-5);
|
||||||
margin: 0 auto;
|
|
||||||
padding: var(--space-5) var(--space-4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|||||||
Reference in New Issue
Block a user