Merge relevant Abstract and references

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

components/content/ArticleDoi.vue

@@ -9,32 +9,20 @@ export interface Props {
   enumerate?: boolean;
   title?: string;
   abstract?: string;
+  isRelevant?: boolean;
+
 }
 
 const props = withDefaults(defineProps<Props>(), {
   enumerate: true,
   divider: false,
+  isRelevant: false,
 });
 
-
-// onBeforeMount(async () => {
-//   await useArticlesStore().initialize()
-// })
-
 const { article } = useFetchArticle(props.doi);
 const { mobile } = useDisplay();
 const show = ref(false);
 
-// const computedArticle = computed(() => { return { ...article.value } })
-
-
-// watch(article, (newArticle) => {
-//   console.log("article updated")
-// }, { deep: true })
-
-
-console.log("aritcle dans composant")
-console.log(article)
 
 const articleTitle = computed(() => {
   return props?.title ?? article?.value?.title ?? props.doi;
@@ -44,42 +32,67 @@ 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 v-if="!mobile" #prepend>
+      <v-icon icon="md:star" :color="props.isRelevant ? 'info' : 'transparent'"></v-icon>
     </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">{{
-          articleTitle
-        }}</span></v-card-title>
-        <v-card-subtitle>
+    <!-- <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> -->
+    <v-card flat color="transparent" density="compact" class="my-0 article-ref">
+      <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-1 align-center"
+            @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>
+        <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">
+        <v-expand-transition>
+          <v-card v-show="show" flat color="transparent">
+            <v-card-text class="px-0">
+              {{ 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 .v-card-subtitle,
+
+
+.article-ref .v-card-item button.v-btn span {
+  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