Skip to content

Commit 353da3d

Browse files
pkalita-lblpkalita-lbl
committed
Add dynamic max-height for study image
1 parent 6716daa commit 353da3d

File tree

1 file changed

+141
-95
lines changed

1 file changed

+141
-95
lines changed

‎web/src/views/IndividualResults/StudyPage.vue‎

Lines changed: 141 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<script lang="ts">
2-
import {
3-
defineComponent,
4-
ref,
5-
watch,
6-
} from 'vue';
2+
import { defineComponent, ref, watch } from 'vue';
3+
import { useDisplay } from 'vuetify';
74
// @ts-ignore
85
import { fieldDisplayName } from '@/util';
96
import {
@@ -51,6 +48,7 @@ export default defineComponent({
5148
},
5249
5350
setup(props) {
51+
const { smAndDown } = useDisplay();
5452
const study = ref<StudySearchResults | null>(null);
5553
5654
const sampleCount = ref(0);
@@ -179,6 +177,7 @@ export default defineComponent({
179177
datasetDois,
180178
biosampleSearch,
181179
parentStudies,
180+
smAndDown,
182181
/* Methods */
183182
fieldDisplayName,
184183
seeStudyInContext,
@@ -196,114 +195,111 @@ export default defineComponent({
196195
<v-skeleton-loader type="article" />
197196
</v-container>
198197
<v-container v-if="!loading && study !== null">
199-
<div class="text-caption">
198+
<div class="text-caption mb-3">
200199
<!-- eslint-disable-next-line-->
201200
<router-link :to="{ name: 'Search' }">Home</router-link>
202201
<span class="mx-2">/</span>
203202
<ClickToCopyText>{{ study.id }}</ClickToCopyText>
204203
</div>
205204

206-
<PageSection>
207-
<v-row class="mt-0">
208-
<v-col
209-
cols="12"
210-
:md="study.image_url ? 8 : 12"
205+
<div :class="['mainInfoRow', smAndDown ? 'smAndDown' : 'mdAndUp']">
206+
<div
207+
ref="main-info-col"
208+
:class="['mainInfoCol', study.image_url ? 'withImage' : '']"
209+
>
210+
<IndividualTitle :item="study">
211+
<template
212+
v-if="study.description"
213+
#subtitle
214+
>
215+
<RevealContainer>
216+
<span v-html="urlify(study.description)" />
217+
</RevealContainer>
218+
</template>
219+
</IndividualTitle>
220+
221+
<AttributeRow
222+
v-if="parentStudies.length > 0"
223+
label="Part Of"
211224
>
212-
<IndividualTitle :item="study">
213-
<template
214-
v-if="study.description"
215-
#subtitle
225+
<div class="stack-sm">
226+
<div
227+
v-for="parent in parentStudies"
228+
:key="parent.id"
216229
>
217-
<RevealContainer>
218-
<span v-html="urlify(study.description)" />
219-
</RevealContainer>
220-
</template>
221-
</IndividualTitle>
222-
223-
<AttributeRow
224-
v-if="parentStudies.length > 0"
225-
label="Part Of"
226-
>
227-
<div class="stack-sm">
228-
<div
229-
v-for="parent in parentStudies"
230-
:key="parent.id"
230+
<router-link
231+
:to="{ name: 'Study', params: { id: parent.id }}"
231232
>
232-
<router-link
233-
:to="{ name: 'Study', params: { id: parent.id }}"
234-
>
235-
{{ parent.annotations.title }}
236-
</router-link>
237-
</div>
233+
{{ parent.annotations.title }}
234+
</router-link>
238235
</div>
239-
</AttributeRow>
236+
</div>
237+
</AttributeRow>
240238

241-
<AttributeRow
242-
v-if="study.children.length > 0"
243-
label="Associated Studies"
244-
>
245-
<div class="stack-sm">
246-
<div
247-
v-for="child in study.children"
248-
:key="child.id"
239+
<AttributeRow
240+
v-if="study.children.length > 0"
241+
label="Associated Studies"
242+
>
243+
<div class="stack-sm">
244+
<div
245+
v-for="child in study.children"
246+
:key="child.id"
247+
>
248+
<router-link
249+
:to="{ name: 'Study', params: { id: child.id }}"
249250
>
250-
<router-link
251-
:to="{ name: 'Study', params: { id: child.id }}"
252-
>
253-
{{ child.annotations.title }}
254-
</router-link>
255-
</div>
251+
{{ child.annotations.title }}
252+
</router-link>
256253
</div>
257-
</AttributeRow>
254+
</div>
255+
</AttributeRow>
258256

259-
<AttributeRow
260-
v-if="sampleCount > 0 || omicsProcessingCounts !== null"
261-
label="Data Summary"
257+
<AttributeRow
258+
v-if="sampleCount > 0 || omicsProcessingCounts !== null"
259+
label="Data Summary"
260+
>
261+
<v-chip
262+
v-if="sampleCount > 0"
263+
class="mb-4"
264+
size="small"
265+
color="primary"
266+
variant="flat"
267+
@click="seeStudyInContext"
262268
>
263-
<v-chip
264-
v-if="sampleCount > 0"
265-
class="mb-4"
266-
size="small"
267-
color="primary"
268-
variant="flat"
269-
@click="seeStudyInContext"
269+
All Samples: {{ sampleCount }}
270+
</v-chip>
271+
<div v-if="omicsProcessingCounts !== null">
272+
<div class="text-caption font-weight-medium">
273+
Omics Types
274+
</div>
275+
<template
276+
v-for="(count, type) in omicsProcessingCounts"
277+
:key="type"
270278
>
271-
All Samples: {{ sampleCount }}
272-
</v-chip>
273-
<div v-if="omicsProcessingCounts !== null">
274-
<div class="text-caption font-weight-medium">
275-
Omics Types
276-
</div>
277-
<template
278-
v-for="(count, type) in omicsProcessingCounts"
279-
:key="type"
279+
<v-chip
280+
class="mr-2"
281+
size="small"
282+
@click="seeOmicsForStudy(type)"
280283
>
281-
<v-chip
282-
class="mr-2"
283-
size="small"
284-
@click="seeOmicsForStudy(type)"
285-
>
286-
{{ fieldDisplayName(type) }}: {{ count }}
287-
</v-chip>
288-
</template>
289-
</div>
290-
</AttributeRow>
291-
</v-col>
284+
{{ fieldDisplayName(type) }}: {{ count }}
285+
</v-chip>
286+
</template>
287+
</div>
288+
</AttributeRow>
289+
</div>
292290

293-
<v-col
294-
v-if="study.image_url"
295-
cols="12"
296-
md="4"
297-
>
298-
<v-img
299-
:src="study.image_url"
300-
:alt="study.name"
301-
contain
302-
max-width="450"
303-
/>
304-
</v-col>
305-
</v-row>
306-
</PageSection>
291+
<div
292+
v-if="study.image_url"
293+
class="imageCol"
294+
>
295+
<v-img
296+
:src="study.image_url"
297+
:alt="study.name"
298+
contain
299+
:max-height="smAndDown ? 300 : undefined"
300+
/>
301+
</div>
302+
</div>
307303

308304
<PageSection heading="Team">
309305
<RevealContainer :closed-height="150">
@@ -463,3 +459,53 @@ export default defineComponent({
463459
</v-container>
464460
</v-main>
465461
</template>
462+
463+
<style lang="scss" scoped>
464+
/* Baseline styles
465+
466+
Stack the main info column and image column vertically. The
467+
height of the image in this case is controlled by the `max-height`
468+
prop on the <v-img> component. Each column has its own margin-bottom
469+
so that margin collapsing happens correctly. */
470+
.mainInfoRow {
471+
.mainInfoCol {
472+
width: 100%;
473+
margin-bottom: 64px;
474+
}
475+
.imageCol {
476+
width: 100%;
477+
margin-bottom: 64px;
478+
}
479+
}
480+
481+
/* Medium and larger screen styles
482+
483+
Place the main info column and image column side by side. The
484+
image column is absolutely positioned to the right of the main
485+
info column, which allows the main info column to determine the
486+
height of the row.
487+
*/
488+
.mainInfoRow.mdAndUp {
489+
position: relative;
490+
491+
/* If there is an image, the main info column takes up 2/3 of
492+
the width to make room for the image on the right. Otherwise,
493+
without an image, it continues to take up the full width.
494+
*/
495+
.mainInfoCol.withImage {
496+
width: 66.66667%;
497+
padding-right: 24px;
498+
}
499+
500+
/* This is absolutely positioned to allow the main info column to
501+
determine the height of the row. */
502+
.imageCol {
503+
width: 33.33333%;
504+
position: absolute;
505+
right: 0;
506+
top: 0;
507+
bottom: 0;
508+
margin-bottom: 0;
509+
}
510+
}
511+
</style>

0 commit comments

Comments
 (0)