Layout.jsx 3.75 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React from 'react';
import { Grid } from '@material-ui/core'
import { useStyles } from '../../styles';


export const Layout = (props) => {
    const {menu, bigTile, leftOrTopTile, topRightOrMiddleTile, bottomRightOrBottomTile, loadingIndicator, rightTileIsMovedToBottomInstead} = props;

    const classes = useStyles();

    /* Default breakpoints (inclusive-exclusive):
             xs = extra-small: 0px-600px
             sm = small: 600px-960px
             md = medium: 960px-1280px
             lg = large: 1280px-1920px
             xl = extra-large: 1920px-...
    */

    return (
        // container for dashboard
        <Grid
            className={classes.gridBody}

            container
            direction="row"
            spacing={2}
        >

            <Grid
                item
                xs={12}
                md={12}
                lg={12}

                container
                direction="column"
            >
                {
                    // collapsed or expanded filters
                    menu
                }
            </Grid>

            {bigTile && <Grid
                className={classes.fullHeightTile}

                item
                xs={12}
                md={12}
                lg={12}

                container
53
54
                direction="row"
                spacing={0}
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
            >
                {
                    // whichever tile was enlarged by the user
                    bigTile
                }
            </Grid>}

            {leftOrTopTile && <Grid
                className={classes.fullHeightTile}

                item
                xs={12}
                md={rightTileIsMovedToBottomInstead ? 12 : 6}
                lg={rightTileIsMovedToBottomInstead ? 12 : 4}

                container
            >
                {
                    // map (if not enlarged)
                    leftOrTopTile
                }
            </Grid>}

            {/*container for the right or bottom area (= areaA and areaB)*/}
            <Grid
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
80
                //className={rightTileIsMovedToBottomInstead ? classes.halfHeightTile : classes.fullHeightTile}
81
82
83
84
85
86
87

                item
                xs={12}
                md={rightTileIsMovedToBottomInstead ? 12 : 6}
                lg={rightTileIsMovedToBottomInstead ? 12 : 8}

                container
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
88
89
                direction={/*TODO: needs something like 'if not small screen' && */"row"}
                spacing={rightTileIsMovedToBottomInstead ? 2 : 0}
90
91
92
93
94
95
96
97
98
99
100
101
102
            >

                <Grid
                    className={classes.halfHeightTile}

                    item
                    xs={12}
                    md={rightTileIsMovedToBottomInstead ? 6 : 12}

                    container
                    direction="row"
                >
                    {
103
                        // areaA (if not enlarged, in that case areaB moves here)
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
                        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}
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
129
130

                  style={{height: "12px"}}
131
132
133
134
135
136
137
138
139
            >
                {
                    // loading symbol (if current query result is still loading)
                    loadingIndicator
                }
            </Grid>
        </Grid>
    );
}