Berechnung Bedarfsausweis
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import UploadImages from "../UploadImages.svelte";
|
||||
|
||||
import ImageGrid from "../ImageGrid.svelte";
|
||||
let images: (File & { data: string })[] = [];
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-lg border-4 p-4 bg-white">
|
||||
<input type="file" class="image_upload" multiple />
|
||||
@@ -53,25 +53,10 @@
|
||||
|
||||
<div class="rounded-lg border-4 p-4 bg-white">
|
||||
<p>
|
||||
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
|
||||
Energieausweis!<br />
|
||||
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf
|
||||
Ihrem Energieausweis!<br />
|
||||
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
|
||||
</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UploadImages max={4} bind:images></UploadImages>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
{#each images as image, i}
|
||||
<div class="relative group">
|
||||
<img src={image.data} alt={image.name} class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all">
|
||||
<button type="button" class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]" on:click={() => {
|
||||
delete images[i]
|
||||
images = images.filter(x => x);
|
||||
}}>
|
||||
R
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<ImageGrid max={4} bind:images />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user