ayanova/src/views/home-search.vue

@@ -3,10 +3,10 @@
     <v-row v-if="formState.ready">
       <v-col>
         <v-form ref="form">
-          <v-row>
+          <v-row justify="start">
             <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
 
-            <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-col cols="12" sm="4" lg="4" xl="3">
               <v-text-field
                 v-model="searchPhrase"
                 clearable
@@ -16,7 +16,7 @@
                 hint="text, *xt, te*"
               ></v-text-field>
             </v-col>
-            <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-col cols="12" sm="4" lg="4" xl="3">
               <v-select
                 v-model="searchObjectType"
                 :items="selectLists.objectTypes"
@@ -25,7 +25,7 @@
                 :label="$ay.t('Object')"
               ></v-select>
             </v-col>
-            <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-col cols="12" sm="4" lg="4" xl="3">
               <v-btn
                 color="primary"
                 v-on:click="getDataFromApi()"
@@ -34,35 +34,36 @@
                 <v-icon>fa-search</v-icon>
               </v-btn>
             </v-col>
-
-            <v-col cols="12">
+        
+            <v-col cols="12" sm="12" offset-sm="0" >
               <p v-if="!results.length">{{ $ay.t("NoResults") }}</p>
-              <v-card v-if="results.length" max-width="900px">
+              <v-card v-if="results.length"  max-width="800">
                 <v-list>
                   <v-subheader v-if="maxResultsReturned">
                     <span>({{ $ay.t("TooManyResults") }})</span>
                   </v-subheader>
 
-                  <template v-for="(item, i) in results" >
+                  <template v-for="(item, i) in results">
                     <v-list-item :key="i">
                       <v-list-item-avatar>
                         <v-icon>{{ item.icon }}</v-icon>
                       </v-list-item-avatar>
 
                       <v-list-item-content>
-                        <v-list-item-title
-                          v-text="item.name"
-                        ></v-list-item-title>
+                        <v-btn text @click="openItem">
+                          <v-list-item-title
+                            v-text="item.name"
+                          ></v-list-item-title>
+                        </v-btn>
                       </v-list-item-content>
 
                       <v-list-item-action>
-                        <v-btn icon>
+                        <v-btn icon @click="getExcerpt">
                           <v-icon>fa-info-circle</v-icon>
                         </v-btn>
                       </v-list-item-action>
                     </v-list-item>
                   </template>
-
                 </v-list>
               </v-card>
             </v-col>
@@ -154,6 +155,12 @@ export default {
   },
 
   methods: {
+    openItem(item) {
+      console.log("open item", item);
+    },
+    getExcerpt(item) {
+      console.log("get excerpt", item);
+    },
     getDataFromApi() {
       let vm = this;
       if (!vm.searchPhrase) {