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() { export default function About() {
return ( 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> <h1 className="text-xl mb-4">Informationen über diese Applikation</h1>
<p> <p>
Diese Applikation unterstützt die Planung oberflächennaher geothermischer Anlagen. Es können geothermisch 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 <div
className={`absolute top-[70px] lg:top-24 left-4 ${ className={`absolute top-[70px] lg:top-24 left-4 ${
opened && isTablet ? 'bottom-12' : '' opened && isTablet ? 'bottom-12' : ''
} w-[calc(100%-2rem)] lg:w-[300px]`} } w-[calc(100%-2rem)] lg:w-[300px] z-0`}
> >
<div <div
onClick={handleClick} 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> Berechnungsmenü <span className="float-right">{opened ? '-' : '+'}</span>
</div> </div>
@ -366,7 +366,7 @@ export default forwardRef(function CalculationsMenu(
}`} }`}
ref={innerRef} 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> <label>Sondenpunkte auswählen/zeichnen</label>
<div ref={outerRef}></div> <div ref={outerRef}></div>
</div> </div>

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

@ -44,7 +44,7 @@ export default function Panel() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isTablet = useMediaQuery({ maxWidth: 1024 }); const isTablet = useMediaQuery({ maxWidth: 1180 });
// initialize query handlers // initialize query handlers
useEffect(() => { useEffect(() => {
@ -104,9 +104,9 @@ export default function Panel() {
return ( return (
<div <div
className={`absolute top-4 right-4 ${opened && isTablet ? 'bottom-4' : ''} ${ className={`absolute top-4 right-4 w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0 ${
opened && Object.keys(computationResult).length > 1 ? 'bottom-4' : '' opened && isTablet ? 'bottom-4' : ''
} w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0 z-50`} } ${opened && Object.keys(computationResult).length > 1 ? 'bottom-4' : ''}`}
> >
<div <div
onClick={handleClick} onClick={handleClick}
@ -115,7 +115,9 @@ export default function Panel() {
Berechnungsergebnis <span className="float-right">{opened ? '-' : '+'}</span> Berechnungsergebnis <span className="float-right">{opened ? '-' : '+'}</span>
</div> </div>
<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} ref={innerRef}
> >
<div className="flex justify-end"> <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 { useRef, useEffect, useState, Dispatch, SetStateAction } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
@ -226,7 +228,7 @@ export default function MapComponent() {
}); });
let sketch = new Sketch({ let sketch = new Sketch({
// container: calculationsMenuRef.current, container: calculationsMenuRef.current,
layer: pointGraphicsLayer, layer: pointGraphicsLayer,
view: view, view: view,
availableCreateTools: ['point'], availableCreateTools: ['point'],
@ -241,10 +243,10 @@ export default function MapComponent() {
creationMode: 'single', creationMode: 'single',
}); });
if (loaded.current) { // if (loaded.current) {
sketch.container = calculationsMenuRef.current; // sketch.container = calculationsMenuRef.current;
} // }
loaded.current = true; // loaded.current = true;
sketch.on('create', (event) => { sketch.on('create', (event) => {
if (event.tool === 'point' && event.state === 'complete') { if (event.tool === 'point' && event.state === 'complete') {

2
app/mobile-navigation.tsx
View File

@ -18,7 +18,7 @@ export default function Navigation() {
}; };
return ( return (
<div className="md:hidden "> <div className="md:hidden">
<button <button
className="absolute top-5 right-5 inline-flex hover:text-red-700 lg:hidden ml-auto outline-none" className="absolute top-5 right-5 inline-flex hover:text-red-700 lg:hidden ml-auto outline-none"
onClick={handleClick} onClick={handleClick}