noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More global styling, improved modal form styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-14 22:14:33 +02:00
parent 4e708dbd61
commit 92103cea9e
5 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/utilities/Modal.vue
View File

@ -275,23 +275,37 @@ function handleResize() {
display: inline;
.form-fields {
display: flex;
flex-direction: column;
margin-bottom: 20px;
.form-field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
label {
margin-bottom: 10px;
font-family: 'Poppins';
}
label {
margin-bottom: 5px;
font-family: $titles;
}
input {
max-width: 250px;
font-family: 'Poppins';
border: 1px solid $cyan;
border-radius: 5px;
background-color: rgba($white, 0.8);
padding: 8px 10px;
input {
max-width: 250px;
font-family: $titles;
border-radius: 5px;
padding: 8px 10px;
}
&.two-col {
flex-direction: row;
gap: 20px;
.field {
display: flex;
flex-direction: column;
margin-bottom: 0;
input {
max-width: 105px;
}
}
}
}
}
}
}

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

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()">
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-height="440">
<template #modalHeader>
<h3 class="modal-title">Zone settings</h3>
</template>
@ -7,21 +7,23 @@
<template #modalBody>
<form method="post" @submit.prevent="" class="modal-form">
<div class="form-fields">
<div>
<div class="form-field">
<label for="name">Name</label>
<input v-model="name" name="name" id="name" />
<input class="input-cyan" v-model="name" name="name" id="name" />
</div>
<div>
<label for="name">Width</label>
<input v-model="width" name="name" id="name" type="number" />
<div class="form-field two-col">
<div class="field">
<label for="name">Width</label>
<input class="input-cyan" v-model="width" name="name" id="name" type="number" />
</div>
<div class="field">
<label for="name">Height</label>
<input class="input-cyan" v-model="height" name="name" id="name" type="number" />
</div>
</div>
<div>
<label for="name">Height</label>
<input v-model="height" name="name" id="name" type="number" />
</div>
<div>
<div class="form-field">
<label for="name">PVP enabled</label>
<input name="name" id="name" />
<input class="input-cyan" name="name" id="name" />
</div>
</div>
</form>