start change relevant abstract

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

components/content/MolstarPdbePlugin.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { width, height } = useDisplay()
 
-const maxWidth = ref(1300)
+const maxWidth = ref(1500)
 
 const dialog = ref(false)
 // const show = ref(false)
@@ -133,8 +133,8 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
 
                     <v-sheet v-if="selectedPdb"
                         class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
-                        :height="computedHeight" :max-width="1300" :width="computedWidth" position="relative">
-                        <pdbe-molstar ref="pdbeMolstarComponent" hide-controls :custom-data-url="selectedPdb"
+                        :height="computedHeight" :max-width="maxWidth" :width="computedWidth" position="relative">
+                        <pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true" :custom-data-url="selectedPdb" alphafold-view="true"
                             custom-data-format="pdb"></pdbe-molstar>
                     </v-sheet>
                 </v-card-text>

package.json

@@ -8,21 +8,21 @@
   },
   "devDependencies": {
     "@nuxt/content": "^2.9.0",
-    "@types/node": "^18.15.12",
+    "@types/node": "^20.10.3",
     "@vueuse/core": "^10.6.1",
     "@vueuse/nuxt": "^10.6.1",
     "nuxt": "^3.8.1",
     "nuxt-meilisearch": "^1.1.0",
-    "vuetify-nuxt-module": "^0.6.7"
+    "vuetify-nuxt-module": "^0.7.2"
   },
   "overrides": {
     "vue": "latest"
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.11",
-    "@pinia/nuxt": "^0.4.11",
+    "@pinia/nuxt": "^0.5.1",
     "d3": "^7.8.5",
-    "meilisearch": "^0.35.0",
+    "meilisearch": "^0.36.0",
     "mermaid": "^10.6.1",
     "pinia": "^2.1.6",
     "vue-json-csv": "^2.1.0",