tweaks ns tuff

This commit is contained in:
Jill 2022-03-05 15:34:41 +03:00
parent 39c236e920
commit 06451b7efe
1 changed files with 21 additions and 8 deletions

View File

@ -76,6 +76,7 @@
if (response.ok) { if (response.ok) {
submitting = false; submitting = false;
currentImage = {file: null, name: '', x: 0.5, y: 0.5} currentImage = {file: null, name: '', x: 0.5, y: 0.5}
upload = null;
} else { } else {
submitting = false; submitting = false;
if (response.body) { if (response.body) {
@ -113,10 +114,6 @@
height: auto; height: auto;
} }
#chart * {
position: relative;
}
#canvas { #canvas {
position: absolute; position: absolute;
} }
@ -138,6 +135,22 @@
height: 100%; height: 100%;
} }
.img {
position: relative;
width: 64px;
height: 64px;
}
.img * {
width: 64px;
height: 64px;
}
.img *:last-child, .img *:last-child {
z-index: 999;
height: unset;
}
@media (max-width: 650px) { @media (max-width: 650px) {
#panels { #panels {
flex-direction: column; flex-direction: column;
@ -182,14 +195,14 @@
{#key top + left + right + bot} {#key top + left + right + bot}
<div id="canvas"><Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/></div> <div id="canvas"><Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/></div>
{/key} {/key}
{#each [...$images, currentImage] as img} {#each [...$images, currentImage] as img, i}
{#if img && img.file} {#if img && img.file}
<div class="img" style="top: {Math.floor(img.y*512)}px; left: {Math.floor((img.x-0.5)*512)}px"> <div class="img" style="top: {Math.floor(img.y*512)-i*64}px; left: {Math.floor((img.x)*512)}px">
<Popover> <Popover>
<div class="img-container"> <div class="img-container">
<img class="img-file" src="{img.file}" alt="{img.name}"> <img class="img-file" src="{img.file}" alt="{img.name}">
</div> </div>
<div slot="popover-content"> <div slot="popover-content" class="popover-content">
<PopoverButton>{img.name}</PopoverButton> <PopoverButton>{img.name}</PopoverButton>
</div> </div>
</Popover> </Popover>
@ -207,7 +220,7 @@
reader.readAsDataURL(upload); reader.readAsDataURL(upload);
}}/> }}/>
{#if upload != null} {#if upload != null}
<FileTile file={upload} on:delete={() => upload = null}/> <FileTile file={upload} on:delete={() => {upload = null; currentImage.file = null}}/>
{/if} {/if}
<br> <br>
<FormField <FormField