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

Simplify search item structure to reduce dom count

Browse source
This commit is contained in:
Sam Carlton 2020-11-20 13:15:02 -06:00
parent f2711fe07f
commit 9361066244
1 changed files with 15 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/search.vue
View file

@ -57,32 +57,24 @@
> >
<a <a
:href="`/app/${ app.slug }`" :href="`/app/${ app.slug }`"
class="block hover:neumorphic-shadow hover:bg-gradient-to-br from-darkest to-dark focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg -mx-5" class="flex items-center hover:neumorphic-shadow hover:bg-gradient-to-br from-darkest to-dark focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6"
> >
<div class="flex items-center px-4 py-4 sm:px-6"> <div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
<div class="min-w-0 flex-1 flex items-center"> {{ app.name.charAt(0) }}
<div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker"> </div>
{{ app.name.charAt(0) }} <div class="min-w-0 flex-1 px-4 md:mr-48">
</div> <div class="text-sm leading-5 font-light truncate">{{ app.name }}</div>
<div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4"> <div class="mt-2 flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
<div> {{ app.text }}
<div class="text-sm leading-5 font-light truncate">{{ app.name }}</div>
<div class="mt-2 flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
<span class="">{{ app.text }}</span>
</div>
</div>
</div>
</div>
<div>
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<use href="#chevron-right" />
</svg>
</div> </div>
</div> </div>
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<use href="#chevron-right" />
</svg>
</a> </a>
<div <div
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"