From fc930fe4336edefdbfdbb00c2407eabd409dc659 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 12 Sep 2022 17:16:15 +0200
Subject: [PATCH] Decrease map page height if banner is enabled (for #272)

---
 frontend/src/pages/MapPage/index.tsx          | 10 ++++++++--
 frontend/src/pages/MapPage/styles.module.less |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index 41691ec..07f510d 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/frontend/src/pages/MapPage/index.tsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { Button } from "semantic-ui-react";
 import { Layer, Source } from "react-map-gl";
 import produce from "immer";
+import classNames from "classnames";
 
 import type { Location } from "types";
 import { Page, Map } from "components";
@@ -110,7 +111,7 @@ const getEventsTextLayer = () => ({
 });
 
 function MapPage({ login }) {
-  const { obsMapSource } = useConfig() || {};
+  const { obsMapSource, banner } = useConfig() || {};
   const [clickLocation, setClickLocation] = useState<Location | null>(null);
 
   const mapConfig = useMapConfig();
@@ -198,7 +199,12 @@ function MapPage({ login }) {
 
   return (
     <Page fullScreen title="Map">
-      <div className={styles.mapContainer}>
+      <div
+        className={classNames(
+          styles.mapContainer,
+          banner ? styles.hasBanner : null
+        )}
+      >
         {layerSidebar && (
           <div className={styles.mapSidebar}>
             <LayerSidebar />
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index 9a2bdd8..8962f4a 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -6,6 +6,10 @@
   position: relative;
   display: flex;
   align-items: stretch;
+
+  &.hasBanner {
+    height: calc(100vh - @menuHeight - 50px);
+  }
 }
 
 .mapSidebar {