Move SeCo-logo to top bar, adjust search

placeholder

src/client/components/main_layout/Footer.js

@@ -8,7 +8,7 @@ import oxfordLogo2 from '../../img/logos/partners/Long-Logo-RGB.jpg'
 import pennLogo from '../../img/logos/partners/PL SIMS Logo_small.png'
 import cnrsLogo from '../../img/logos/partners/logo_cnrs_irht2.jpg'
 import aaltoLogo from '../../img/logos/partners/Aalto_SCI_EN_13_BLACK_2_cropped.png'
-import secoLogo from '../../img/logos/partners/13_9_04_logo_cropped_small.png'
+// import secoLogo from '../../img/logos/partners/13_9_04_logo_cropped_small.png'
 import tapLogo from '../../img/logos/funders/cropped-logo_tap_0_.png'
 import didLogo from '../../img/logos/funders/did_logo.png'
 import imlsLogo from '../../img/logos/funders/imls_logo_2c_cropped.jpg'
@@ -79,11 +79,11 @@ const Footer = props => {
               <img className={classes.logo} src={cnrsLogo} alt='logo' />
             </a>
           </Grid>
-          <Grid item xs className={classes.logoContainer}>
+          {/* <Grid item xs className={classes.logoContainer}>
             <a href='https://seco.cs.aalto.fi/projects/mmm' target='_blank' rel='noopener noreferrer'>
               <img className={classes.logo} src={secoLogo} alt='logo' />
             </a>
-          </Grid>
+          </Grid> */}
           <Grid item xs className={classes.logoContainer}>
             <a href='https://www.aalto.fi/en/school-of-science' target='_blank' rel='noopener noreferrer'>
               <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />

src/client/components/main_layout/TopBar.js

@@ -17,6 +17,7 @@ import TopBarInfoButton from './TopBarInfoButton'
 import Divider from '@material-ui/core/Divider'
 import { has } from 'lodash'
 import mmmLogo from '../../img/mmm-logo-52x50.png'
+import secoLogo from '../../img/seco-logo-48x50.png'
 
 const styles = theme => ({
   root: {
@@ -26,7 +27,8 @@ const styles = theme => ({
     flexGrow: 1
   },
   toolbar: {
-    paddingLeft: theme.spacing(1.5)
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   sectionDesktop: {
     display: 'none',
@@ -54,6 +56,12 @@ const styles = theme => ({
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
     borderLeft: '2px solid white'
+  },
+  secoLogo: {
+    marginLeft: theme.spacing(1),
+    [theme.breakpoints.down('md')]: {
+      display: 'none'
+    }
   }
 })
 
@@ -197,16 +205,13 @@ class TopBar extends React.Component {
         <Typography />
         <AppBar position='absolute'>
           <Toolbar className={classes.toolbar}>
-            <Button
-              className={classes.appBarButton}
-              component={this.AdapterLink}
-              to='/'
-            >
+            <Button component={this.AdapterLink} to='/'>
               <img src={mmmLogo} />
             </Button>
             <TopBarSearchField
               fetchResultsClientSide={this.props.fetchResultsClientSide}
               clearResults={this.props.clearResults}
+              xsScreen={this.props.xsScreen}
             />
             <div className={classes.grow} />
             <div className={classes.sectionDesktop}>
@@ -231,12 +236,21 @@ class TopBar extends React.Component {
               >
                 {intl.get('topBar.instructions')}
               </Button>
+
               {/* <TopBarLanguageButton
                 currentLocale={currentLocale}
                 availableLocales={availableLocales}
                 loadLocales={this.props.loadLocales}
               /> */}
             </div>
+            <a
+              className={classes.secoLogo}
+              href='https://seco.cs.aalto.fi/projects/mmm'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Button><img src={secoLogo} /></Button>
+            </a>
             <div className={classes.sectionMobile}>
               <IconButton aria-haspopup='true' onClick={this.handleMobileMenuOpen} color='inherit'>
                 <MoreIcon />
@@ -257,7 +271,8 @@ TopBar.propTypes = {
   loadLocales: PropTypes.func.isRequired,
   perspectives: PropTypes.array.isRequired,
   currentLocale: PropTypes.string.isRequired,
-  availableLocales: PropTypes.array.isRequired
+  availableLocales: PropTypes.array.isRequired,
+  xsScreen: PropTypes.bool.isRequired
 }
 
 export default withStyles(styles)(TopBar)

src/client/components/main_layout/TopBarSearchField.js

@@ -91,14 +91,15 @@ class TopBarSearchField extends React.Component {
   }
 
   render () {
-    const { classes } = this.props
+    const { classes, xsScreen } = this.props
+    const placeholder = xsScreen ? intl.get('topBar.searchBarPlaceHolderShort') : intl.get('topBar.searchBarPlaceHolder')
     return (
       <div className={classes.search}>
         <div className={classes.searchIcon}>
           <SearchIcon />
         </div>
         <InputBase
-          placeholder={intl.get('topBar.searchBarPlaceHolder')}
+          placeholder={placeholder}
           classes={{
             root: classes.inputRoot,
             input: classes.inputInput
@@ -114,7 +115,8 @@ class TopBarSearchField extends React.Component {
 TopBarSearchField.propTypes = {
   classes: PropTypes.object.isRequired,
   fetchResultsClientSide: PropTypes.func.isRequired,
-  clearResults: PropTypes.func.isRequired
+  clearResults: PropTypes.func.isRequired,
+  xsScreen: PropTypes.bool.isRequired
 }
 
 export default withStyles(styles)(TopBarSearchField)

src/client/containers/SemanticPortal.js

@@ -24,6 +24,7 @@ import TextPage from '../components/main_layout/TextPage'
 import { perspectiveConfig } from '../configs/mmm/PerspectiveConfig'
 import { perspectiveConfigOnlyInfoPages } from '../configs/mmm/PerspectiveConfigOnlyInfoPages'
 import InfoHeader from '../components/main_layout/InfoHeader'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
 import { has } from 'lodash'
 import {
   fetchResultCount,
@@ -170,6 +171,7 @@ const styles = theme => ({
 
 const SemanticPortal = props => {
   const { classes, /* browser */ error } = props
+  const xsScreen = useMediaQuery(theme => theme.breakpoints.down('xs'))
 
   const renderPerspective = (perspective, routeProps) => {
     let perspectiveElement = null
@@ -279,6 +281,7 @@ const SemanticPortal = props => {
             currentLocale={props.options.currentLocale}
             availableLocales={props.options.availableLocales}
             loadLocales={props.loadLocales}
+            xsScreen={xsScreen}
           />
           <Route
             exact path='/'

src/client/translations/mmm/localeEN.js

@@ -3,7 +3,7 @@ export default {
   appTitle: {
     short: 'mmm',
     long: 'apping Manuscript Migrations',
-    subheading: `Navigating the network of connections between people, institutions and
+    subheading: `Navigating the network of connections between people, institutions, and
       places within European medieval and renaissance manuscripts`
   },
   appDescription: `
@@ -24,6 +24,7 @@ export default {
       aboutTheProject: 'About the project'
     },
     searchBarPlaceHolder: 'Search all MMM content',
+    searchBarPlaceHolderShort: 'Search',
     instructions: 'instructions'
   },
   facetBar: {