re meta#300 mobil-løsningen for søketreff med "stubs" er implementert unntatt...

re meta#300 mobil-løsningen for søketreff med "stubs" er implementert unntatt lenken "tilbake til søk"

src/components/Article.vue

 <template>
   <article v-if="article" :class="dictionary">
     <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
-    <section v-if="article.body.pronunciation && article.body.pronunciation.length">
-      <h3>Uttale</h3>
+    <div class="article_content" :class="$vuetify.breakpoint.name">
+      <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
+        <h3>Uttale</h3>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
+          </ul>
+      </section>
+      <section v-if="article.body.etymology && article.body.etymology.length" class="etymology">
+        <h3>Etymologi</h3>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
+          </ul>
+      </section>
+      <section class="definitions">
+        <h3>{{def_label}}</h3>
+        <ol>
+          <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
+        </ol>
+      </section>
+      <section v-if="sub_articles.length" class="expressions">
+        <h3>Faste uttrykk</h3>
         <ul>
-          <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
+          <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
         </ul>
-    </section>
-    <section v-if="article.body.etymology && article.body.etymology.length">
-      <h3>Etymologi</h3>
-        <ul>
-          <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
-        </ul>
-    </section>
-    <section>
-      <h3>{{def_label}}</h3>
-      <ol>
-        <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
-      </ol>
-    </section>
-    <section v-if="sub_articles.length">
-      <h3>Faste uttrykk</h3>
-      <ul>
-        <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
-      </ul>
-    </section>
+      </section>
+      <div class="fade">
+        <router-link :to="link_to_self.ref" @click.native="article_link_click(link_to_self)">
+          Velg ➔
+        </router-link>
+      </div>
+    </div>
   </article>
 </template>
 
@@ -54,6 +61,12 @@ export default {
     article: Object
   },
   computed: {
+    link_to_self: function() {
+      return {
+        ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
+        article_id: this.article.article_id
+      }
+    },
     dictionary: function() {
       return this.article.dictionary
     },
@@ -88,6 +101,10 @@ article {
   background-color: var(--v-tertiary-base);
 }
 
+.fade {
+  display: none;
+}
+
 section {
   padding-top: 1em;
 }

src/components/Header.vue

@@ -3,7 +3,7 @@
   <div>
     <h2 class="article_header">{{header_text}}</h2>
       {{group_list}}
-      <details :title="inflect_tooltip" @toggle="toggle()" v-if="group_list">
+      <details :title="inflect_tooltip" @toggle="toggle()" v-if="group_list" :class="$vuetify.breakpoint.name">
         <summary :class="dictionary">bøying</summary>
         <div class="inflection">
           <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index">
@@ -124,10 +124,11 @@ article h2 {
 
 .dict-label {
   color: var(--v-primary-base)  ;
-  font-weigth: bold;
+  font-weight: bold;
   padding-left: 5px;
   position: absolute;
   top: 0px;
+  left: 15px;
   font-variant-caps: all-small-caps;
 }
 

src/components/SearchResults.vue

@@ -72,8 +72,40 @@ export default {
     min-width: 50%;
   }
 
-  .flex-container  h4 {
-    margin: 0px;
+  #search_results details.xs, #search_results details.sm {
+    display: none;
+  }
+
+  #search_results .article_content.xs, #search_results .article_content.sm {
+    position: relative;
+    height: 100px;
+    overflow: hidden;
+  }
+
+  #search_results .article_content.xs > section, #search_results .article_content.sm > section {
+    display: none;
+  }
+
+  #search_results .article_content.xs h3, #search_results .article_content.sm h3 {
+    display: none;
+  }
+
+  #search_results .article_content.xs > section.definitions, #search_results .article_content.sm > section.definitions {
+    display: block;
+  }
+
+  #search_results .article_content.xs > .fade, #search_results .article_content.sm  > .fade {
+    display: block;
+    text-align: right;
+    font-size: 20px;
+    font-weight: bold;
     color: var(--v-primary-base);
+    padding-top: 30px;
+    width:100%;
+    height:60px;
+    position:absolute;
+    left:0;
+    top:40px;
+    background:linear-gradient(transparent 0px, var(--v-tertiary-base));
   }
 </style>