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

Improved responsive styling character select screen

Browse Source
This commit is contained in:
Colin Kallemein 2024-08-03 16:30:56 +02:00
parent 891548f0d5
commit 64f1f73b45
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/screens/Characters.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="bg-gray-300 relative">
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-20">
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
<div class="filler"></div>
<div class="flex justify-center flex-wrap gap-14 w-full max-h-[650px] overflow-auto" v-if="!isLoading">
<div v-for="character in characters" :key="character.id" class="group m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
<div v-for="character in characters" :key="character.id" class="group first:ml-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
<!-- @TODO : Add a confirmation dialog -->
@ -19,7 +19,7 @@
<div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-white rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
</div>
<div class="character new-character m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
<div class="character new-character mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
<button class="h-full w-full py-10 flex flex-col justify-between" @click="isModalOpen = true">
<div class="filler"></div>
<img class="w-24 h-24 m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
@ -46,7 +46,7 @@
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0">Create your character</h3>
<h3 class="m-0 font-medium">Create your character</h3>
</template>
<template #modalBody>