YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cropper): responsive editor layout

Browse Source 
Two-column editor at >=900px (crop pad + cleaned preview left, cleaning/
review controls right), single column below; panel headers wrap their
hints onto their own line on narrow screens.
This commit is contained in:
adebisi-fa
2026-10-01 01:22:18 +01:00
parent 58b8b9c862
commit 2f0a1fab21
2 changed files with 73 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/cropper/index.html
+10 -8
View File
@@ -78,24 +78,25 @@
</div>
</dl>
<div class="finger-grid mt-2">
<div>
<div class="editor-grid mt-2">
<div class="editor-media">
<label>Original — crop it</label>
<div class="croppa-pad mt-1">
<croppa v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
<img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
</croppa>
</div>
</div>
<div v-if="cleanedImage">
<label>Cleaned preview</label>
<template v-if="cleanedImage">
<label style="display:block;" class="mt-2">Cleaned preview</label>
<div class="croppa-pad mt-1">
<img :src="cleanedImage" alt="cleaned preview">
</div>
</div>
<button class="btn btn-danger-ghost mt-1" v-on:click="cleanedImage = null">Remove cleaned image</button>
</template>
</div>
<div class="row-gap mt-2" style="align-items:flex-end;">
<div class="editor-controls">
<div class="row-gap" style="align-items:flex-end;">
<div style="min-width:200px;">
<label for="requiresCleaning">Requires cleaning?</label>
<select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
@@ -108,7 +109,6 @@
<span v-if="!busy.clean">Clean background</span>
<span v-else>Cleaning&hellip;</span>
</button>
<button class="btn btn-danger-ghost" v-if="cleanedImage" v-on:click="cleanedImage = null">Remove cleaned image</button>
</div>
<hr class="mt-2">
@@ -153,6 +153,8 @@
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
</div>
</div>
</div>
</div>
</section>
</main>
tools/public/assets/style.css
+11
View File
@@ -169,6 +169,17 @@ select.form-control { appearance: auto; }
/* ── alerts ─────────────────────────────────────────────── */
.alert-soft { border-radius: 10px; border: 1px solid var(--err-soft); background: var(--err-soft); color: var(--err); font-size: 13.5px; padding: 0.6rem 0.9rem; }
/* ── editor grid (cropper) ──────────────────────────────── */
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) {
.editor-grid { grid-template-columns: 300px 1fr; align-items: start; }
}
.panel-head { flex-wrap: wrap; }
.panel-head .hint { flex-basis: 100%; margin-left: 0; }
@media (min-width: 720px) {
.panel-head .hint { flex-basis: auto; margin-left: auto; }
}
/* ── footer ─────────────────────────────────────────────── */
footer.foot { flex-shrink: 0; padding: 1.4rem 0 1.8rem; color: var(--faint); font-size: 12.5px; }
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }