From 095144fa8fdd87133f9eec721d91e83231c852d0 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 25 Jul 2024 23:17:04 +0200
Subject: [PATCH] Created global style class for form field containers

---
 src/assets/scss/main.scss                     | 13 +++++++
 .../partials/object/ObjectDetails.vue         | 32 ++++++++---------
 .../partials/sprite/SpriteDetails.vue         | 34 +++++++++----------
 .../partials/tile/TileDetails.vue             |  8 ++---
 .../zoneEditor/partials/CreateZone.vue        | 16 ++++-----
 .../zoneEditor/partials/ZoneSettings.vue      | 16 ++++-----
 src/screens/Characters.vue                    |  4 +--
 7 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 4fdd466..57c656e 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -64,6 +64,19 @@ input {
   }
 }
 
+.form-field-full {
+  @apply w-full flex flex-col mb-5;
+  label {
+    @apply mb-1.5 font-titles;
+  }
+}
+.form-field-half {
+  @apply w-[calc(50%_-_5px)] flex flex-col mb-5;
+  label {
+    @apply mb-1.5 font-titles;
+  }
+}
+
 button {
   @apply text-center;
 
diff --git a/src/components/utilities/assetManager/partials/object/ObjectDetails.vue b/src/components/utilities/assetManager/partials/object/ObjectDetails.vue
index f3e14b1..39aa8f9 100644
--- a/src/components/utilities/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/object/ObjectDetails.vue
@@ -8,39 +8,39 @@
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="name">Name</label>
+        <div class="form-field-full">
+          <label for="name">Name</label>
           <input v-model="objectName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
         </div>
-        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
+        <div class="form-field-half">
+          <label for="origin-x">Origin X</label>
           <input v-model="objectOriginX" 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">
-          <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
+        <div class="form-field-half">
+          <label for="origin-y">Origin Y</label>
           <input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
         </div>
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+        <div class="form-field-full">
+          <label for="origin-x">Tags</label>
           <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
         </div>
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="origin-x">Is animated</label>
+        <div class="form-field-full">
+          <label for="origin-x">Is animated</label>
           <select v-model="objectIsAnimated" class="input-cyan" name="is-animated">
             <option :value="false">No</option>
             <option :value="true">Yes</option>
           </select>
         </div>
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
+        <div class="form-field-full">
+          <label for="frame-speed">Frame speed</label>
           <input v-model="objectFrameSpeed" 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">
-          <label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
+        <div class="form-field-half">
+          <label for="frame-width">Frame width</label>
           <input v-model="objectFrameWidth" 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">
-          <label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
+        <div class="form-field-half">
+          <label for="frame-height">Frame height</label>
           <input v-model="objectFrameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
         </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
diff --git a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
index 48166cc..a6be1b4 100644
--- a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
@@ -19,47 +19,47 @@
         <template #header>
           <div class="flex justify-between items-center">
             {{ action.action }}
-            <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>
+            <button class="btn-bordeaux px-4 py-1.5 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">
-              <label class="mb-1.5 font-titles" for="action">Action</label>
+            <div class="form-field-full">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
+            <div class="form-field-half">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
+            <div class="form-field-half">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="is-animated">Is animated</label>
+            <div class="form-field-half">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="is-looping">Is looping</label>
+            <div class="form-field-half">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
+            <div class="form-field-full">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
+            <div class="form-field-half">
+              <label 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">
-              <label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
+            <div class="form-field-half">
+              <label 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>
             <SpriteActionsInput v-model="action.images" />
diff --git a/src/components/utilities/assetManager/partials/tile/TileDetails.vue b/src/components/utilities/assetManager/partials/tile/TileDetails.vue
index 02f0f3d..9e56c72 100644
--- a/src/components/utilities/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/tile/TileDetails.vue
@@ -8,12 +8,12 @@
     </div>
     <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="name">Name</label>
+        <div class="form-field-full">
+          <label for="name">Name</label>
           <input v-model="tileName" class="input-cyan" type="text" name="name" placeholder="Tile #1" />
         </div>
-        <div class="w-full flex flex-col mb-5">
-          <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+        <div class="form-field-full">
+          <label for="origin-x">Tags</label>
           <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
         </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
diff --git a/src/components/utilities/zoneEditor/partials/CreateZone.vue b/src/components/utilities/zoneEditor/partials/CreateZone.vue
index f66897c..607f395 100644
--- a/src/components/utilities/zoneEditor/partials/CreateZone.vue
+++ b/src/components/utilities/zoneEditor/partials/CreateZone.vue
@@ -8,20 +8,20 @@
       <div class="m-4">
         <form method="post" @submit.prevent="submit" class="inline">
           <div class="gap-2.5 flex flex-wrap">
-            <div class="w-full flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Name</label>
+            <div class="form-field-full">
+              <label for="name">Name</label>
               <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
             </div>
-            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Width</label>
+            <div class="form-field-half">
+              <label for="name">Width</label>
               <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Height</label>
+            <div class="form-field-half">
+              <label for="name">Height</label>
               <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
             </div>
-            <div class="w-full flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
+            <div class="form-field-full">
+              <label for="name">PVP enabled</label>
               <select class="input-cyan" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
diff --git a/src/components/utilities/zoneEditor/partials/ZoneSettings.vue b/src/components/utilities/zoneEditor/partials/ZoneSettings.vue
index 2223d7d..2a00ea2 100644
--- a/src/components/utilities/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/partials/ZoneSettings.vue
@@ -8,20 +8,20 @@
       <div class="m-4">
         <form method="post" @submit.prevent="" class="inline">
           <div class="gap-2.5 flex flex-wrap">
-            <div class="w-full flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Name</label>
+            <div class="form-field-full">
+              <label for="name">Name</label>
               <input class="input-cyan" v-model="name" name="name" id="name" />
             </div>
-            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Width</label>
+            <div class="form-field-half">
+              <label for="name">Width</label>
               <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="name">Height</label>
+            <div class="form-field-half">
+              <label for="name">Height</label>
               <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
             </div>
-            <div class="w-full flex flex-col mb-5">
-              <label class="mb-1.5 font-titles" for="pvp">PVP enabled</label>
+            <div class="form-field-full">
+              <label for="pvp">PVP enabled</label>
               <select v-model="pvp" class="input-cyan" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 8030aff..0e8e2fa 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -52,8 +52,8 @@
     <template #modalBody>
       <div class="m-4 character-form">
         <form method="post" @submit.prevent="create" class="inline">
-          <div class="flex flex-col mb-5">
-            <label class="mb-1.5 font-titles" for="name">Name</label>
+          <div class="form-field-full">
+            <label for="name">Name</label>
             <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
           </div>
           <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>