tweaks ns tuff
This commit is contained in:
parent
39c236e920
commit
06451b7efe
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue