imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Optimized Tailwind, removed redundant classes and divs

Browse Source
This commit is contained in:
Colin Kallemein
2024-07-25 22:48:55 +02:00
parent ccc40b0abb
commit d18dfc8045
3 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -1,70 +1,68 @@
<template>
<div class="h-full overflow-auto">
<div class="relative p-4 flex flex-col">
<div class="gap-2.5 flex flex-wrap">
<div class="w-full flex flex-col mb-1">
<div class="flex flex-wrap gap-2">
<div class="w-full flex flex-col">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="New sprite" />
</div>
<div class="w-full flex gap-2 mt-2 pb-4 relative">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="removeSprite">Remove</button>
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
</div>
</div>
<div class="flex gap-2 py-2">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="removeSprite">Remove</button>
</div>
<div class="w-full mb-2 h-px bg-cyan-200"></div>
<button class="btn-cyan px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24 mb-4" type="button" @click.prevent="addNewImage">New action</button>
<button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
<Accordion v-for="action in spriteActions" :key="action.id">
<template #header>
<div class="flex items-center">
<div class="flex justify-between items-center">
{{ action.action }}
<div class="ml-auto flex gap-2">
<button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Remove</button>
</div>
<button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Remove</button>
</div>
</template>
<template #content>
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
<div class="w-full flex flex-col mb-5">
<div class="w-full flex flex-col">
<label class="mb-1.5 font-titles" for="action">Action</label>
<input v-model="action.action" class="input-cyan" type="text" name="action" placeholder="Action" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input v-model.number="action.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input v-model.number="action.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="is-animated">Is animated</label>
<select v-model="action.isAnimated" class="input-cyan" name="is-animated">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="is-looping">Is looping</label>
<select v-model="action.isLooping" class="input-cyan" name="is-looping">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="w-full flex flex-col mb-5">
<div class="w-full flex flex-col">
<label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
<input v-model.number="action.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
<input v-model.number="action.frameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<div class="w-[calc(50%_-_5px)] flex flex-col">
<label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
<input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div>
<div class="w-full flex mb-5 gap-2">
<SpriteActionsInput v-model="action.images" />
</div>
<SpriteActionsInput v-model="action.images" />
</form>
</template>
</Accordion>