From 92d8d4deaaad86382e08a017fa7fc44009cf8421 Mon Sep 17 00:00:00 2001
From: Thomas Fuhrmann <thomas.fuhrmann@geologie.ac.at>
Date: Thu, 19 Oct 2023 14:22:20 +0200
Subject: [PATCH] Adapt UI

---
 app/about/page.tsx                                   |  2 +-
 app/ews/potenzialberechnung/calculations-menu.tsx    |  6 +++---
 app/ews/potenzialberechnung/panel-potenzialkarte.tsx | 12 +++++++-----
 app/ews/potenzialberechnung/potenzialkarte.tsx       | 12 +++++++-----
 app/mobile-navigation.tsx                            |  2 +-
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index b999f9c..7865861 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function About() {
   return (
-    <div className="absolute top-16 bottom-0 left-0 right-0 w-full px-[33%] flex flex-col items-center pt-8 pb-8 overflow-y-auto">
+    <div className="absolute top-16 bottom-0 left-0 right-0 w-full px-4 lg:px-[25%] xl:px-[33%] flex flex-col items-center pt-8 pb-8 overflow-y-auto">
       <h1 className="text-xl mb-4">Informationen über diese Applikation</h1>
       <p>
         Diese Applikation unterstützt die Planung oberflächennaher geothermischer Anlagen. Es können geothermisch
diff --git a/app/ews/potenzialberechnung/calculations-menu.tsx b/app/ews/potenzialberechnung/calculations-menu.tsx
index 8dd8cda..dca2c3f 100644
--- a/app/ews/potenzialberechnung/calculations-menu.tsx
+++ b/app/ews/potenzialberechnung/calculations-menu.tsx
@@ -352,11 +352,11 @@ export default forwardRef(function CalculationsMenu(
     <div
       className={`absolute top-[70px] lg:top-24 left-4 ${
         opened && isTablet ? 'bottom-12' : ''
-      } w-[calc(100%-2rem)] lg:w-[300px]`}
+      } w-[calc(100%-2rem)] lg:w-[300px] z-0`}
     >
       <div
         onClick={handleClick}
-        className="bg-gray-700 text-white cursor-pointer p-4 w-full border-0 hover:bg-gray-500 h-12 items-center justify-between text-sm xl:text-base"
+        className="bg-gray-700 text-white cursor-pointer p-4 w-full border-0 hover:bg-gray-500 h-12 items-center justify-between text-sm xl:text-base z-0"
       >
         Berechnungsmenü <span className="float-right">{opened ? '-' : '+'}</span>
       </div>
@@ -366,7 +366,7 @@ export default forwardRef(function CalculationsMenu(
         }`}
         ref={innerRef}
       >
-        <div className={!polygon ? 'bg-white opacity-50 z-50 pointer-events-none cursor-not-allowed pb-2' : 'pb-2'}>
+        <div className={!polygon ? 'bg-white opacity-50 pointer-events-none pb-2' : 'pb-2'}>
           <label>Sondenpunkte auswählen/zeichnen</label>
           <div ref={outerRef}></div>
         </div>
diff --git a/app/ews/potenzialberechnung/panel-potenzialkarte.tsx b/app/ews/potenzialberechnung/panel-potenzialkarte.tsx
index 1f64a9d..8407c5f 100644
--- a/app/ews/potenzialberechnung/panel-potenzialkarte.tsx
+++ b/app/ews/potenzialberechnung/panel-potenzialkarte.tsx
@@ -44,7 +44,7 @@ export default function Panel() {
 
   const dispatch = useAppDispatch();
 
-  const isTablet = useMediaQuery({ maxWidth: 1024 });
+  const isTablet = useMediaQuery({ maxWidth: 1180 });
 
   // initialize query handlers
   useEffect(() => {
@@ -104,9 +104,9 @@ export default function Panel() {
 
   return (
     <div
-      className={`absolute top-4 right-4 ${opened && isTablet ? 'bottom-4' : ''} ${
-        opened && Object.keys(computationResult).length > 1 ? 'bottom-4' : ''
-      } w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0 z-50`}
+      className={`absolute top-4 right-4 w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0 ${
+        opened && isTablet ? 'bottom-4' : ''
+      } ${opened && Object.keys(computationResult).length > 1 ? 'bottom-4' : ''}`}
     >
       <div
         onClick={handleClick}
@@ -115,7 +115,9 @@ export default function Panel() {
         Berechnungsergebnis <span className="float-right">{opened ? '-' : '+'}</span>
       </div>
       <div
-        className={`h-[calc(100%-3rem)] px-2 xl:px-4 py-4 overflow-y-auto bg-white text-sm ${opened ? '' : 'hidden'}`}
+        className={`relative h-[calc(100%-3rem)] px-2 xl:px-4 py-4 overflow-y-auto bg-white text-sm z-20 ${
+          opened ? '' : 'hidden'
+        }`}
         ref={innerRef}
       >
         <div className="flex justify-end">
diff --git a/app/ews/potenzialberechnung/potenzialkarte.tsx b/app/ews/potenzialberechnung/potenzialkarte.tsx
index 72b81a4..9582e3b 100644
--- a/app/ews/potenzialberechnung/potenzialkarte.tsx
+++ b/app/ews/potenzialberechnung/potenzialkarte.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useRef, useEffect, useState, Dispatch, SetStateAction } from 'react';
 import { useMediaQuery } from 'react-responsive';
 
@@ -226,7 +228,7 @@ export default function MapComponent() {
       });
 
       let sketch = new Sketch({
-        // container: calculationsMenuRef.current,
+        container: calculationsMenuRef.current,
         layer: pointGraphicsLayer,
         view: view,
         availableCreateTools: ['point'],
@@ -241,10 +243,10 @@ export default function MapComponent() {
         creationMode: 'single',
       });
 
-      if (loaded.current) {
-        sketch.container = calculationsMenuRef.current;
-      }
-      loaded.current = true;
+      // if (loaded.current) {
+      //   sketch.container = calculationsMenuRef.current;
+      // }
+      // loaded.current = true;
 
       sketch.on('create', (event) => {
         if (event.tool === 'point' && event.state === 'complete') {
diff --git a/app/mobile-navigation.tsx b/app/mobile-navigation.tsx
index 86c360d..9c3e868 100644
--- a/app/mobile-navigation.tsx
+++ b/app/mobile-navigation.tsx
@@ -18,7 +18,7 @@ export default function Navigation() {
   };
 
   return (
-    <div className="md:hidden ">
+    <div className="md:hidden">
       <button
         className="absolute top-5 right-5 inline-flex hover:text-red-700 lg:hidden ml-auto outline-none"
         onClick={handleClick}