bedre presentasjon av "alle søkeresultater"

src/components/Preview.vue

 <template>
   <li>
     <div class="preview">
-      <h4>{{searchHit.text || "Alle søkeresultater..."}}</h4>
+      <h4>{{searchHit.text ||
+            (searchHit._source && searchHit._source.lemmas.map(l => l.lemma) || []).join(',') || 
+            "Alle søkeresultater..."}}</h4>
       <h5 v-if="searchHit._source">{{group_list}}</h5>
       {{previewText.substring(0, 40) + (previewText ? '...' : '')}}
     </div>

src/components/SearchResults.vue

 <template>
-  <section class="">
+  <section>
     <h2 v-if="hits.length">Søkeresultater</h2>
-    <ul>
-      <li v-for="(result, index) in extended_results" :key="index">
-        <router-link :to="result.id"  @click.native="article_link_click(result.article)">
-          {{result.label}};
-        </router-link>
-        ({{result.classification}})
-      </li>
+    <ul class="hits">
+      <Preview v-for="(result, index) in hits" :key="index" :searchHit="result" @click.native="article_link_click(result._source)">
+
+      </Preview>
     </ul>
   </section>
 </template>
 
 <script>
 import helpers from '../utils/helpers.js'
+import Preview from './Preview.vue'
+
 export default {
   name: 'SearchResults',
   props: {
@@ -34,10 +33,30 @@ export default {
     }
   },
   methods: {
-    article_link_click: function(item) {
-      this.$emit('search-hit-click', item)
+    article_link_click: function(article) {
+      this.$router.push('' + article.article_id)
+      this.$emit('search-hit-click', article)
     }
+  },
+  components: {
+    Preview
   }
 }
 
 </script>
+<style>
+  .hits  .preview {
+    margin: 10px;
+    padding: 5px;
+    cursor: pointer;
+  }
+
+  .hits  .preview h4 {
+    color: rgb(0, 0, 238);
+    text-decoration: underline;
+  }
+
+  .hits {
+    margin-top: 20px;
+  }
+</style>