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

4
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -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 }" />

14
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -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>