From 5dd8664c340f396b2621f6ef81c6376f2dcbe3bd Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 4 Jul 2024 23:19:22 +0200
Subject: [PATCH] Remove modal- classes and re implemented styling
---
src/assets/scss/main.scss | 9 ------
src/components/utilities/GmPanel.vue | 29 +++++--------------
src/components/utilities/GmTools.vue | 6 ++--
src/components/utilities/Notifications.vue | 2 +-
.../assetManager/partials/ObjectDetails.vue | 14 ++++-----
.../assetManager/partials/TileDetails.vue | 8 ++---
src/components/utilities/zoneEditor/Tiles.vue | 4 +--
.../utilities/zoneEditor/ZoneSettings.vue | 14 ++++-----
src/screens/Characters.vue | 24 +++++----------
9 files changed, 38 insertions(+), 72 deletions(-)
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index e870179..da634b9 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -81,15 +81,6 @@ input {
}
}
-.modal-form {
- .form-fields {
- --gap: 10px;
- display: flex;
- gap: var(--gap);
- flex-wrap: wrap;
- }
-}
-
.input-cyan {
padding: 8px 10px;
font-family: $titles;
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index 841692a..7e7745c 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -1,16 +1,16 @@
<template>
<Modal :isModalOpen="gmPanelStore.isOpen" @modal:close="() => gmPanelStore.toggle()" :modal-width="1000" :modal-height="650">
<template #modalHeader>
- <h3 class="modal-title">GM Panel</h3>
- <div class="gm-selector">
- <button class="btn-cyan">General</button>
- <button class="btn-cyan">Users</button>
- <button class="btn-cyan">Chats</button>
- <button class="btn-cyan active">Asset manager</button>
+ <h3 class="m-0 font-medium shrink-0">GM Panel</h3>
+ <div class="flex gap-1.5 flex-wrap">
+ <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">General</button>
+ <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Users</button>
+ <button class="btn-cyan py-1.5 px-[15px] min-w-[100px]">Chats</button>
+ <button class="btn-cyan active py-1.5 px-[15px] min-w-[100px]">Asset manager</button>
</div>
</template>
<template #modalBody>
- <div class="container gm-panel h-full margin-0">
+ <div class="h-full margin-0">
<AssetManager v-if="toggle == 'asset-manager'" />
</div>
</template>
@@ -27,18 +27,3 @@ const gmPanelStore = useGmPanelStore()
let toggle = ref('asset-manager')
</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/main';
-
-.gm-selector {
- display: flex;
- gap: 5px;
- flex-wrap: wrap;
-
- button {
- padding: 6px 15px;
- min-width: 100px;
- }
-}
-</style>
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index 6100957..32c084a 100644
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@@ -1,12 +1,12 @@
<template>
<Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="160">
<template #modalHeader>
- <h3 class="modal-title">GM tools</h3>
+ <h3 class="m-0 font-medium shrink-0">GM tools</h3>
</template>
<template #modalBody>
<div class="content">
- <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
- <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
+ <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
+ <button class="btn-cyan py-1.5 px-[15px] w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
</div>
</template>
</Modal>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index 1ca6bd9..e42f684 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -2,7 +2,7 @@
<div class="notifications">
<Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title">
- <h3 class="modal-title">{{ notification.title }}</h3>
+ <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="modal-notif">{{ notification.message }}</p>
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 770282c..2065211 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -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>
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 9572fe4..4d4f106 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -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>
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 92f484c..82c1bc0 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -2,10 +2,10 @@
<Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
<template #modalHeader>
- <h3 class="modal-title">Tiles</h3>
+ <h3 class="m-0 font-medium shrink-0">Tiles</h3>
</template>
<template #modalBody>
- <div class="container tiles">
+ <div class="m-[15px] tiles">
<div class="tiles">
<img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
<img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index fe00a9b..75bf75d 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -1,26 +1,26 @@
<template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="370" :is-resizable="false">
<template #modalHeader>
- <h3 class="modal-title">Zone settings</h3>
+ <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
</template>
<template #modalBody>
<div class="settings m-[15px]">
- <form method="post" @submit.prevent="" class="modal-form inline">
- <div class="form-fields gap-2.5 flex flex-wrap">
- <div class="form-field w-full flex flex-col mb-5">
+ <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>
<input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
</div>
- <div class="form-field w-[48%] flex flex-col mb-5">
+ <div class="w-[48%] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Width</label>
<input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
</div>
- <div class="form-field w-[48%] flex flex-col mb-5">
+ <div class="w-[48%] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Height</label>
<input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
</div>
- <div class="form-field w-full flex flex-col mb-5">
+ <div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">PVP enabled</label>
<input class="input-cyan max-w-[250px]" name="name" id="name" />
</div>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index fd410e0..a22e8db 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -40,23 +40,19 @@
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modalHeader>
- <h3 class="modal-title">Create your character</h3>
+ <h3 class="m-0 font-medium shrink-0">Create your character</h3>
</template>
<template #modalBody>
- <div class="container character-form">
- <form method="post" @submit.prevent="create" class="modal-form">
- <div class="form-fields">
- <div class="form-field">
- <label for="name">Name</label>
- <input class="input-cyan" v-model="name" name="name" id="name" />
- </div>
- </div>
- <div class="submit">
- <button class="btn-cyan" type="submit">CREATE</button>
+ <div class="m-[15px] 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>
+ <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
</div>
+ <button class="btn-cyan py-1.5 px-[15px] mr-[20px] min-w-[100px] inline-block" type="submit">CREATE</button>
</form>
- <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
+ <button class="btn-cyan py-1.5 px-[15px] min-w-[100px] inline-block" @click="isModalOpen = false">CANCEL</button>
</div>
</template>
</Modal>
@@ -322,9 +318,5 @@ onBeforeUnmount(() => {
}
}
}
-
- .modal-title {
- margin: 0;
- }
}
</style>