From 2bffee3eacf956aa3d9b521ef801fd3b47b8c900 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 3 Apr 2024 11:41:43 +0200
Subject: [PATCH] flex layout
---
components/content/pdockqMatrix.vue | 24 +++++++++++++++---------
1 file changed, 15 insertions(+), 9 deletions(-)
diff --git a/components/content/pdockqMatrix.vue b/components/content/pdockqMatrix.vue
index 78dd66a9..d926c97e 100644
--- a/components/content/pdockqMatrix.vue
+++ b/components/content/pdockqMatrix.vue
@@ -5,11 +5,14 @@ import PlotFigure from "@/components/PlotFigure";
// import { useMeiliSearchRef } from 'nuxt-meilisearch'
import type { SearchResponse } from 'meilisearch'
import { useRefinedUrl } from "@/composables/useRefinedUrl"
+import { useDisplay } from "vuetify";
export interface Props {
system?: MaybeRef<string | null>
}
+const { mobile } = useDisplay();
+
const { page } = useContent();
const { system } = withDefaults(defineProps<Props>(), { system: null })
const dbName = "structure"
@@ -170,13 +173,16 @@ function displayStructure(item) {
}
</script>
<template>
- <v-card flat color="transparent">
- <v-card-text v-if="computedSystem !== null" v-for="option in computedPDocksMatrixPlotOptions"
- :key="option.legend.label">
- <PlotFigure ref="matrixPlot" :options="unref(option)" defer class="pdockq-plot"
- :data-label="option.legend.label"></PlotFigure>
- </v-card-text>
- <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
-
- </v-card>
+
+ <v-row class="d-flex align-content-start" :class="mobile ? 'd-flex-column' : 'd-flex-row'">
+ <v-card v-if="computedSystem !== null" v-for="option in computedPDocksMatrixPlotOptions"
+ :key="option.legend.label" flat color="transparent">
+ <v-card-text>
+ <PlotFigure ref="matrixPlot" :options="unref(option)" defer class="pdockq-plot"
+ :data-label="option.legend.label"></PlotFigure>
+ </v-card-text>
+ <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
+ </v-card>
+
+ </v-row>
</template>
\ No newline at end of file
--
GitLab