Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Use separate template for unseen rows

Browse source
This commit is contained in:
Sam Carlton 2020-11-21 20:09:06 -06:00
parent 6f184c3f5a
commit caf21c3766
1 changed files with 28 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

51
components/search.vue
View file

@ -62,25 +62,28 @@
> >
<a <a
:href="app.endpoint" :href="app.endpoint"
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 flex-col justify-center inset-x-0 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 space-y-2 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-6 "
style="transition-property: border;" style="transition-property: border;"
> >
<client-only v-if="seenItems[app.slug]"> <template v-if="!seenItems[app.slug]">
<div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker"> {{ app.endpoint.includes('/game/') ? `🕹${app.name}` : app.name }}
{{ app.name.charAt(0) }} <div class="text-sm leading-5 font-bold">
{{ app.text }}
</div> </div>
</client-only> </template>
<div class="min-w-0 flex-1 px-4 md:ml-12 md:mr-48 pt-4 md:pt-0 space-y-2"> <template v-else>
<div class="text-sm leading-5 font-light truncate"> <client-only>
{{ app.endpoint.includes('/game/') ? `🕹${app.name}` : app.name }} <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="flex items-center text-sm leading-5 text-gray-500 overflow-hidden"> </div>
</client-only>
{{ app.endpoint.includes('/game/') ? `🕹${app.name}` : app.name }}
<div class="text-sm leading-5 font-bold">
{{ app.text }} {{ app.text }}
</div> </div>
<!-- app.lastUpdated: {{ app.lastUpdated }} --> <!-- app.lastUpdated: {{ app.lastUpdated }} -->
<client-only <client-only v-if="app.lastUpdated">
v-if="app.lastUpdated"
>
<small <small
class="text-xs opacity-50" class="text-xs opacity-50"
> >
@ -96,16 +99,18 @@
⏳ ⏳
</small> </small>
</client-only> </client-only>
</div>
<client-only v-if="seenItems[app.slug]"> <client-only>
<svg <svg
class="absolute right-0 h-5 w-5 text-gray-400" class="absolute right-0 h-5 w-5 text-gray-400"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
<use href="#chevron-right" /> <use href="#chevron-right" />
</svg> </svg>
</client-only> </client-only>
</template>
</a> </a>
<client-only v-if="seenItems[app.slug]"> <client-only v-if="seenItems[app.slug]">