diff --git a/src/components/Article.vue b/src/components/Article.vue index b072d8cf51e008ee3baced75b27ab525254384f5..67d747f8b98897dbae77271f457ec706cf22df9b 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -1,5 +1,5 @@ <template> - <article 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, 'collapsable': collapsable}" v-if="article"> <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" /> <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/> @@ -253,4 +253,8 @@ ul li.definition { padding: 12px; } +.collapsable { + padding-bottom: 38px; +} + </style> diff --git a/src/components/Header.vue b/src/components/Header.vue index f5e35279853f988bbbf557217f73651863887ebe..a800092400babdb926283461410a2494da752d9a 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -23,15 +23,16 @@ </span> <span v-if="$parent.collapsed && $parent.has_content" class="definition_snippet"> - {{$parent.snippet}} - </span> <span v-if="$parent.collapsable"> - <v-btn - text - small + </span> <span v-if="$parent.collapsable" > + <v-btn class="expand_icon" + :title="$parent.collapsed? 'Vis mer' : 'Kollaps'" + width="100%" + plain - class="expand_icon" - @click="$parent.collapsed=!$parent.collapsed">{{$parent.collapsed? 'Vis mer' : 'Kollaps'}} - <v-icon right color="primary">{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn></span> + + @click="$parent.collapsed=!$parent.collapsed"> + <v-icon right>{{$parent.collapsed ? 'expand_more': 'expand_less'}}</v-icon></v-btn></span> </div> </template> @@ -201,4 +202,14 @@ div.lemma { color: var(--v-text-base) !important; } +.expand_icon { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + text-align: center; + border-bottom-right-radius: 28px; + border-bottom-left-radius: 28px; +} + </style>