From 24d857e1174fa8831adf05fe10d96424ac6474dd Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Sat, 1 Dec 2018 19:42:26 +0200
Subject: [PATCH] Load images with file-loader, create a component for footer
---
src/client/components/Footer.js | 60 +++++++++++++++++++++++++++++++++
src/client/components/Main.js | 13 +++----
src/client/containers/MapApp.js | 43 ++---------------------
webpack.client.common.js | 6 +---
4 files changed, 71 insertions(+), 51 deletions(-)
create mode 100644 src/client/components/Footer.js
diff --git a/src/client/components/Footer.js b/src/client/components/Footer.js
new file mode 100644
index 00000000..26c3adec
--- /dev/null
+++ b/src/client/components/Footer.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import oxfordLogo from '../img/logos/oxford-logo-white.png';
+import pennLogo from '../img/logos/penn-logo-white.png';
+import cnrsLogo from '../img/logos/cnrs-logo-white-small.png';
+import aaltoLogo from '../img/logos/aalto-logo-white-no-background-small.png';
+
+const logoPadding = 50;
+const logoHeight = 52;
+
+const styles = theme => ({
+ root: {
+ position: 'absolute',
+ borderTop: '4px solid' + theme.palette.primary.main,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ bottom: 0,
+ width: '100%',
+ height: 64,
+ background: theme.palette.primary.main,
+ borderRadius: 0,
+ },
+ oxfordLogo: {
+ //paddingLeft: 24,
+ height: logoHeight
+ },
+ pennLogo: {
+ paddingLeft: logoPadding,
+ height: logoHeight - 8
+ },
+ cnrsLogo: {
+ paddingLeft: logoPadding,
+ height: logoHeight
+ },
+ aaltoLogo: {
+ paddingLeft: logoPadding,
+ height: logoHeight - 10
+ },
+});
+
+const Footer = props => {
+ const { classes } = props;
+ return (
+ <Paper className={classes.root}>
+ <img className={classes.oxfordLogo} src={oxfordLogo} alt='logo' />
+ <img className={classes.pennLogo} src={pennLogo} alt='logo' />
+ <img className={classes.cnrsLogo} src={cnrsLogo} alt='logo' />
+ <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
+ </Paper>
+ );
+};
+
+Footer.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(Footer);
diff --git a/src/client/components/Main.js b/src/client/components/Main.js
index f2cc9324..14af595a 100644
--- a/src/client/components/Main.js
+++ b/src/client/components/Main.js
@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { NavLink } from 'react-router-dom';
+import thumbImage from '../img/thumb.png';
const styles = theme => ({
root: {
@@ -75,7 +76,7 @@ let Main = props => {
<CardActionArea component={ManuscriptLink}>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
@@ -95,7 +96,7 @@ let Main = props => {
<CardActionArea disabled>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
@@ -115,7 +116,7 @@ let Main = props => {
<CardActionArea disabled>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
@@ -135,7 +136,7 @@ let Main = props => {
<CardActionArea disabled>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
@@ -155,7 +156,7 @@ let Main = props => {
<CardActionArea disabled>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
@@ -175,7 +176,7 @@ let Main = props => {
<CardActionArea disabled>
<CardMedia
className={classes.media}
- image="img/thumb.png"
+ image={thumbImage}
title="Manuscripts"
/>
<CardContent className={classes.cardContent}>
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 59661f4b..ea95ea2a 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -5,8 +5,8 @@ import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { withRouter } from 'react-router-dom';
import compose from 'recompose/compose';
-import Paper from '@material-ui/core/Paper';
import TopBar from '../components/TopBar';
+import Footer from '../components/Footer';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Manuscripts from '../components/Manuscripts';
import Main from '../components/Main';
@@ -24,9 +24,6 @@ import {
closeFacetDialog
} from '../actions';
-const logoPadding = 50;
-const logoHeight = 52;
-
const styles = theme => ({
root: {
flexGrow: 1,
@@ -58,35 +55,7 @@ const styles = theme => ({
borderLeft: '4px solid' + theme.palette.primary.main,
//backgroundColor: 'rgb(238, 238, 238)'
backgroundColor: theme.palette.background.paper
- },
- footer: {
- position: 'absolute',
- borderTop: '4px solid' + theme.palette.primary.main,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- bottom: 0,
- width: '100%',
- height: 64,
- background: theme.palette.primary.main,
- borderRadius: 0,
- },
- oxfordLogo: {
- //paddingLeft: 24,
- height: logoHeight
- },
- pennLogo: {
- paddingLeft: logoPadding,
- height: logoHeight - 8
- },
- cnrsLogo: {
- paddingLeft: logoPadding,
- height: logoHeight
- },
- aaltoLogo: {
- paddingLeft: logoPadding,
- height: logoHeight - 10
- },
+ }
});
let MapApp = (props) => {
@@ -105,7 +74,6 @@ let MapApp = (props) => {
path="/manuscripts"
render={routeProps =>
<Manuscripts
- map={props.map}
search={props.search}
facetFilters={props.facet.facetFilters}
fetchManuscripts={props.fetchManuscripts}
@@ -126,12 +94,7 @@ let MapApp = (props) => {
updatePage={props.updatePage}
closeFacetDialog={props.closeFacetDialog}
/>
- <Paper className={classes.footer}>
- <img className={classes.oxfordLogo} src='img/logos/oxford-logo-white.png' alt='Oxford University logo'/>
- <img className={classes.pennLogo} src='img/logos/penn-logo-white.png' alt='Oxford University logo'/>
- <img className={classes.cnrsLogo} src='img/logos/cnrs-logo-white-small.png' alt='CNRS logo'/>
- <img className={classes.aaltoLogo} src='img/logos/aalto-logo-white-no-background-small.png' alt='Aalto University logo'/>
- </Paper>
+ <Footer />
</div>
</div>
);
diff --git a/webpack.client.common.js b/webpack.client.common.js
index 70ff3ea3..b02c2d73 100644
--- a/webpack.client.common.js
+++ b/webpack.client.common.js
@@ -1,7 +1,6 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const outputDirectory = 'dist/public';
@@ -18,10 +17,7 @@ module.exports = {
template: 'src/client/index.html',
}),
new webpack.NamedModulesPlugin(),
- new webpack.HotModuleReplacementPlugin(),
- new CopyWebpackPlugin([
- {from: 'src/client/img', to: 'img'}
- ])
+ new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
--
GitLab