fuhtho/geothermie-atlas
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adapt UI

Browse Source
This commit is contained in:
Fuhrmann 2023-10-19 14:22:20 +02:00
parent ddb8411e1f
commit 92d8d4deaa
5 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/about/page.tsx
View File

@ -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

6
app/ews/potenzialberechnung/calculations-menu.tsx
View File

@ -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>

12
app/ews/potenzialberechnung/panel-potenzialkarte.tsx
View File

@ -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">

12
app/ews/potenzialberechnung/potenzialkarte.tsx
View File

@ -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') {

2
app/mobile-navigation.tsx
View File

@ -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}