update styles, re #6

archesproject · Nov 27, 2024 · 8be1841 · 8be1841
1 parent 8789baf
commit 8be1841
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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>