Replace gallery by flexbox.

src/browser.js

@@ -123,10 +123,11 @@ const useStyles = makeStyles(theme => ({
     root: {
         width: '100%',
         maxWidth: 360,
-        backgroundColor: theme.palette.background.paper,
+        color: theme.color,
     },
     nested: {
         paddingLeft: theme.spacing(4),
+        color: theme.color,
     },
 }));
 

src/gridgallery.js

@@ -1,9 +1,83 @@
 import React from 'react';
-import Gallery from 'react-grid-gallery';
 
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 
-// TODO: some nice options: ModuloBox, 
+const useStyles = makeStyles(theme => ({
+    gallery: {
+        width: "100%",
+        display: "flex",
+        'flex-wrap': "wrap",
+        'justify-content': "center",
+    },
+    imgitem: {
+        width: "100%",
+    }
+}));
+
+export function GridGalleryItem(props) {
+    const { width, height, children } = props;
+    const classes = makeStyles(theme => ({
+        item: {
+            width: width,
+            height: height,
+            margin: "3px",
+        },
+    }))();
+
+    return (
+        <Box
+            className={classes.item}
+        >
+            {children}
+        </Box>
+    )
+}
+
+export function PhotoItem(props) {
+    const { photo, row_height } = props;
+    const classes = useStyles();
+
+    const photo_width = (photo.state.fullsize[0] / photo.state.fullsize[1]) * row_height;
+
+    return (
+        <GridGalleryItem
+            width={photo_width}
+            height={row_height}
+        >
+            <img src={photo.state.thumbnailpath} className={classes.imgitem} />
+        </GridGalleryItem>
+    );
+}
+
+export function ItemGridGallery(props) {
+    const { children } = props;
+    const classes = useStyles();
+
+    return (
+        <Box
+            className={classes.gallery}
+        >
+            {children}
+        </Box>
+    );
+}
+
+export function GridGallery(props) {
+    const { photos } = props;
+
+    return (
+        <ItemGridGallery>
+            {photos.map(photo => {
+                return <PhotoItem photo={photo} row_height={300} />
+            })}
+        </ItemGridGallery>
+    );
+}
+
+
+
+/*
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -31,3 +105,4 @@ export function GridGallery(props) {
         <Gallery className={classes.root} enableImageSelection={false} images={props.photos.map(x => photo_to_gallery_photo(x))} />
     )
 }
+*/

src/main.js

@@ -143,6 +143,9 @@ const theme = createMuiTheme({
     typography: {
         fontFamily: ['Roboto', 'sans-serif'].join(','),
     },
+    palette: {
+        type: 'light',
+    },
 });
 
 

src/resultsview.js

@@ -127,7 +127,7 @@ export function ResultsView(props) {
     };
     
     return (
-        <div className={classes.root}>
+        <Box className={classes.root}>
             <AppBar position="static">
                 <Tabs value={activeIndex} onChange={handleChange}>
                     <Tab label="Images" {...tabProps(0)} />
@@ -156,6 +156,6 @@ export function ResultsView(props) {
                     <MapView style={map_style}></MapView>
                 </Box>
             </TabPanel>
-        </div>
+        </Box>
     );
 }