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

Clean up unnecessary wrappers

Browse source
This commit is contained in:
Sam Carlton 2020-11-21 17:43:10 -06:00
parent 4903eb17d3
commit 5f3e8ba8aa
1 changed files with 94 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

195
components/search.vue
View file

@ -25,119 +25,112 @@
</div> </div>
<div <div
ref="search-container" ref="search-container"
class="search-container relative w-full" class="search-container relative w-full py-8"
> >
<div class="search-wrapper flex justify-center">
<div class="search-scroller w-full relative">
<div class="search-results py-8"> <svg style="display: none;">
<defs>
<path
id="chevron-right"
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"
/>
</defs>
</svg>
<svg style="display: none;"> <!-- seenItems: {{ seenItems }} -->
<defs>
<path
id="chevron-right"
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"
/>
</defs>
</svg>
<!-- seenItems: {{ seenItems }} --> <ul class="results-container rounded-lg border border-gray-700 divide-y divide-gray-700 bg-gradient-to-br from-darker to-dark neumorphic-shadow-outer px-5">
<li
<ul class="results-container rounded-lg border border-gray-700 divide-y divide-gray-700 bg-gradient-to-br from-darker to-dark neumorphic-shadow-outer px-5"> v-if="results.length === 0"
<li class="text-center py-4"
v-if="results.length === 0" >
class="text-center py-4" No apps found
</li>
<li
v-for="(app, i) in results"
:key="`${app.slug}-${i}`"
:ref="`${app.slug}-row`"
:data-app-slug="app.slug"
class="relative"
>
<a
:href="app.endpoint"
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-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
{{ app.name.charAt(0) }}
</div>
<div class="min-w-0 flex-1 px-4 md:mr-48 space-y-2">
<div class="text-sm leading-5 font-light truncate">
<span v-if="app.endpoint.includes('/game/')">
🕹
</span>
{{ app.name }}
</div>
<div class="flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
{{ app.text }}
</div>
<!-- app.lastUpdated: {{ app.lastUpdated }} -->
<client-only
v-if="app.lastUpdated"
> >
No apps found <small
</li> class="text-xs opacity-50"
<li
v-for="(app, i) in results"
:key="`${app.slug}-${i}`"
:ref="`${app.slug}-row`"
:data-app-slug="app.slug"
class="relative"
>
<a
:href="app.endpoint"
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-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker"> <RelativeTime
{{ app.name.charAt(0) }} :timestamp="app.lastUpdated.timestamp"
</div> class="text-xs opacity-50"
<div class="min-w-0 flex-1 px-4 md:mr-48 space-y-2"> />
<div class="text-sm leading-5 font-light truncate"> </small>
<span v-if="app.endpoint.includes('/game/')"> <small
🕹 slot="placeholder"
</span> class="text-xs opacity-50"
{{ app.name }} >
</div> ⏳
<div class="flex items-center text-sm leading-5 text-gray-500 overflow-hidden"> </small>
{{ app.text }} </client-only>
</div> </div>
<!-- app.lastUpdated: {{ app.lastUpdated }} --> <svg
<client-only class="h-5 w-5 text-gray-400"
v-if="app.lastUpdated" viewBox="0 0 20 20"
> fill="currentColor"
<small >
class="text-xs opacity-50" <use href="#chevron-right" />
> </svg>
<RelativeTime </a>
:timestamp="app.lastUpdated.timestamp"
class="text-xs opacity-50"
/>
</small>
<small
slot="placeholder"
class="text-xs opacity-50"
>
⏳
</small>
</client-only>
</div>
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<use href="#chevron-right" />
</svg>
</a>
<client-only v-if="seenItems[app.slug]"> <client-only v-if="seenItems[app.slug]">
<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"
> >
<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 py-4 md:px-12">
<div <div
v-if="!app.endpoint.includes('/game/')" v-if="!app.endpoint.includes('/game/')"
class="subscribe space-y-6 sm:space-x-6" class="subscribe space-y-6 sm:space-x-6"
> >
<EmailSubscribe <EmailSubscribe
:app-name="app.name" :app-name="app.name"
:input-class-groups="{ :input-class-groups="{
shadow: 'hover:neumorphic-shadow', shadow: 'hover:neumorphic-shadow',
bg: '', bg: '',
focus: 'bg-transparent neumorphic-shadow pl-8', focus: 'bg-transparent neumorphic-shadow pl-8',
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3', blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
}" }"
class="pointer-events-auto" class="pointer-events-auto"
/> />
</div> </div>
</div> </div>
</div> </div>
</client-only> </client-only>
</li> </li>
</ul> </ul>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>