From b272af3e4cb417a638a81323e2977b89a02f8ef4 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 13 Dec 2021 10:52:51 +0100
Subject: [PATCH] keep focus on expand button
---
src/components/Article.vue | 21 +++++----------------
src/components/ArticleFooter.vue | 1 -
src/components/Header.vue | 2 +-
3 files changed, 6 insertions(+), 18 deletions(-)
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 8ea6e903..eaec0f4b 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,7 +1,7 @@
<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>
diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue
index 6081b6d9..5491e600 100644
--- a/src/components/ArticleFooter.vue
+++ b/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>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7d6fb60e..119a3a67 100644
--- a/src/components/Header.vue
+++ b/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>
--
GitLab