diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js
index 50afa37a469e3e665d98d3f311b757a2d5968d0e..711b20339cfb483705ed776e333f7703e946d53a 100644
--- a/src/client/components/facet_bar/FacetInfo.js
+++ b/src/client/components/facet_bar/FacetInfo.js
@@ -52,7 +52,7 @@ class FacetInfo extends React.Component {
getTypographyVariant = () => {
const { screenSize } = this.props
let variant = 'h6'
- if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md') {
+ if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md' || screenSize === 'lg') {
variant = 'subtitle2'
}
return variant
diff --git a/src/client/components/main_layout/InfoHeader.js b/src/client/components/main_layout/InfoHeader.js
index ab6f1e3c476b9642c63f4309444c9fa441619f19..22828722398995f889475a9e21ea487345529770 100644
--- a/src/client/components/main_layout/InfoHeader.js
+++ b/src/client/components/main_layout/InfoHeader.js
@@ -22,9 +22,7 @@ const useStyles = makeStyles(theme => ({
},
summary: props => ({
paddingLeft: theme.spacing(1),
- [theme.breakpoints.down(props.layoutConfig.reducedHeightBreakpoint)]: {
- minHeight: `${props.layoutConfig.infoHeader.reducedHeight.height}px !important`
- },
+ minHeight: `${props.layoutConfig.infoHeader.reducedHeight.height}px !important`,
[theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
minHeight: `${props.layoutConfig.infoHeader.default.height}px !important`
}
@@ -99,7 +97,7 @@ const InfoHeader = props => {
const getHeadingVariant = () => {
const { screenSize } = props
let variant = props.layoutConfig.infoHeader.default.headingVariant
- if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md') {
+ if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md' || screenSize === 'lg') {
variant = props.layoutConfig.infoHeader.reducedHeight.headingVariant
}
return variant
diff --git a/src/client/components/perspectives/sampo/Footer.js b/src/client/components/perspectives/sampo/Footer.js
index 8adb70cabee95cdc3bf97e4c153ec150d0954532..9c630360f8a8c97e9e5e6a0fb94781a6ae5f7051 100644
--- a/src/client/components/perspectives/sampo/Footer.js
+++ b/src/client/components/perspectives/sampo/Footer.js
@@ -15,9 +15,12 @@ const useStyles = makeStyles(theme => ({
},
layout: props => ({
[theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
- height: props.layoutConfig.footer.height
+ height: props.layoutConfig.footer.reducedHeight
// height: 115, for two row footer
},
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: props.layoutConfig.footer.defaultHeight
+ },
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
[theme.breakpoints.up(1500 + theme.spacing(6))]: {
@@ -26,23 +29,54 @@ const useStyles = makeStyles(theme => ({
marginRight: 'auto'
}
}),
- logoContainer: {
+ gridContainer: {
+ height: '100%',
+ marginTop: 0,
+ marginBottom: 0
+ },
+ gridItem: props => ({
display: 'flex',
alignItems: 'center',
- justifyContent: 'center'
- },
- logo: {
- height: 40
- },
- aaltoLogo: {
- height: 34
- },
- hyLogo: {
- height: 45
+ justifyContent: 'center',
+ paddingTop: '6px !important',
+ paddingBottom: '6px !important',
+ [theme.breakpoints.between('sm', props.layoutConfig.reducedHeightBreakpoint)]: {
+ paddingTop: '0px !important',
+ paddingBottom: '0px !important'
+ },
+ [theme.breakpoints.down('sm')]: {
+ paddingTop: '12px !important',
+ paddingBottom: '12px !important'
+ }
+ }),
+ link: {
+ display: 'flex',
+ alignItems: 'center'
},
- heldigLogo: {
- height: 33
- }
+ logo: props => ({
+ height: 40,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 40
+ }
+ }),
+ aaltoLogo: props => ({
+ height: 29,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 34
+ }
+ }),
+ hyLogo: props => ({
+ height: 42,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 45
+ }
+ }),
+ heldigLogo: props => ({
+ height: 30,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 33
+ }
+ })
}))
/**
@@ -53,19 +87,19 @@ const Footer = props => {
return (
<Paper className={classes.root}>
<div className={classes.layout}>
- <Grid container spacing={3}>
- <Grid item xs className={classes.logoContainer}>
- <a href='https://www.aalto.fi/en/school-of-science' target='_blank' rel='noopener noreferrer'>
+ <Grid className={classes.gridContainer} container spacing={3}>
+ <Grid item xs className={classes.gridItem}>
+ <a className={classes.link} href='https://www.aalto.fi/en/school-of-science' target='_blank' rel='noopener noreferrer'>
<img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
</a>
</Grid>
- <Grid item xs className={classes.logoContainer}>
- <a href='https://www.helsinki.fi/en' target='_blank' rel='noopener noreferrer'>
+ <Grid item xs className={classes.gridItem}>
+ <a className={classes.link} href='https://www.helsinki.fi/en' target='_blank' rel='noopener noreferrer'>
<img className={classes.hyLogo} src={hyLogo} alt='logo' />
</a>
</Grid>
- <Grid item xs className={classes.logoContainer}>
- <a href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities' target='_blank' rel='noopener noreferrer'>
+ <Grid item xs className={classes.gridItem}>
+ <a className={classes.link} href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities' target='_blank' rel='noopener noreferrer'>
<img className={classes.heldigLogo} src={heldigLogo} alt='logo' />
</a>
</Grid>
diff --git a/src/client/components/main_layout/Main.js b/src/client/components/perspectives/sampo/Main.js
similarity index 90%
rename from src/client/components/main_layout/Main.js
rename to src/client/components/perspectives/sampo/Main.js
index 7a019ee04faba2f487b2337dd6e26d2f607966a7..bb6abb7775ae27f5bcb7455e4f13cc1f37618f7f 100644
--- a/src/client/components/main_layout/Main.js
+++ b/src/client/components/perspectives/sampo/Main.js
@@ -10,20 +10,23 @@ const useStyles = makeStyles(theme => ({
root: props => ({
[theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
overflow: 'auto',
- height: `calc(100% - ${props.layoutConfig.topBar.reducedHeight + props.layoutConfig.footer.height + theme.spacing(3.5)}px)`
+ height: `calc(100% - ${props.layoutConfig.topBar.reducedHeight + props.layoutConfig.footer.reducedHeight + theme.spacing(1)}px)`
},
[theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
overflow: 'auto',
- height: `calc(100% - ${props.layoutConfig.topBar.defaultHeight + props.layoutConfig.footer.height + theme.spacing(3.5)}px)`
+ height: `calc(100% - ${props.layoutConfig.topBar.defaultHeight + props.layoutConfig.footer.defaultHeight + theme.spacing(1)}px)`
},
- marginBottom: theme.spacing(5)
+ marginBottom: theme.spacing(1)
}),
banner: props => ({
background: props.layoutConfig.mainPage.bannerBackround,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
- height: props.layoutConfig.mainPage.bannerReducedHeight,
+ height: props.layoutConfig.mainPage.bannerMobileHeight,
+ [theme.breakpoints.up('md')]: {
+ height: props.layoutConfig.mainPage.bannerReducedHeight
+ },
[theme.breakpoints.up('xl')]: {
height: props.layoutConfig.mainPage.bannerDefaultHeight
},
@@ -36,12 +39,18 @@ const useStyles = makeStyles(theme => ({
display: 'inline-block',
color: '#fff'
},
+ bannerHeading: {
+ display: 'flex',
+ justifyContent: 'center'
+ },
bannerSubheading: {
marginTop: theme.spacing(1.5),
- display: 'flex',
- '& div': {
- flexGrow: 1,
- width: 0
+ [theme.breakpoints.up('md')]: {
+ display: 'flex',
+ '& div': {
+ flexGrow: 1,
+ width: 0
+ }
}
},
layout: {
diff --git a/src/client/components/main_layout/Main.stories.js b/src/client/components/perspectives/sampo/Main.stories.js
similarity index 87%
rename from src/client/components/main_layout/Main.stories.js
rename to src/client/components/perspectives/sampo/Main.stories.js
index d31e010437f36d4a4e3791785702b19d81ecab03..47e90298b9109e57c3e3eb3f0dcf655f815425e5 100644
--- a/src/client/components/main_layout/Main.stories.js
+++ b/src/client/components/perspectives/sampo/Main.stories.js
@@ -1,6 +1,6 @@
import React from 'react'
import Main from './Main'
-import { perspectiveConfig } from '../../configs/sampo/PerspectiveConfig'
+import { perspectiveConfig } from '../../../configs/sampo/PerspectiveConfig'
export default {
component: Main,
diff --git a/src/client/components/main_layout/MainCard.js b/src/client/components/perspectives/sampo/MainCard.js
similarity index 98%
rename from src/client/components/main_layout/MainCard.js
rename to src/client/components/perspectives/sampo/MainCard.js
index 8db51c630cdd0f2e0bf133b6b8d959a0590dcd85..c536120ea1ee5b77167a0a37ad84c754f048b6a6 100644
--- a/src/client/components/main_layout/MainCard.js
+++ b/src/client/components/perspectives/sampo/MainCard.js
@@ -12,7 +12,7 @@ import { makeStyles } from '@material-ui/core/styles'
import useMediaQuery from '@material-ui/core/useMediaQuery'
import { Link } from 'react-router-dom'
import { has } from 'lodash'
-import defaultImage from '../../img/main_page/thumb.png'
+import defaultImage from '../../../img/main_page/thumb.png'
const useStyles = makeStyles(theme => ({
gridItem: props => ({
diff --git a/src/client/components/main_layout/MainCard.stories.js b/src/client/components/perspectives/sampo/MainCard.stories.js
similarity index 78%
rename from src/client/components/main_layout/MainCard.stories.js
rename to src/client/components/perspectives/sampo/MainCard.stories.js
index 0c5d174b647ac459eeabbb78655e278294680223..06efb2627c3aa520c491eeb235f6fc749e9d8eb1 100644
--- a/src/client/components/main_layout/MainCard.stories.js
+++ b/src/client/components/perspectives/sampo/MainCard.stories.js
@@ -1,7 +1,7 @@
import React from 'react'
import MainCard from './MainCard'
-import { perspectiveConfig } from '../../configs/sampo/PerspectiveConfig'
-import Center from '../../../../.storybook/Center'
+import { perspectiveConfig } from '../../../configs/sampo/PerspectiveConfig'
+import Center from '../../../../../.storybook/Center'
export default {
component: MainCard,
diff --git a/src/client/components/perspectives/sampo/TopBar.js b/src/client/components/perspectives/sampo/TopBar.js
index b1136f90cce9c13e35c2b843f44e23ac0802236f..d4bb415bb2e44ffee4191e5421c7d00fade79212 100644
--- a/src/client/components/perspectives/sampo/TopBar.js
+++ b/src/client/components/perspectives/sampo/TopBar.js
@@ -45,12 +45,6 @@ const useStyles = makeStyles(theme => ({
display: 'none'
}
}),
- homeButtonText: {
- whiteSpace: 'nowrap',
- [theme.breakpoints.down('sm')]: {
- fontSize: '1rem'
- }
- },
appBarButton: {
whiteSpace: 'nowrap',
color: 'white !important',
@@ -69,7 +63,38 @@ const useStyles = makeStyles(theme => ({
[theme.breakpoints.down(props.layoutConfig.topBar.mobileMenuBreakpoint)]: {
display: 'none'
}
- })
+ }),
+ secoLogoImage: props => ({
+ height: 32,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 50
+ }
+ }),
+ mainLogo: props => ({
+ height: 23,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ height: 40
+ },
+ marginRight: theme.spacing(1)
+ }),
+ mainLogoButtonRoot: {
+ paddingLeft: 0,
+ [theme.breakpoints.down('xs')]: {
+ minWidth: 48
+ }
+ },
+ mainLogoButtonLabel: {
+ justifyContent: 'left'
+ },
+ mainLogoTypography: {
+ whiteSpace: 'nowrap',
+ [theme.breakpoints.down('sm')]: {
+ fontSize: '1rem'
+ }
+ // [theme.breakpoints.down('xs')]: {
+ // display: 'none'
+ // }
+ }
}))
/**
@@ -217,8 +242,15 @@ const TopBar = props => {
<Typography />
<AppBar position='static'>
<Toolbar className={classes.topBarToolbar}>
- <Button component={AdapterLink} to='/'>
- <Typography className={classes.homeButtonText} variant='h6'>
+ <Button
+ component={AdapterLink} to='/'
+ classes={{
+ root: classes.mainLogoButtonRoot,
+ label: classes.mainLogoButtonLabel
+ }}
+ >
+ {/* <img className={classes.mainLogo} src={} /> */}
+ <Typography className={classes.mainLogoTypography} variant='h6'>
{props.xsScreen ? intl.get('appTitle.mobile') : intl.get('appTitle.short')}
</Typography>
</Button>
@@ -262,7 +294,7 @@ const TopBar = props => {
target='_blank'
rel='noopener noreferrer'
>
- <Button><img src={secoLogo} /></Button>
+ <Button><img className={classes.secoLogoImage} src={secoLogo} /></Button>
</a>
<div className={classes.sectionMobile}>
{props.layoutConfig.topBar.showLanguageButton &&
diff --git a/src/client/configs/sampo/GeneralConfig.js b/src/client/configs/sampo/GeneralConfig.js
index d042db097c1919b36320bd4f99a16a4b421cc038..afec426dbbaa698c43165a15496327161daf52e7 100644
--- a/src/client/configs/sampo/GeneralConfig.js
+++ b/src/client/configs/sampo/GeneralConfig.js
@@ -30,7 +30,7 @@ export const SLIDER_DURATION = {
export const layoutConfig = {
hundredPercentHeightBreakPoint: 'md',
- reducedHeightBreakpoint: 'lg',
+ reducedHeightBreakpoint: 'xl',
tabHeight: 58,
paginationToolbarHeight: 37,
tableFontSize: '0.8rem',
@@ -43,8 +43,9 @@ export const layoutConfig = {
},
mainPage: {
bannerBackround: `linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(${bannerImage})`,
- bannerDefaultHeight: 300,
- bannerReducedHeight: 220
+ bannerMobileHeight: 150,
+ bannerReducedHeight: 220,
+ bannerDefaultHeight: 300
},
infoHeader: {
default: {
@@ -61,6 +62,7 @@ export const layoutConfig = {
}
},
footer: {
- height: 64
+ reducedHeight: 44,
+ defaultHeight: 64
}
}
diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js
index bfe4f6fba89702a6a7fb7a694ecde48ac92df625..323ba7c5b11760d63680a9a5d3b83c9722e51629 100644
--- a/src/client/containers/SemanticPortal.js
+++ b/src/client/containers/SemanticPortal.js
@@ -18,12 +18,12 @@ import Grid from '@material-ui/core/Grid'
import InfoHeader from '../components/main_layout/InfoHeader'
import TextPage from '../components/main_layout/TextPage'
import Message from '../components/main_layout/Message'
-import Main from '../components/main_layout/Main'
import FacetBar from '../components/facet_bar/FacetBar'
// ** General components end **
// ** Portal specific components and configs **
import TopBar from '../components/perspectives/sampo/TopBar'
+import Main from '../components/perspectives/sampo/Main'
import FacetedSearchPerspective from '../components/perspectives/sampo/FacetedSearchPerspective'
import FullTextSearch from '../components/perspectives/sampo/FullTextSearch'
import ClientFSPerspective from '../components/perspectives/sampo/client_fs/ClientFSPerspective'
@@ -84,15 +84,13 @@ const useStyles = makeStyles(theme => ({
}
},
mainContainerClientFS: {
- marginTop: theme.spacing(1),
- marginBottom: theme.spacing(3),
+ marginTop: theme.spacing(0.5),
+ marginBottom: theme.spacing(0.5),
[theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.reducedHeight + layoutConfig.footer.height + theme.spacing(0.5)}px)`,
- marginBottom: theme.spacing(1)
+ height: `calc(100% - ${layoutConfig.topBar.reducedHeight + layoutConfig.footer.reducedHeight + theme.spacing(1)}px)`
},
[theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.defaultHeight + layoutConfig.footer.height + theme.spacing(0.5)}px)`,
- marginBottom: theme.spacing(1)
+ height: `calc(100% - ${layoutConfig.topBar.defaultHeight + layoutConfig.footer.defaultHeight + theme.spacing(1)}px)`
}
},
textPageContainer: {