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

More styling tweaks, updated confirmation modal

Browse Source
This commit is contained in:
Colin Kallemein 2024-10-16 22:23:00 +02:00
parent be3cbf77bf
commit 2fad54fd26
4 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/scss/main.scss
View File

@ -61,7 +61,7 @@ input {
} }
.input-field { .input-field {
@apply px-4 py-2.5 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300; @apply px-4 py-2.5 text-base leading-5 focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
&.inactive { &.inactive {
@apply bg-gray-600/50 hover:cursor-not-allowed; @apply bg-gray-600/50 hover:cursor-not-allowed;
&::placeholder { &::placeholder {
@ -87,7 +87,7 @@ button {
@apply text-center; @apply text-center;
&.btn-cyan { &.btn-cyan {
@apply bg-cyan text-gray-50 text-base rounded py-2.5; @apply bg-cyan text-gray-50 text-base leading-5 rounded py-2.5;
&.active, &.active,
&:hover { &:hover {
@ -96,7 +96,7 @@ button {
} }
&.btn-red { &.btn-red {
@apply bg-red text-gray-50 text-base rounded py-2.5; @apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;
&.active, &.active,
&:hover { &:hover {
@ -105,7 +105,7 @@ button {
} }
&.btn-empty { &.btn-empty {
@apply text-gray-50 border-2 border-solid border-gray-500 text-base rounded py-2.5; @apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
&.active, &.active,
&:hover { &:hover {

20
src/components/utilities/ConfirmationModal.vue
View File

@ -38,24 +38,20 @@ const modalOpened = ref(props.modalOpened)
</script> </script>
<template> <template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190"> <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="350" :modal-height="230">
<template #modalHeader> <template #modalHeader>
<div class="text-white"> <slot name="modalHeader"></slot>
<slot name="modalHeader"></slot>
</div>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="text-gray-300 h-full"> <div class="h-[calc(100%_-_32px)] p-4">
<div class="flex h-full flex-col justify-between"> <div class="h-full flex flex-col justify-between">
<span class="p-2"> <slot name="modalBody"></slot>
<slot name="modalBody"></slot> <div class="grid grid-flow-col justify-stretch gap-4">
</span> <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
<div class="flex justify-between p-2">
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
{{ props.cancelButtonText }} {{ props.cancelButtonText }}
</button> </button>
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()"> <button class="btn-red py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
{{ props.confirmButtonText }} {{ props.confirmButtonText }}
</button> </button>
</div> </div>

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

@ -2,13 +2,13 @@
<Teleport to="body"> <Teleport to="body">
<div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle"> <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative"> <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
<div class="rounded-t-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div> <div class="rounded-t-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
<div class="relative z-10"> <div class="relative z-10">
<slot name="modalHeader" /> <slot name="modalHeader" />
</div> </div>
<div class="flex gap-2.5"> <div class="flex gap-2.5">
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen"> <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" /> <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-3.5 h-3.5 invert" />
</button> </button>
<button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out"> <button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" /> <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div class="overflow-hidden grow relative"> <div class="overflow-hidden grow relative">
<div class="rounded-b-xl absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover opacity-90"></div> <div class="rounded-b-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90"></div>
<div class="relative z-10 h-full"> <div class="relative z-10 h-full">
<slot name="modalBody" /> <slot name="modalBody" />
</div> </div>
@ -87,7 +87,7 @@ let startHeight = 0
let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 } let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
const modalStyle = computed(() => ({ const modalStyle = computed(() => ({
borderRadius: isFullScreen.value ? '0' : '12px', borderRadius: isFullScreen.value ? '0' : '6px',
top: isFullScreen.value ? '0' : `${y.value}px`, top: isFullScreen.value ? '0' : `${y.value}px`,
left: isFullScreen.value ? '0' : `${x.value}px`, left: isFullScreen.value ? '0' : `${x.value}px`,
width: isFullScreen.value ? '100vw' : `${width.value}px`, width: isFullScreen.value ? '100vw' : `${width.value}px`,

13
src/screens/Characters.vue
View File

@ -75,12 +75,12 @@
<div class="p-4 h-[calc(100%_-_32px)]"> <div class="p-4 h-[calc(100%_-_32px)]">
<form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between"> <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
<div class="form-field-full"> <div class="form-field-full">
<label for="name">Nickname</label> <label for="name" class="text-white">Nickname</label>
<input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." /> <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
</div> </div>
<div class="grid grid-flow-col justify-stretch gap-4"> <div class="grid grid-flow-col justify-stretch gap-4">
<button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">CANCEL</button> <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
<button class="btn-cyan py-1.5 px-4 inline-block" type="submit">CREATE</button> <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
</div> </div>
</form> </form>
</div> </div>
@ -90,11 +90,12 @@
<!-- DELETE CHARACTER MODAL --> <!-- DELETE CHARACTER MODAL -->
<ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete"> <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium text-white">Deleting character</h3> <h3 class="m-0 font-medium text-white">Delete character?</h3>
</template> </template>
<template #modalBody> <template #modalBody>
You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span <p class="mt-0 mb-5 text-white text-lg">Do you want to permanently delete
>, are you sure about that? <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span>?
</p>
</template> </template>
</ConfirmationModal> </ConfirmationModal>
</template> </template>