diff --git a/components/content/ArticleDoi.vue b/components/content/ArticleDoi.vue index 6487ae8e7ce257c97398aad408d5e3d2962c6fb2..e20bc3c21d16e1de0bf8afb2189516e1c25fd08f 100644 --- a/components/content/ArticleDoi.vue +++ b/components/content/ArticleDoi.vue @@ -37,16 +37,22 @@ const articleAbstract = computed(() => { <template v-if="!mobile" #prepend> <v-icon icon="md:star" :color="props.isRelevant ? 'info' : 'transparent'"></v-icon> </template> - <template v-if="!mobile" #append> + <!-- <template v-if="!mobile" #append> <v-btn v-if="articleAbstract" size="x-small" variant="plain" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0" @click.stop.prevent="show = !show">Abstract</v-btn> - </template> + </template> --> <v-card flat color="transparent" density="compact" class="my-0 article-ref"> - <v-card-item density="compact" :class="mobile ? 'px-0 py-0' : 'py-0'"> - <v-card-title class="py-0"><span class="font-weight-bold">{{ - articleTitle - }}</span></v-card-title> + <v-card-item density="compact" class="pa-0"> + <v-toolbar class="py-0 d-flex align-start article-toolbar" color="transparent" :height="20"> + <v-toolbar-title class="font-weight-bold ml-0">{{ articleTitle }}</v-toolbar-title> + <v-btn v-if="articleAbstract" size="x-small" variant="plain" color="primary" + :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0" + @click.stop.prevent="show = !show">Abstract</v-btn> + </v-toolbar> + <!-- <v-card-title class="py-0"><span class="font-weight-bold">{{ + articleTitle + }}</span></v-card-title> --> <v-card-subtitle class="py-0"> {{ article?.subtitle ?? "no authors" }}</v-card-subtitle> <v-card-subtitle class="py-0"> @@ -54,13 +60,10 @@ const articleAbstract = computed(() => { article?.year }})</v-card-subtitle> </v-card-item> - <v-card-item class="pa-0 pl-4"> - <!-- <v-btn v-if="articleAbstract" size="x-small" variant="plain" - :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0" - @click.stop.prevent="show = !show">Abstract</v-btn> --> + <v-card-item class="pa-0"> <v-expand-transition> <v-card v-show="show" flat color="transparent"> - <v-card-text> + <v-card-text class="px-0"> {{ articleAbstract }} </v-card-text> </v-card> @@ -75,17 +78,20 @@ const articleAbstract = computed(() => { line-height: 1rem !important; } -.article-ref .v-card-item * { - font-size: 0.9rem !important; -} + .article-ref .v-card-item .v-card-subtitle, -.article-ref .v-card-item * .v-btn { - font-size: 0.8rem !important; -} .article-ref .v-card-item button.v-btn span { - font-size: 0.5rem !important; + font-size: 0.8rem !important; +} +.article-toolbar .v-toolbar-title { + font-size: 0.9rem !important; } + +.article-toolbar div.v-toolbar__content * { + align-items: flex-start; +} + </style> \ No newline at end of file