diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue index a0dab74960955d72a80d01dc844a6b9c612584a8..8806499607808025bbe03472f6310aa41e55d9a0 100644 --- a/components/content/MolstarPdbePlugin.vue +++ b/components/content/MolstarPdbePlugin.vue @@ -95,40 +95,37 @@ watch(selectedPdb, (selectedPdb, prevSelectPdb) => { <template> - <v-row align="center"> - <v-col> - <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto"></v-select> - </v-col> - <v-col cols="auto"> - - </v-col> + <v-row><v-col><v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" + hide-details="auto"></v-select></v-col></v-row> + + <v-row justify="center"> + <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false"> + <v-card flat :rounded="false"> + <v-toolbar color="primary"> + <v-toolbar-title>Strucutures</v-toolbar-title> + <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" + hide-details="auto"></v-select> + <v-spacer></v-spacer> + + <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn> + <v-btn icon @click="closeStructure"> + <v-icon>mdi-close</v-icon> + </v-btn> + + </v-toolbar> + <v-card-text> + + <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" + custom-data-format="pdb"></pdbe-molstar> + </v-sheet> + </v-card-text> + + </v-card> + </v-dialog> </v-row> - - <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition" fullscreen> - <v-card> - <v-toolbar color="primary"> - <v-toolbar-title>Strucutures</v-toolbar-title> - <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto"></v-select> - <v-spacer></v-spacer> - - <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn> - <v-btn icon @click="closeStructure"> - <v-icon>mdi-close</v-icon> - </v-btn> - - </v-toolbar> - <v-card-text> - - <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" - custom-data-format="pdb"></pdbe-molstar> - </v-sheet> - </v-card-text> - - </v-card> - </v-dialog> </template>