imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

#286 - Added global class for fully absolute-centering elements

Browse Source
This commit is contained in:
Colin Kallemein
2024-12-29 02:21:21 +01:00
parent 7bb7af9476
commit d0c08c25fd
12 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/screens/Characters.vue
View File

@ -17,12 +17,12 @@
<div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
<div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
<div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
<img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" alt="Player head" />
<img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
<input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
</div>
<div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
<button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
<img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
<img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
</button>
</div>
</div>