From 9038bfe5c381baf4b387270a29a8ccd5b58435a8 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 04:40:27 +1000
Subject: In .vue files, move <template> sections to top

---
 src/components/SearchModal.vue | 71 +++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 36 deletions(-)

(limited to 'src/components/SearchModal.vue')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index b1d95db..7d86a76 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -1,5 +1,39 @@
-<script lang="ts">
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/4 w-3/4 -translate-y-1/2 flex" :style="styles">
+		<div class="relative grow m-2">
+			<input type="text" class="block border p-1 w-full" ref="searchInput"
+				@keyup.enter="onSearch" @keyup.esc="onClose"
+				@input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/>
+			<div class="absolute top-[100%] w-full"
+				:style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}">
+				<div v-for="(sugg, idx) of searchSuggs"
+					:style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}"
+					class="border p-1 hover:underline hover:cursor-pointer flex"
+					@click="resolveSearch(sugg.canonicalName || sugg.name)">
+					<div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
+						<span>{{suggDisplayStrings[idx][0]}}</span>
+						<span class="font-bold">{{suggDisplayStrings[idx][1]}}</span>
+						<span>{{suggDisplayStrings[idx][2]}}</span>
+					</div>
+					<info-icon class="hover:cursor-pointer my-auto w-5 h-5"
+						@click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/>
+				</div>
+				<div v-if="searchHadMoreSuggs" class="text-center border">...</div>
+			</div>
+		</div>
+		<div class="my-auto hover:cursor-pointer hover:brightness-75  rounded border shadow">
+			<search-icon @click.stop="onSearch" class="block w-8 h-8"/>
+		</div>
+		<div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
+			<log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
+				:class="uiOpts.searchJumpMode ? 'opacity-100' : 'opacity-30'"/>
+		</div>
+	</div>
+</div>
+</template>
 
+<script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import SearchIcon from './icon/SearchIcon.vue';
 import LogInIcon from './icon/LogInIcon.vue';
@@ -191,41 +225,6 @@ export default defineComponent({
 });
 </script>
 
-<template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
-	<div class="absolute left-1/2 -translate-x-1/2 top-1/4 w-3/4 -translate-y-1/2 flex" :style="styles">
-		<div class="relative grow m-2">
-			<input type="text" class="block border p-1 w-full" ref="searchInput"
-				@keyup.enter="onSearch" @keyup.esc="onClose"
-				@input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/>
-			<div class="absolute top-[100%] w-full"
-				:style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}">
-				<div v-for="(sugg, idx) of searchSuggs"
-					:style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}"
-					class="border p-1 hover:underline hover:cursor-pointer flex"
-					@click="resolveSearch(sugg.canonicalName || sugg.name)">
-					<div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
-						<span>{{suggDisplayStrings[idx][0]}}</span>
-						<span class="font-bold">{{suggDisplayStrings[idx][1]}}</span>
-						<span>{{suggDisplayStrings[idx][2]}}</span>
-					</div>
-					<info-icon class="hover:cursor-pointer my-auto w-5 h-5"
-						@click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/>
-				</div>
-				<div v-if="searchHadMoreSuggs" class="text-center border">...</div>
-			</div>
-		</div>
-		<div class="my-auto hover:cursor-pointer hover:brightness-75  rounded border shadow">
-			<search-icon @click.stop="onSearch" class="block w-8 h-8"/>
-		</div>
-		<div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
-			<log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
-				:class="uiOpts.searchJumpMode ? 'opacity-100' : 'opacity-30'"/>
-		</div>
-	</div>
-</div>
-</template>
-
 <style>
 .animate-red-then-fade {
 	animation-name: red-then-fade;
-- 
cgit v1.2.3

