Commit 77a1accc authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Fix tile overlap problems; change some classNames to hopefully be clearer

parent da807557
......@@ -15,7 +15,7 @@ export const CollapsedFilters = (props) => {
return (
<Card className={classes.card}>
<Grid className={classes.gridHead} item>
<Grid className={classes.dashboardTileHeader} item>
<Button
onClick={() => {
dispatch({type: "TOGGLE_STATE", payload: {toggledField: "mapControlsExpanded"}})
......
......@@ -10,12 +10,9 @@ export const DashboardTile = (props) => {
const classes = useStyles();
console.log(area);
console.log(input.bigTileArea);
return (
<>
<Card className={classes.card}>
<Card className={showNext ? classes.cardOfTileWithShowNext : classes.cardOfTileWithoutShowNext}>
<IconButton
onClick={() => dispatch({type: "UPDATE_INPUT", payload: {field: "bigTileArea", value: input.bigTileArea === area ? "" : area}})}
style={{backgroundColor: "rgba(171,134,97,0.18)"/*, position: "relative", left: "20px", top: "70px"*/}}
......
......@@ -10,12 +10,12 @@ export const DataSources = () => {
return (
<>
<Grid className={classes.gridHead} item container direction="row" spacing={2}>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Data sources')}</h3>
</Grid>
</Grid>
<Grid className={classes.gridContent} item container direction="column" spacing={2}>
<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
Here could be a list maybe...
<List>
......
......@@ -33,7 +33,7 @@ export const Filters = (props) => {
return (
<Card className={classes.card}>
<Grid className={classes.gridHead} item>
<Grid className={classes.dashboardTileHeader} item>
<Button
onClick={() => {
dispatch({type: "TOGGLE_STATE", payload: {toggledField: "mapControlsExpanded"}})
......@@ -43,7 +43,7 @@ export const Filters = (props) => {
{input.mapControlsExpanded ? <ExpandLessIcon/> : <ExpandMoreIcon/>}
</Button>
</Grid>
{<Grid className={classes.gridContent} item container direction="column" spacing={2}>
{<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item container direction="row" spacing={2}>
{/*radio buttons for selecting mode*/
<Grid item>
......
......@@ -10,12 +10,12 @@ export const Histogram = () => {
return (
<>
<Grid className={classes.gridHead} item container direction="row" spacing={2}>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Temporal distribution')}</h3>
</Grid>
</Grid>
<Grid className={classes.gridContent} item container direction="column" spacing={2}>
<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
Here will be the histogram...
</Grid>
......
......@@ -24,12 +24,12 @@ export const ImageContents = (props) => {
return (
<>
<Grid className={classes.gridHead} item container direction="row" spacing={2}>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Image contents')}</h3>
</Grid>
</Grid>
<Grid className={classes.gridContent} item container direction="column" spacing={2}>
<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
Here could be a word cloud maybe...
{/*Something basic with the image contents*/}
......
import React from 'react';
import { Grid } from '@material-ui/core'
import { useStyles } from '../../styles';
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
export const Layout = (props) => {
const {menu, bigTile, leftOrTopTile, topRightOrMiddleTile, bottomRightOrBottomTile, loadingIndicator, rightTileIsMovedToBottomInstead} = props;
const theme = useTheme();
const classes = useStyles();
/* Default breakpoints (inclusive-exclusive):
......@@ -16,10 +18,28 @@ export const Layout = (props) => {
xl = extra-large: 1920px-...
*/
const containerForTwoTiles = (tiles) => {
return (
useMediaQuery(theme.breakpoints.up('md')) && !rightTileIsMovedToBottomInstead
? <Grid
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 12 : 6}
lg={rightTileIsMovedToBottomInstead ? 12 : 8}
container
direction="row"
spacing={rightTileIsMovedToBottomInstead ? 2 : 0}
>
{tiles}
</Grid>
: tiles
)
}
return (
// container for dashboard
<Grid
className={classes.gridBody}
className={classes.dashboardBody}
container
direction="row"
......@@ -75,59 +95,49 @@ export const Layout = (props) => {
}
</Grid>}
{/*container for the right or bottom area (= areaA and areaB)*/}
<Grid
//className={rightTileIsMovedToBottomInstead ? classes.halfHeightTile : classes.fullHeightTile}
{/* if areaA and areaB are supposed to be shown as two tiles next to the map, put a container Grid around them to accomplish this */}
{containerForTwoTiles(
<>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaA (if not enlarged, in that case areaB moves here)
topRightOrMiddleTile
}
</Grid>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaB (if not enlarged)
bottomRightOrBottomTile
}
</Grid>
</>
)}
<Grid
className={classes.dashboardFooter}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 12 : 6}
lg={rightTileIsMovedToBottomInstead ? 12 : 8}
container
direction={/*TODO: needs something like 'if not small screen' && */"row"}
spacing={rightTileIsMovedToBottomInstead ? 2 : 0}
>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaA (if not enlarged, in that case areaB moves here)
topRightOrMiddleTile
}
</Grid>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaB (if not enlarged)
bottomRightOrBottomTile
}
</Grid>
</Grid>
<Grid item
xs={12}
md={12}
lg={12}
style={{height: "12px"}}
md={12}
lg={12}
>
{
// loading symbol (if current query result is still loading)
......
......@@ -47,7 +47,7 @@ export const OurMap = (props) => {
return (
<>
<Grid className={classes.gridHead} item container direction="row" spacing={2}>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Map')}</h3>
</Grid>
......@@ -75,7 +75,7 @@ export const OurMap = (props) => {
</FormLabel>
</Grid>
</Grid>
<Grid className={classes.gridContent} item>
<Grid className={classes.dashboardTileContent} item>
<Map
ref={mapRef}
className={`markercluster-map ${localClasses.leafletContainer}`}
......
......@@ -28,7 +28,7 @@ export const OurTimeline = (props) => {
return (
<>
<Grid className={classes.gridHead} item container direction="row" spacing={2}>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Timeline')}</h3>
</Grid>
......@@ -48,7 +48,7 @@ export const OurTimeline = (props) => {
</Grid>
</Grid>
{input.mode === "objects"
&& <Grid className={classes.gridContent} item>
&& <Grid className={classes.dashboardTileContent} item>
{//timelineObjectsData ?
<svg
//viewBox parameters are "min-x min-y width height"
......
......@@ -2,19 +2,8 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, ClickAwayListener, Grid, Grow, MenuItem, MenuList, Paper, Popper } from '@material-ui/core';
import TranslateIcon from '@material-ui/icons/Translate';
import { makeStyles } from '@material-ui/core/styles';
import { useStyles } from '../../styles';
// additional styling for this component only
const localStyles = makeStyles(theme => ({
pageHeader: {
justifyContent:"space-between",
alignItems:"stretch",
height: "12vh",
zIndex: 100
}
}));
export const PageHeader = () => {
const { t, i18n } = useTranslation();
......@@ -24,7 +13,6 @@ export const PageHeader = () => {
};
const classes = useStyles();
const localClasses = localStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
......@@ -65,7 +53,7 @@ export const PageHeader = () => {
return(
<Grid container direction="row" className={localClasses.pageHeader}>
<Grid container direction="row" className={classes.dashboardHeader}>
<Grid item xs={10}>
<h1 className={classes.h1}>Entangled Africa Data Explorer</h1>
<h2 className={classes.h2}>{t('EntangledAfrica1')}: {t('EntangledAfrica2')}</h2>
......
......@@ -18,7 +18,7 @@ export const ResultsTable = (props) => {
return (
<>
{<Grid className={classes.gridHead} item xs={12} container direction="row" spacing={2}>
{<Grid className={classes.dashboardTileHeader} item xs={12} container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Search results')}</h3>
</Grid>
......@@ -39,7 +39,7 @@ export const ResultsTable = (props) => {
{input.showArchaeoSites && mapDataArchaeoSites.archaeologicalSites && input.sitesMode !== "region" && `${mapDataArchaeoSites.archaeologicalSites.length} results (archaeological sites)`}
</Grid>
</Grid>}
{<Grid className={classes.gridContent} item xs={12} container>
{<Grid className={classes.dashboardTileContent} item xs={12} container>
{<Grid item xs={12}>
{// Conditions for rendering a table
(renderingConditionObjects || renderingConditionRelatedObjects || renderingConditionSites || renderingConditionSitesByRegion)
......
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
card: {
padding: theme.spacing(2),
height: "100%",
width: "100%"
dashboardHeader: {
justifyContent:"space-between",
alignItems:"stretch",
height: "12vh",
zIndex: 100
},
dashboardBody: {
height: "calc(100vh - 12vh - 12px)"
},
gridBody: {
height: "85vh"
dashboardFooter: {
height: "12px"
},
gridContent: {
dashboardTileHeader: {
//minHeight: "5%",
//justifyContent: "flex-start",
//alignItems: "center"
},
dashboardTileContent: {
height: "85%",
overflow: "scroll"
},
fullHeightTile: {
height: "calc(100vh - 35px)", //35px is the height of the ShowNext bar
cardOfTileWithShowNext: {
padding: theme.spacing(2),
height: "calc(100% - 35px)", //35px is the height of the ShowNext bar
width: "100%"
},
cardOfTileWithoutShowNext: {
padding: theme.spacing(2),
height: "100% ",
width: "100%"
},
fullHeightTile: {
height: "calc(100vh - 12vh - 12px)",
//padding: theme.spacing(2)
},
halfHeightTile: {
height: "calc(45vh - 35px)" //35px is the height of the ShowNext bar
height: "calc(50vh - 6vh - 6px)", // half of the dashboardBody/dashboardHeader/dashboardFooter height
},
"gridBody || fullHeightTile || halfHeightTile": {
"dashboardBody || fullHeightTile || halfHeightTile": {
//justifyContent: "space-between",
//alignItems: "center"
},
gridHead: {
//minHeight: "5%",
//justifyContent: "flex-start",
//alignItems: "center"
},
h1: {
fontSize: "1.25rem"
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment