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

Prep hair color radio btns, adjust styling hairstyles to make it tab friendly

Browse Source
This commit is contained in:
Colin Kallemein 2024-11-24 20:46:29 +01:00
parent 64f5ac45dd
commit 25a2fd24f3
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,10 +73,10 @@
class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
hover:bg-gray-500 hover:border-gray-400 hover:bg-gray-500 hover:border-gray-400
focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan
has-[:checked]:bg-cyan has-[:checked]:border-white" has-[:checked]:bg-cyan has-[:checked]:border-transparent"
> >
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" /> <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
<input type="radio" name="hair" :value="null" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId === null" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" /> <input type="radio" name="hair" :value="null" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId === null" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div> </div>
<!-- TODO #255: make radio button so we can set a value, do the same with swatches --> <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
<div <div
@ -84,18 +84,18 @@
class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
hover:bg-gray-500 hover:border-gray-400 hover:bg-gray-500 hover:border-gray-400
focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500
has-[:checked]:bg-cyan has-[:checked]:border-white" has-[:checked]:bg-cyan has-[:checked]:border-transparent"
> >
<img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" /> <img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
<input type="radio" name="hair" :value="hair" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId == hair.id" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" /> <input type="radio" name="hair" :value="hair" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId == hair.id" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">
<span class="text-sm">Hair color</span> <span class="text-sm">Hair color</span>
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
<!-- TODO: replace with hairstyles --> <!-- TODO: replace with hair colors -->
<button v-for="n in 10" class="bg-white w-6 h-6 rounded-sm"></button> <input type="radio" name="hair-color" v-for="n in 10" class="bg-white w-6 h-6 m-0 rounded-sm hover:cursor-pointer" />
</div> </div>
</div> </div>
</div> </div>