From 6a0a70d107049bdb345320c97ae96c077f7e3796 Mon Sep 17 00:00:00 2001
From: Alexei Peters <apeters@fargeo.com>
Date: Wed, 27 Nov 2024 15:17:35 -0800
Subject: [PATCH] update styles, re #6

---
 afrc/src/afrc/Search/SearchPage.vue           | 17 ++++++++------
 .../Search/components/SearchResultItem.vue    | 22 ++++++++++++-------
 .../Search/components/SimpleSearchFilter.vue  |  5 +++++
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index cb1af63..d7e367a 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -179,7 +179,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="container">
+    <div class="afrc-container">
         <!-- Main Content Section -->
         <header>
             <SimpleSearchFilter
@@ -189,25 +189,27 @@ onMounted(async () => {
             <div class="view-buttons">
                 <Button
                     :class="{ active: !showMap }"
-                    variant="outlined"
                     label="terms"
+                    severity="secondary"
                     icon="pi pi-file"
                     icon-pos="top"
+                    :outlined="!showMap"
                     @click="showMap = false"
                 />
                 <Button
                     :class="{ active: showMap }"
-                    variant="outlined"
                     label="map"
+                    severity="secondary"
                     icon="pi pi-map"
                     icon-pos="top"
+                    :outlined="showMap"
                     @click="showMap = true"
                 />
             </div>
         </header>
 
         <main>
-            <section class="search-results-panel">
+            <section class="afrc-search-results-panel">
                 <div class="result-count">{{ resultsCount }} Results</div>
                 <div class="search-result-list">
                     <SearchResultItem
@@ -266,12 +268,13 @@ onMounted(async () => {
 :root {
     font-size: 16px;
 }
-.container {
+.afrc-container {
     font-family: Arial, sans-serif;
     background-color: #f8f8f8;
     line-height: 1.6;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 main {
     display: flex;
@@ -289,7 +292,7 @@ header {
     gap: 5px;
     margin-left: 20px;
 }
-.search-results-panel {
+section.afrc-search-results-panel {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -302,7 +305,7 @@ header {
     gap: 20px;
 }
 .result-count {
-    font-size: 1rem;
+    font-size: 1.6rem;
     margin: 0px;
     margin-bottom: 15px;
 }
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index 12e7f44..f4cdcc4 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import Button from "primevue/button";
 import { inject } from "vue";
 import type { Ref } from "vue";
 
+import Button from "primevue/button";
+
+import arches from "arches";
+
 const resultsSelected = inject("resultsSelected") as Ref<string[]>;
 
 const props = defineProps({
@@ -47,13 +50,16 @@ function clearResult() {
             <div class="actions">
                 <Button
                     label="...show more"
-                    variant="link"
+                    severity="secondary"
+                    text
                 />
                 <Button
                     label="edit"
-                    variant="link"
+                    severity="secondary"
+                    text
                     as="a"
-                    :href="searchResult._id"
+                    target="_blank"
+                    :href="'./' + arches.urls.resource + '/' + searchResult._id"
                 />
             </div>
         </div>
@@ -72,7 +78,7 @@ function clearResult() {
     border: 1px solid rgb(139 145 252);
 }
 .result .result-content {
-    height: 10rem;
+    height: 16rem;
     overflow: hidden;
     padding-inline-start: 10px;
 }
@@ -86,9 +92,9 @@ function clearResult() {
     margin-bottom: 10px;
 }
 .result .image-placeholder {
-    width: 10rem;
-    height: 10rem;
-    min-width: 10rem;
+    width: 16rem;
+    height: 16rem;
+    min-width: 16rem;
     background-color: #eee;
 }
 .actions {
diff --git a/afrc/src/afrc/Search/components/SimpleSearchFilter.vue b/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
index ae459a6..1f8ecaa 100644
--- a/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
+++ b/afrc/src/afrc/Search/components/SimpleSearchFilter.vue
@@ -87,6 +87,7 @@ const updateQuery = function () {
             option-group-label="label"
             option-group-children="items"
             placeholder="find ..."
+            input-class="autocomplete-input"
             @complete="search"
         >
             <template #optiongroup="slotProps">
@@ -112,4 +113,8 @@ const updateQuery = function () {
     background-color: lightgray;
     font-family: Arial, Helvetica, sans-serif;
 }
+:deep(.autocomplete-input) {
+    height: 3rem;
+    font-size: 1.5rem;
+}
 </style>