noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove modal- classes and re implemented styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-04 23:19:22 +02:00
parent d15e5f796f
commit 5dd8664c34
9 changed files with 38 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -5,23 +5,21 @@
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
<div class="form-field w-full flex flex-col mb-[20px]">
<form class="flex gap-2.5 flex-wrap" @submit.prevent>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field w-[48%] flex flex-col mb-[20px]"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
</div>
<div class="submit">
<button class="btn-cyan px-[15px] py-1.5" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux ml-2.5 px-[15px] py-1.5" type="button" @click="removeObject">Remove</button>
</div>
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Remove</button>
</form>
</div>
</div>

8
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -5,13 +5,13 @@
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="form-fields flex g-2.5 flex-wrap" @submit.prevent>
<div class="form-field tags flex flex-col mb-[20px]">
<form class="flex g-2.5 flex-wrap" @submit.prevent>
<div class="flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="tags">Tags</label>
<ChipsInput v-model="tags" @update:modelValue="handleTagsUpdate" />
</div>
<div class="submit w-full">
<button class="btn-bordeaux px-[15px] py-1.5" type="button" @click="removeTile">Remove</button>
<div class="w-full">
<button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeTile">Remove</button>
</div>
</form>
</div>