change vertical/horizontal split based on orientation/screensize

frontend/src/components/Map.jsx

@@ -30,7 +30,7 @@ class Map extends React.Component {
       <LeafletMap
         center={centerGermany}
         zoom={5}
-        style={{ width: '100vw', height: 'calc(50vh - 60px)', margin: 0, padding: 0, maxWidth: '100%' }}
+        style={{ margin: 0, padding: 0, height: '100%', width: '100%', maxWidth: '100%' }}
       >
         <TileLayer
           url="/map/tiles/{z}/{x}/{y}.png"

frontend/src/components/Toolbar.jsx

@@ -33,7 +33,7 @@ class MyToolbar extends React.Component {
   render() {
     return (
       <AppBar position="fixed">
-        <Toolbar>
+        <Toolbar id="toolbar" >
           <div style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
               <Typography variant="h6" color="inherit">
                 CCC Spaces

frontend/src/style/css/style.css

@@ -1,3 +1,29 @@
 body {
     background-color: #333333;
 }
+
+#indexContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin-top: 60px;
+}
+
+@media (min-width: 680px) {
+  #indexContainer {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: landscape) {
+  #toolbar {
+    min-height: 20px !important;
+    .MuiIconButton-root {
+      padding: 3px !important;
+    }
+  }
+
+  #indexContainer {
+    margin-top: 32px;
+  }
+}

frontend/src/views/Index.jsx

@@ -2,20 +2,16 @@ import React from 'react';
 import Map from '../components/Map';
 import EventList from '../components/EventList';
 
-const style = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-};
 
 const IndexContainer = () => (
-  <div style={style.container}>
+  <div id="indexContainer">
-    <div style={{ height: 'calc(50vh - 60px)', paddingTop: '60px'}}>
+    <div style={{ flex: 2 }}>
       <Map />
     </div>
+    <div style={{ flex: 2 }}>
       <EventList />
     </div>
+  </div>
 );
 
 export default IndexContainer;