From d18dfc80455e33d358215ad28c550a7804333f85 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 25 Jul 2024 22:48:55 +0200
Subject: [PATCH] Optimized Tailwind, removed redundant classes and divs
---
src/components/utilities/Accordion.vue | 6 +--
.../partials/sprite/SpriteDetails.vue | 44 +++++++++----------
.../sprite/partials/SpriteImagesInput.vue | 8 ++--
3 files changed, 28 insertions(+), 30 deletions(-)
diff --git a/src/components/utilities/Accordion.vue b/src/components/utilities/Accordion.vue
index 0aa6ae1..5871d9d 100644
--- a/src/components/utilities/Accordion.vue
+++ b/src/components/utilities/Accordion.vue
@@ -1,10 +1,10 @@
<template>
- <div class="border border-gray-300 rounded mb-4">
- <div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-left text-white font-default cursor-pointer transition-colors duration-200 ease-in-out">
+ <div class="mb-4 flex flex-col gap-3">
+ <div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-white font-default cursor-pointer">
<slot name="header" />
</div>
<transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
- <div v-if="isOpen" class="py-3 overflow-hidden">
+ <div v-if="isOpen" class="overflow-hidden">
<slot name="content" />
</div>
</transition>
diff --git a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
index 8bc4dd9..48166cc 100644
--- a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index e1e0c79..0c1a25b 100644
--- a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -1,14 +1,14 @@
<template>
- <div class="flex flex-wrap gap-3">
- <div v-for="(image, index) in images" :key="image.id" class="min-h-24 min-w-24 p-3 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
+ <div class="w-full flex flex-wrap gap-3">
+ <div v-for="(image, index) in images" :key="image.id" class="flex items-center justify-center h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
<img :src="image.url || image.base64" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
- <button @click.stop="deleteImage(image.id)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
+ <button @click.stop="deleteImage(image.id)" class="absolute top-1 right-1 bg-red text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100" aria-label="Delete image">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
- <div class="min-h-24 min-w-24 p-3 bg-gray-50 bg-opacity-30 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
+ <div class="h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>