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

Style search list

Browse source
This commit is contained in:
Sam Carlton 2020-09-19 21:02:18 -05:00
parent 350b62decd
commit d59a73ab14
1 changed files with 53 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

61
components/search.vue
View file

@ -6,7 +6,7 @@
ref="search"
v-model="query"
aria-label="Type here to Search"
class="appearance-none w-full text-white font-bold sm:text-5xl outline-none bg-transparent p-3"
class="appearance-none w-full text-white font-hairline sm:text-5xl outline-none bg-transparent p-3"
type="search"
placeholder="Type to Search"
autofocus
@ -17,21 +17,66 @@
</div>
<div
ref="search-container"
class="search-container relative w-full overflow-scroll scroll-elastic overscroll-contain"
class="search-container relative w-full"
>
<div class="search-wrapper flex justify-center pb-32">
<div class="search-scroller container w-full relative min-h-screen px-5">
<div class="search-scroller container w-full relative px-5">
<div class="search-results py-8">
<div class="results-container">
<div
<ul class="results-container rounded-lg border neumorphic-shadow">
<li
v-for="(app, i) in results"
:key="`${app.slug}-${i}`"
>
{{ app.name }}
</div>
</div>
<a
:href="`/app/${ app.slug }`"
class="block hover:neumorphic-shadow hover:bg-gradient-to-tr from-darkest to-darker focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg">
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="min-w-0 flex-1 flex items-center">
<div class="flex-shrink-0">
<div
class="h-12 w-12 rounded-full flex items-center justify-center neumorphic-shadow-inner"
>
<div>{{ app.name.charAt(0) }}</div>
</div>
</div>
<div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
<div>
<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">
<span class="truncate">{{ app.text }}</span>
</div>
</div>
<div class="hidden md:block">
<div>
<!-- <div class="text-sm leading-5 text-gray-900">
Applied on
<time datetime="2020-01-07">January 7, 2020</time>
</div> -->
<!-- <div class="mt-2 flex items-center text-sm leading-5 text-gray-500">
{{ app.text }}
</div> -->
</div>
</div>
</div>
</div>
<div>
<!-- Heroicon name: chevron-right -->
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>