From 65e2a2e1601de0619790afcad3d507726c5044a7 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 13 Dec 2021 11:25:54 +0100
Subject: [PATCH] more accessible expand button
---
src/components/Article.vue | 10 +++++++---
src/components/DictionaryView.vue | 6 +++---
src/components/Header.vue | 8 +++++++-
src/components/Pagination.vue | 6 +++---
4 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/src/components/Article.vue b/src/components/Article.vue
index eaec0f4b..3cfe1338 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,7 +1,7 @@
<template>
<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" />
- <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>
@@ -76,11 +76,15 @@ export default {
},
data: function() {
return {
- collapsed: true
+ collapsed: this.$parent.results_bm.length > 1 || this.$parent.results_bm.length > 1
}
},
- computed: {
+ computed: {
+ collapsable: function() {
+ return this.$parent.results_bm.length > 1 || this.$parent.results_bm.length > 1
+
+ },
link_to_self: function() {
return {
ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 00ec812b..0c551514 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -101,7 +101,7 @@ function navigate_to_article(self, source) {
.then(function(response){
self.waiting_for_articles = false
history.replaceState({article: self.article,
- search_results: [],
+ search_results: {},
lang: self.lang,
error: self.error,
pos_selected: self.pos_selected,
@@ -217,7 +217,7 @@ export default {
data: function() {
return {
article_key: 0,
- search_results: [],
+ search_results: {},
lang: this.$store.state.defaultDict,
waiting_for_articles: true,
waiting_for_metadata: true,
@@ -394,7 +394,7 @@ export default {
item.article.source = this.previous
this.article = item.article
history.replaceState({article: this.article,
- search_results: [],
+ search_results: {},
lang: this.lang,
error: null,
pos_selected: this.pos_selected,
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 119a3a67..20326151 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -21,12 +21,18 @@
</v-card>
</v-menu>)
</span>
+ <v-btn rounded v-if="$parent.collapsable"
+ depressed
+ x-small
+ class="expand_icon"
+ @click="$parent.collapsed=!$parent.collapsed">{{$parent.collapsed? 'Vis innhold' : 'Skjul innhold'}}
+ <v-icon right color="primary">{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn>
<div class="inflection-wrapper" v-if="inflected && !$parent.collapsed">
<v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
<span>{{inflection_button_text}}</span><span class = "inflection-arrow"><v-icon right>{{inflection_arrow}}</v-icon></span>
</v-btn>
- <div class="inflection-canvas" v-if="inflection_expanded">
+ <div class="inflection-canvas" v-if="inflection_expanded" tabindex="0">
<inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
</div>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 28fa48c4..064a5ff5 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -3,9 +3,9 @@
<span color="tertiary" class = "pagination" v-if="!$parent.$parent.article && $parent.$parent.article_info && ($parent.count_bm > $parent.$parent.perPage || $parent.count_nn > $parent.$parent.perPage)">
<v-pagination @input="update" v-model="$parent.$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil(Math.max($parent.count_bm, $parent.count_nn)/$parent.$parent.perPage)"></v-pagination>
<span class="result-counts" v-if="!bottom">
- <span class="total-results">{{$parent.$parent.total_results()}} treff </span>
- <span v-if="$parent.$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{$parent.count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{$parent.count_nn}}</span>
- <span v-if="$parent.$parent.lang!='bm,nn'" class="dict-counts"> | {{$t('dicts_inline.'+$parent.lang)}}</span>
+ <span tabindex="0" class="total-results">{{$parent.$parent.total_results()}} treff </span>
+ <span tabindex="0" v-if="$parent.$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{$parent.count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{$parent.count_nn}}</span>
+ <span tabindex="0" v-if="$parent.$parent.lang!='bm,nn'" class="dict-counts"> | {{$t('dicts_inline.'+$parent.lang)}}</span>
</span>
</span>
--
GitLab