remove background for references

components/content/ArticleDoi.vue

@@ -26,13 +26,8 @@ const articleAbstract = computed(() => {
 });
 </script>
 <template>
-  <v-list-item
-    :href="article?.href"
-    :id="props.doi"
-    :target="article?.target"
-    density="compact"
-    class="px-1"
-  >
+  <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 ?? "#" }}
@@ -44,30 +39,20 @@ const articleAbstract = computed(() => {
             </v-avatar>
         </template> -->
     <v-card flat color="transparent" density="compact" class="my-0">
-      <v-card-item density="compact" :class="mobile ? 'px-0' : null">
-        <v-card-title
-          ><span class="text-subtitle-1 font-weight-bold">{{
-            articleTitle
-          }}</span></v-card-title
-        >
+      <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>
-          {{ article?.subtitle ?? "no authors" }}</v-card-subtitle
-        >
+          {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
         <v-card-subtitle>
           {{ article?.containerTitle ?? "no containerTitle" }} ({{
             article?.year
-          }})</v-card-subtitle
-        >
+          }})</v-card-subtitle>
       </v-card-item>
-      <v-card-item density="compact" :class="mobile ? 'px-0' : null">
-        <v-btn
-          v-if="articleAbstract"
-          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 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>
       <v-expand-transition>
         <v-card v-show="show" flat color="transparent">

components/content/ArticleReference.vue

@@ -24,12 +24,13 @@ const articleTitle = computed(() => {
 const articleAuthorsString = computed(() => {
     // console.log(article.value)
     // console.log(props.doi)
-    return article.value?.author?.length > 0 ? `${article.value.author[0].family} ${article.value.author[0].given} & al` : null
+    return article.value?.author?.length > 0 ? `${article.value.author[0].family} & al` : null
 })
 
 </script>
 <template>
-    <v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact" class="px-1">
+    <v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact"
+        class="px-1">
         <template #prepend v-if="!mobile && enumerate">
             <v-avatar color="primary" size="small" density="compact" variant="tonal">
                 {{ props?.index ?? "#" }}
@@ -39,27 +40,16 @@ const articleAuthorsString = computed(() => {
         <template #title>
             <span class="text-subtitle-1 font-weight-bold">{{
                 articleTitle
-            }}</span> <span class="text-caption">{{ articleAuthorsString }}</span>
+            }} </span>
 
         </template>
+        <template #subtitle><span class="text-caption">{{ articleAuthorsString }}</span></template>
         <template #append v-if="!mobile">
             <span> {{ article?.containerTitle ?? "no containerTitle" }} ({{
                 article?.year
             }})</span>
         </template>
-        <!-- <v-card flat color="transparent" density="compact" class="my-0">
-            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
-                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{
-                    articleTitle
-                }}</span></v-card-title>
-                <v-card-subtitle>
-                    {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
-                <v-card-subtitle>
-                    {{ article?.containerTitle ?? "no containerTitle" }} ({{
-                        article?.year
-                    }})</v-card-subtitle>
-            </v-card-item>
-        </v-card> -->
+
     </v-list-item>
     <v-divider v-if="props.divider" inset></v-divider>
 </template>
\ No newline at end of file

components/content/References.vue

@@ -15,7 +15,7 @@ const computedDois = computed(() => {
     <div v-if="computedDois?.length > 0">
         <ProseH2 id="references">References</ProseH2>
 
-        <v-list density="compact">
+        <v-list density="compact" bg-color="transparent">
             <ArticleReference v-for="(item, index) in computedDois" :key="item.doi" :index="index + 1" :doi="item.doi"
                 :title="item?.title" :divider="item.divider" :abstract="item?.abstract" />
         </v-list>

components/content/RelevantAbstracts.vue

@@ -17,7 +17,7 @@ const computedDois = computed(() => {
   <div v-if="computedDois?.length > 0">
     <ProseH2 id="relevant-abstracts">Relevant abstracts</ProseH2>
 
-    <v-list density="compact">
+    <v-list density="compact" bg-color="transparent">
       <ArticleDoi v-for="(item, index) in computedDois" :key="item.doi" :index="index + 1" :doi="item.doi"
         :title="item?.title" :divider="item.divider" :abstract="item?.abstract" />
     </v-list>