Improve text page and responsive iframe layout

src/client/components/main_layout/FeedbackPage.js

@@ -23,7 +23,19 @@ const styles = theme => ({
   // https://benmarshall.me/responsive-iframes/
   iframeContainer: {
     overflow: 'hidden',
-    paddingTop: '93%', // aspect ratio: 700 / 750
+    paddingTop: '93%', // paddingTop controls the aspect ratio
+    [theme.breakpoints.down('xs')]: {
+      paddingTop: '185%'
+    },
+    [theme.breakpoints.between('sm', 700)]: {
+      paddingTop: '130%'
+    },
+    [theme.breakpoints.between(701, 800)]: {
+      paddingTop: '110%'
+    },
+    // [theme.breakpoints.between('md', 'lg')]: {
+    //   paddingTop: '110%'
+    // },
     position: 'relative'
   },
   iframe: {

src/client/components/main_layout/TextPage.js

@@ -16,7 +16,7 @@ const styles = theme => ({
     marginLeft: theme.spacing(3),
     marginRight: theme.spacing(3),
     [theme.breakpoints.down('sm')]: {
-      padding: theme.spacing(1),
+      padding: theme.spacing(1.5),
       marginLeft: 0,
       marginRight: 0
     },

src/client/components/main_layout/TopBar.js

@@ -42,7 +42,14 @@ const styles = theme => ({
       display: 'none'
     }
   },
+  homeButtonText: {
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '1rem'
+    }
+  },
   appBarButton: {
+    whiteSpace: 'nowrap',
     color: 'white !important',
     border: `1px solid ${theme.palette.primary.main}`
   },
@@ -205,7 +212,7 @@ class TopBar extends React.Component {
         <AppBar position='absolute'>
           <Toolbar className={classes.toolbar}>
             <Button component={this.AdapterLink} to='/'>
-              <Typography variant='h6'>{intl.get('appTitle.short')}</Typography>
+              <Typography className={classes.homeButtonText} variant='h6'>{intl.get('appTitle.short')}</Typography>
             </Button>
             <TopBarSearchField
               fetchResultsClientSide={this.props.fetchResultsClientSide}

src/client/components/main_layout/TopBarSearchField.js

@@ -16,8 +16,8 @@ const styles = theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25)
     },
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(3),
+    marginLeft: theme.spacing(2.5),
     width: '100%',
     [theme.breakpoints.up('sm')]: {
       marginLeft: theme.spacing(3),

src/client/containers/SemanticPortal.js

@@ -13,6 +13,8 @@ import moment from 'moment'
 import MomentUtils from '@date-io/moment'
 import 'moment/locale/fi'
 import Grid from '@material-ui/core/Grid'
+
+// ** General components **
 import TopBar from '../components/main_layout/TopBar'
 import InstanceHomePage from '../components/main_layout/InstanceHomePage'
 import InfoHeader from '../components/main_layout/InfoHeader'
@@ -20,6 +22,9 @@ 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 Perspective1 from '../components/perspectives/sampo/Perspective1'
 import Perspective2 from '../components/perspectives/sampo/Perspective2'
 import Perspective3 from '../components/perspectives/sampo/Perspective3'
@@ -30,6 +35,8 @@ import Footer from '../components/perspectives/sampo/Footer'
 import { perspectiveConfig } from '../configs/sampo/PerspectiveConfig'
 import { perspectiveConfigOnlyInfoPages } from '../configs/sampo/PerspectiveConfigOnlyInfoPages'
 import { rootUrl } from '../configs/sampo/GeneralConfig'
+// ** Portal specific components and configs end **
+
 import {
   fetchResultCount,
   fetchPaginatedResults,
@@ -111,7 +118,18 @@ const useStyles = makeStyles(theme => ({
   },
   textPageContainer: {
     width: '100%',
-    padding: theme.spacing(1)
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    [theme.breakpoints.up('md')]: {
+      height: 'calc(100% - 80px)'
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginTop: 64 // app bar + padding
+    },
+    [theme.breakpoints.up('sm')]: {
+      marginTop: 72 // app bar + padding
+    }
   },
   perspectiveContainer: {
     height: 'auto',
@@ -658,7 +676,7 @@ SemanticPortal.propTypes = {
   updateMapBounds: PropTypes.func.isRequired,
   loadLocales: PropTypes.func.isRequired,
   animateMap: PropTypes.func.isRequired,
-  clientFS: PropTypes.object.isRequired,
+  clientFS: PropTypes.object,
   clientFSToggleDataset: PropTypes.func.isRequired,
   clientFSFetchResults: PropTypes.func.isRequired,
   clientFSClearResults: PropTypes.func.isRequired,