From 19411c859c5f5558d89ee3920971653d2fb4df43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Wed, 17 Mar 2021 15:05:28 +0100
Subject: [PATCH] =?UTF-8?q?re=20meta#300=20mobil-l=C3=B8sningen=20for=20s?=
=?UTF-8?q?=C3=B8ketreff=20med=20"stubs"=20er=20implementert=20unntatt=20l?=
=?UTF-8?q?enken=20"tilbake=20til=20s=C3=B8k"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Article.vue | 61 ++++++++++++++++++++------------
src/components/Header.vue | 5 +--
src/components/SearchResults.vue | 36 +++++++++++++++++--
3 files changed, 76 insertions(+), 26 deletions(-)
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 5d62188..7ebf5ef 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,30 +1,37 @@
<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;
}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 11cc312..a037b95 100644
--- a/src/components/Header.vue
+++ b/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;
}
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 1a6b886..84cc1c3 100644
--- a/src/components/SearchResults.vue
+++ b/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>
--
GitLab