diff --git a/components/PfamChips.vue b/components/PfamChips.vue index a5568a8f4250e4a301153a0a6fcc7c9179276466..64d4f4b9f6982386aacc9c7aefc487e5d22f9195 100644 --- a/components/PfamChips.vue +++ b/components/PfamChips.vue @@ -26,53 +26,42 @@ function constructPfamUrl(pfam: string) { } </script> <template> - <v-card flat class="d-flex justify-start align-center"> - <template v-for="(pfam, index) in pfams" :key="pfam"> - <v-chip - v-if="index < itemsToDisplay || itemsToDisplay < 0" - :href="constructPfamUrl(pfam)" - target="_blank" - color="info" - class="mr-1" - > - {{ pfam }} - <v-tooltip activator="parent" location="top">{{ - pfamStore.get(pfam)?.DE ?? "none" - }}</v-tooltip></v-chip - > + <!-- class="d-inline-flex justify-start align-center" --> + <v-row> + <v-col> + <v-card flat color="transparent" density="compact" rounded="false"> + <template v-for="(pfam, index) in pfams" :key="pfam"> + <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam)" target="_blank" + color="info" class="mr-1 mb-1"> + {{ pfam }} + <v-tooltip activator="parent" location="top">{{ + pfamStore.get(pfam)?.DE ?? "none" + }}</v-tooltip></v-chip> - <template v-if="index === itemsToDisplay"> - <v-chip - v-if="!show" - variant="text" - class="text-grey text-caption align-self-center px-1" - @click="show = !show" - > - (+{{ pfams.length - itemsToDisplay }} others) - </v-chip> - </template> - </template> - <template v-if="pfams.length > itemsToDisplay && show"> - <template v-for="(pfam, index) in pfams" :key="pfam"> - <v-chip - v-if="index >= itemsToDisplay" - :href="constructPfamUrl(pfam)" - target="_blank" - color="info" - class="mr-1" - > - {{ pfam }} - <v-tooltip activator="parent" location="top">{{ - pfamStore.get(pfam)?.DE ?? "none" - }}</v-tooltip></v-chip - > - </template> - </template> - <v-btn - v-if="itemsToDisplay < pfams.length" - variant="text" - :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" - @click="show = !show" - ></v-btn> - </v-card> + <template v-if="index === itemsToDisplay"> + <span> + <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1 " + @click="show = !show"> + (+{{ pfams.length - itemsToDisplay }} others) + </v-chip> + <v-btn v-if="itemsToDisplay < pfams.length && !show" variant="text" :icon="'mdi-chevron-down'" + @click="show = !show"></v-btn> + </span> + </template> + </template> + <template v-if="pfams.length > itemsToDisplay && show"> + <template v-for="(pfam, index) in pfams" :key="pfam"> + <v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam)" target="_blank" color="info" + class="mr-1 mb-1"> + {{ pfam }} + <v-tooltip activator="parent" location="top">{{ + pfamStore.get(pfam)?.DE ?? "none" + }}</v-tooltip></v-chip> + </template> + </template> + <v-btn v-if="itemsToDisplay < pfams.length && show" variant="text" :icon="'mdi-chevron-up'" + @click="show = !show"></v-btn> + </v-card> + </v-col> + </v-row> </template> \ No newline at end of file diff --git a/components/content/ListSystems.vue b/components/content/ListSystems.vue index c1181f4a622cadfc11794d278ea2eb7a3372edae..f54b92baec6169c21ead750c66840858ed79af31 100644 --- a/components/content/ListSystems.vue +++ b/components/content/ListSystems.vue @@ -37,7 +37,7 @@ const { initPfam } = usePfamStore(); initPfam(); </script> <template> - <v-card> + <v-card > <v-toolbar density="compact"> <v-toolbar-title>Defense Systems</v-toolbar-title> @@ -58,14 +58,7 @@ initPfam(); </template> <template #[`item.PFAM`]="{ item }"> - <pfam-chips v-if="item.columns?.PFAM" :pfam-string="item.columns.PFAM"></pfam-chips> - </template> - <template #expanded-row="{ columns, item }"> - <tr> - <td :colspan="columns.length" class="v-data-table__td v-data-table-column--align-start"> - <pfam-chips :pfam-string="item.columns.PFAM" :items-to-display="-1"></pfam-chips> - </td> - </tr> + <pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips> </template> </v-data-table-virtual> </v-card>