From 5f3e8ba8aab50255261c0fa71e5bf0c85d7566a9 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 21 Nov 2020 17:43:10 -0600
Subject: [PATCH] Clean up unnecessary wrappers

---
 components/search.vue | 195 ++++++++++++++++++++----------------------
 1 file changed, 94 insertions(+), 101 deletions(-)

diff --git a/components/search.vue b/components/search.vue
index 87b82b9..f6e4967 100644
--- a/components/search.vue
+++ b/components/search.vue
@@ -25,119 +25,112 @@
         </div>
         <div
             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;">
-                            <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 }} -->
 
-                        <!-- 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
-                                v-if="results.length === 0"
-                                class="text-center py-4"
+            <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
+                    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
-                            </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"
+                                <small
+                                    class="text-xs opacity-50"
                                 >
-                                    <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"
-                                        >
-                                            <small
-                                                class="text-xs opacity-50"
-                                            >
-                                                <RelativeTime
-                                                    :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>
+                                    <RelativeTime
+                                        :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]">
-                                    <div
-                                        class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
-                                    >
+                    <client-only v-if="seenItems[app.slug]">
+                        <div
+                            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
-                                                v-if="!app.endpoint.includes('/game/')"
-                                                class="subscribe space-y-6 sm:space-x-6"
-                                            >
-                                                <EmailSubscribe
-                                                    :app-name="app.name"
-                                                    :input-class-groups="{
-                                                        shadow: 'hover:neumorphic-shadow',
-                                                        bg: '',
-                                                        focus: 'bg-transparent neumorphic-shadow pl-8',
-                                                        blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
-                                                    }"
-                                                    class="pointer-events-auto"
-                                                />
-                                            </div>
+                                <div
+                                    v-if="!app.endpoint.includes('/game/')"
+                                    class="subscribe space-y-6 sm:space-x-6"
+                                >
+                                    <EmailSubscribe
+                                        :app-name="app.name"
+                                        :input-class-groups="{
+                                            shadow: 'hover:neumorphic-shadow',
+                                            bg: '',
+                                            focus: 'bg-transparent neumorphic-shadow pl-8',
+                                            blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
+                                        }"
+                                        class="pointer-events-auto"
+                                    />
+                                </div>
 
-                                        </div>
+                            </div>
 
-                                    </div>
-                                </client-only>
-                            </li>
-                        </ul>
-                    </div>
+                        </div>
+                    </client-only>
+                </li>
+            </ul>
 
-                </div>
-            </div>
         </div>
     </div>
 </template>