styling in equal unified format

This commit is contained in:
waltem01 2024-02-16 13:07:20 +01:00
parent 688447e63c
commit 16d426c23b

View File

@ -139,10 +139,12 @@
}); });
</script> </script>
<form on:submit|preventDefault={handleSubmit}> <form class="grid grid-rows-5 m-1" on:submit|preventDefault={handleSubmit}>
<label for="x">Set X coordinate:</label <div class="grid grid-cols-2">
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="x">Set X coordinate:</label
> >
<input <input
class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
type="number" type="number"
name="x" name="x"
id="x" id="x"
@ -151,10 +153,13 @@
step="1" step="1"
value="0" value="0"
/> />
</div>
<label for="y">Set Y coordinate:</label <div class="grid grid-cols-2">
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="y">Set Y coordinate:</label
> >
<input <input
class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
type="number" type="number"
name="y" name="y"
id="y" id="y"
@ -163,9 +168,12 @@
step="1" step="1"
value="0" value="0"
/> />
</div>
<label for="w">Set image width:</label> <div class="grid grid-cols-2">
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="w">Set image width:</label>
<input <input
class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
type="number" type="number"
name="w" name="w"
id="w" id="w"
@ -174,10 +182,13 @@
step="1" step="1"
value={matrix?.width ?? 192} value={matrix?.width ?? 192}
/> />
</div>
<label for="h">Set image height:</label <div class="grid grid-cols-2">
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="h">Set image height:</label
> >
<input <input
class="border-2 border-black border-b-0 cursor-text pl-1 bg-gray-100"
type="number" type="number"
name="h" name="h"
id="h" id="h"
@ -186,10 +197,13 @@
step="1" step="1"
value={matrix?.height ?? 192} value={matrix?.height ?? 192}
/> />
</div>
<label for="image">Set an image:</label <div class="grid grid-cols-2">
<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="image">Set an image:</label
> >
<input <input
class="border-2 border-black border-b-0 bg-gray-100"
type="file" type="file"
name="image" name="image"
id="image" id="image"
@ -197,13 +211,15 @@
required required
on:change={getImage} on:change={getImage}
/> />
</div>
<input <input
class="border-2 border-black hover:bg-gray-200 cursor-pointer"
type="submit" type="submit"
value="Upload!" value="Upload!"
/> />
{#if imageURL} {#if imageURL}
<img src={imageURL} alt="User uploaded" /> <img class="mt-5 block ml-auto mr-auto" src={imageURL} alt="User uploaded" />
{/if} {/if}
</form> </form>
{#if uploadStarted} {#if uploadStarted}