diff --git a/src/components/Article.vue b/src/components/Article.vue index 5d621889df731c5a0195560e849f781e626459d2..7ebf5ef8e23649c56baca5b85d52e1e3ae1dd872 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 11cc3123c12d4ac5f3c1a03d5b9685623b468502..a037b95d6d368b85c137415771382a189fbe8bd2 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 1a6b886916150c9007d6edb8d05dbdcd040e8190..84cc1c37f5fcd202215d9d8af640421c58052261 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>