keep focus on expand button

src/components/Article.vue

 <template>
-  <article @click.passive="collapsed=false" v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary}" v-if="article">
+  <article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary}" v-if="article">
     <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
-    <span><v-icon class="expand_icon" v-if="collapsed">expand_more</v-icon></span>
+    <v-btn rounded depressed x-small class="expand_icon" @click="collapsed=!collapsed">{{collapsed? 'Vis innhold' : 'Skjul innhold'}}<v-icon right color="primary">{{collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn>
     <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
       <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
         <h3>Uttale</h3>
@@ -27,11 +27,6 @@
           <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
         </ul>
       </section>
-      <div class="fade">
-        <router-link class="choose" :to="link_to_self.ref" @click.native="details_click(link_to_self)">
-          {{$t("choose")}} <v-icon color="primary" right>chevron_right</v-icon>
-        </router-link>
-      </div>
     </div>
     <ArticleFooter v-if="!collapsed" :article="article" @collapse = "collapsed=true"/>
 </article>
@@ -144,9 +139,6 @@ article {
   background-color: #ffffff;
 }
 
-.xs .article_footer, .sm .article_footer {
-  display: none;
-}
 
 .welcome .article_footer {
   display: block;
@@ -156,9 +148,6 @@ article {
   border: none;
 }
 
-.fade {
-  display: none;
-}
 
 section {
   padding-top: 1em;
@@ -247,9 +236,9 @@ ul li.definition {
 }
 
 .expand_icon {
-  float: right;
-  top: -10px;
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
 }
 
-
 </style>

src/components/ArticleFooter.vue

@@ -48,7 +48,6 @@
           </v-card-actions>
         </v-card>
       </v-dialog>
-      <span class="expand_icon"><v-btn @click.stop ="$emit('collapse')" icon><v-icon color="rgba(0, 0, 0, 0.54) !important" v-if="!$parent.collapsed">expand_less</v-icon></v-btn></span>
   </div>
 </template>
 

src/components/Header.vue

@@ -2,7 +2,7 @@
 <template>
   <div class = "header">
     <span class="dict-label" tabindex="0">{{dict_label}}</span>
-    <div class="article_header" tabindex="0"><h2><router-link :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)">{{header_text}}</router-link></h2>
+    <div class="article_header" tabindex="0"><h2>{{header_text}}</h2>
     <span class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></div>
     <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
     <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>