From edb6de5d8b026815f55bc44679a84ee4ee2d7984 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 20 Jan 2022 15:09:51 +0200
Subject: [PATCH] Adjust perspective heights
---
.../facet_results/FacetedSearchPerspective.js | 6 +-
.../components/main_layout/InfoHeader.js | 58 ++++++++++---------
.../main_layout/InstancePagePerspective.js | 4 +-
3 files changed, 36 insertions(+), 32 deletions(-)
diff --git a/src/client/components/facet_results/FacetedSearchPerspective.js b/src/client/components/facet_results/FacetedSearchPerspective.js
index f21bfe66..a940ab24 100644
--- a/src/client/components/facet_results/FacetedSearchPerspective.js
+++ b/src/client/components/facet_results/FacetedSearchPerspective.js
@@ -34,14 +34,14 @@ const FacetedSearchPerspective = props => {
height: `calc(100% - ${layoutConfig.topBar.reducedHeight +
layoutConfig.infoHeader.reducedHeight.height +
layoutConfig.infoHeader.reducedHeight.expandedContentHeight +
- getSpacing(theme, 3.5)
+ getSpacing(theme, 5.5)
}px)`
},
[theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
height: `calc(100% - ${layoutConfig.topBar.defaultHeight +
layoutConfig.infoHeader.default.height +
layoutConfig.infoHeader.default.expandedContentHeight +
- getSpacing(theme, 3.5)
+ getSpacing(theme, 4.5)
}px)`
}
}
@@ -115,7 +115,7 @@ const FacetedSearchPerspective = props => {
sx={theme => ({
height: 'auto',
[theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
- height: `calc(100% - ${getSpacing(theme, 0.5)}px)`
+ height: '100%'
},
paddingTop: '0px !important',
paddingBottom: '0px !important',
diff --git a/src/client/components/main_layout/InfoHeader.js b/src/client/components/main_layout/InfoHeader.js
index 8cdddf7e..527233e1 100644
--- a/src/client/components/main_layout/InfoHeader.js
+++ b/src/client/components/main_layout/InfoHeader.js
@@ -32,32 +32,7 @@ const useStyles = makeStyles(theme => ({
overflow: 'auto'
},
expandedContent: props => ({
- '& p, ul': {
- fontSize: '0.875rem !important',
- ...theme.typography.body1
- },
- '& h6': {
- ...theme.typography.h6,
- marginTop: 0,
- marginBottom: 0
- },
- '& p:first-child': {
- marginTop: 0
- },
- height: props.layoutConfig.infoHeader.reducedHeight.expandedContentHeight,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- height: props.layoutConfig.infoHeader.default.expandedContentHeight,
- '& p, & ul': {
- fontSize: '1rem',
- ...theme.typography.body1
- }
- },
- paddingTop: 0,
- paddingLeft: theme.spacing(1),
- paddingBottom: theme.spacing(1),
- marginBottom: theme.spacing(1),
- overflow: 'auto',
- display: 'block'
+
})
}))
@@ -175,7 +150,36 @@ const InfoHeader = props => {
{generateLabel()}
</Typography>}
</AccordionSummary>
- <AccordionDetails className={classes.expandedContent}>
+ <AccordionDetails
+ // className={classes.expandedContent}
+ sx={theme => ({
+ paddingTop: 0,
+ paddingLeft: theme.spacing(1),
+ paddingBottom: theme.spacing(1),
+ marginBottom: theme.spacing(0),
+ height: props.layoutConfig.infoHeader.reducedHeight.expandedContentHeight,
+ overflow: 'auto',
+ display: 'block',
+ '& p, & ul': {
+ ...theme.typography.body1,
+ fontSize: '0.8rem'
+ },
+ '& h6': {
+ ...theme.typography.h6,
+ marginTop: 0,
+ marginBottom: 0
+ },
+ '& p:first-of-type': {
+ marginTop: 0
+ },
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: props.layoutConfig.infoHeader.default.expandedContentHeight,
+ '& p, & ul': {
+ fontSize: '1rem !important;'
+ }
+ }
+ })}
+ >
{props.pageType === 'facetResults' && intl.getHTML(`perspectives.${props.resultClass}.longDescription`)}
{props.pageType === 'instancePage' &&
<>
diff --git a/src/client/components/main_layout/InstancePagePerspective.js b/src/client/components/main_layout/InstancePagePerspective.js
index 3f91c1d9..57dfa1ae 100644
--- a/src/client/components/main_layout/InstancePagePerspective.js
+++ b/src/client/components/main_layout/InstancePagePerspective.js
@@ -35,14 +35,14 @@ const InstancePagePerspective = props => {
height: `calc(100% - ${layoutConfig.topBar.reducedHeight +
2 * layoutConfig.infoHeader.reducedHeight.height +
layoutConfig.infoHeader.reducedHeight.expandedContentHeight +
- getSpacing(theme, 2.5)
+ getSpacing(theme, 1.5)
}px)`
},
[theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
height: `calc(100% - ${layoutConfig.topBar.defaultHeight +
2 * layoutConfig.infoHeader.default.height +
layoutConfig.infoHeader.default.expandedContentHeight +
- getSpacing(theme, 1.5)
+ getSpacing(theme, 0.5)
}px)`
}
}
--
GitLab