Only render row icon when visibile on client

This commit is contained in:
Sam Carlton 2020-11-21 18:26:06 -06:00
parent 2559a65eaa
commit 4e4ec31236

View file

@ -60,10 +60,12 @@
class="flex items-center hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6" class="flex items-center hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6"
style="transition-property: border;" style="transition-property: border;"
> >
<div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker"> <client-only v-if="seenItems[app.slug]">
{{ app.name.charAt(0) }} <div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker">
</div> {{ app.name.charAt(0) }}
<div class="min-w-0 flex-1 px-4 md:mr-48 space-y-2"> </div>
</client-only>
<div class="min-w-0 flex-1 px-4 md:ml-12 md:mr-48 pt-4 md:pt-0 space-y-2">
<div class="text-sm leading-5 font-light truncate"> <div class="text-sm leading-5 font-light truncate">
<template v-if="app.endpoint.includes('/game/')"> <template v-if="app.endpoint.includes('/game/')">
🕹 🕹
@ -93,13 +95,15 @@
</small> </small>
</client-only> </client-only>
</div> </div>
<svg <client-only v-if="seenItems[app.slug]">
class="h-5 w-5 text-gray-400" <svg
viewBox="0 0 20 20" class="absolute right-0 h-5 w-5 text-gray-400"
fill="currentColor" viewBox="0 0 20 20"
> fill="currentColor"
<use href="#chevron-right" /> >
</svg> <use href="#chevron-right" />
</svg>
</client-only>
</a> </a>
<client-only v-if="seenItems[app.slug]"> <client-only v-if="seenItems[app.slug]">
@ -107,7 +111,7 @@
class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none" class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
> >
<div class="search-item-options-container h-full flex justify-center md:justify-end items-center py-4 md:px-12"> <div class="search-item-options-container h-full flex justify-center md:justify-end items-center pb-4 md:py-4 md:px-12">
<div <div
v-if="!app.endpoint.includes('/game/')" v-if="!app.endpoint.includes('/game/')"