Merge relevant Abstract and references

• merge the 2 sections
• Make the way references are displayed more compact

components/content/ArticleDoi.vue

@@ -44,42 +44,58 @@ const articleAbstract = computed(() => {
 });
 </script>
 <template>
-  <v-list-item :href="article?.href" :id="props.doi" :target="article?.target" density="compact"
-    color="transparent" class="px-1">
-    <template #prepend v-if="!mobile && enumerate">
-      <v-avatar color="primary" size="small" density="compact" variant="tonal">
-        {{ props?.index ?? "#" }}
-      </v-avatar>
+  <v-list-item :href="article?.href" :id="props.doi" :target="article?.target" density="compact" color="transparent"
+    class="px-1">
+    <template #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 #append v-if="!mobile">
-            <v-avatar>
-                <v-icon>{{ article?.prependIcon }}</v-icon>
-            </v-avatar>
-        </template> -->
-    <v-card flat color="transparent" density="compact" class="my-0">
-      <v-card-item density="compact" :class="mobile ? 'px-0 py-1' : 'py-1'">
-        <v-card-title><span class="text-subtitle-1 font-weight-bold">{{
+    <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-subtitle>
+        <v-card-subtitle class="py-0">
           {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
-        <v-card-subtitle>
+        <v-card-subtitle class="py-0">
           {{ article?.containerTitle ?? "no containerTitle" }} ({{
             article?.year
           }})</v-card-subtitle>
       </v-card-item>
-      <v-card-item v-if="articleAbstract" density="compact" :class="mobile ? 'px-0' : 'py-1'">
-        <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-          @click.stop.prevent="show = !show">Abstract</v-btn>
+      <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-expand-transition>
+          <v-card v-show="show" flat color="transparent">
+            <v-card-text>
+              {{ articleAbstract }}
+            </v-card-text>
+          </v-card>
+        </v-expand-transition>
       </v-card-item>
-      <v-expand-transition>
-        <v-card v-show="show" flat color="transparent">
-          <v-card-text>
-            {{ articleAbstract }}
-          </v-card-text>
-        </v-card>
-      </v-expand-transition>
     </v-card>
   </v-list-item>
   <v-divider v-if="props.divider" inset></v-divider>
-</template>
\ No newline at end of file
+</template>
+<style scoped>
+.article-ref .v-card-item * {
+  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;
+  line-height: 1rem !important;
+
+}
+
+.article-ref .v-card-item button.v-btn span {
+  font-size: 0.5rem !important;
+}
+</style>
\ No newline at end of file