From bb6e0fe7968b73aae3f2217949ab1849e0495b3d Mon Sep 17 00:00:00 2001 From: "leon.mueller" Date: Sat, 8 Jul 2023 20:29:37 +0200 Subject: [PATCH] moved css to styles folder --- app/components/collapsibleMap.tsx | 2 +- app/components/form.tsx | 2 +- app/components/formComparer.tsx | 2 +- app/components/generateButtons.tsx | 2 +- app/components/inputSpace.tsx | 26 ++++++++++++++-------- app/components/legend.tsx | 2 +- app/components/plotControls.tsx | 2 +- app/components/weatherPlot.tsx | 2 +- app/layout.tsx | 4 ++-- app/shared/openMeteoInterface.tsx | 2 +- app/{components => styles}/form.module.css | 11 ++++++++- app/{ => styles}/globals.css | 0 app/{ => styles}/layout.module.css | 0 13 files changed, 37 insertions(+), 20 deletions(-) rename app/{components => styles}/form.module.css (92%) rename app/{ => styles}/globals.css (100%) rename app/{ => styles}/layout.module.css (100%) diff --git a/app/components/collapsibleMap.tsx b/app/components/collapsibleMap.tsx index fbbf31f..f272393 100644 --- a/app/components/collapsibleMap.tsx +++ b/app/components/collapsibleMap.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { Draggable, Map, Point } from "pigeon-maps" import { inputState, myColors } from "../shared/utils" import { useRef, useState } from "react" -import styles from './form.module.css' +import styles from '../styles/form.module.css' export default function CollapsibleMap({ inputState, setInputState, center, setCenter }: { inputState: inputState, setInputState: React.Dispatch>, center: [number, number], setCenter: React.Dispatch> }) { diff --git a/app/components/form.tsx b/app/components/form.tsx index e8eb771..37886ef 100644 --- a/app/components/form.tsx +++ b/app/components/form.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import '../../node_modules/react-vis/dist/style.css'; -import styles from './form.module.css' +import styles from '../styles/form.module.css' import AutoSizer from 'react-virtualized-auto-sizer' import { formState, getWeekNumber, inputState, visualizationModes } from "../shared/utils"; import { WeatherPlot } from "./weatherPlot"; diff --git a/app/components/formComparer.tsx b/app/components/formComparer.tsx index 438d580..210e1d2 100644 --- a/app/components/formComparer.tsx +++ b/app/components/formComparer.tsx @@ -2,7 +2,7 @@ import { useState } from "react" import Form from "./form" -import styles from './form.module.css' +import styles from '../styles/form.module.css' export default function FormComparer() { const [activeForms, setForms] = useState([0]) diff --git a/app/components/generateButtons.tsx b/app/components/generateButtons.tsx index f769d2d..0d7bec5 100644 --- a/app/components/generateButtons.tsx +++ b/app/components/generateButtons.tsx @@ -1,6 +1,6 @@ import { getDateHistory, getMonthHistory, getOpenMeteoData, getWeekHistory } from "../shared/openMeteoInterface"; import { formState, inputState, visualizationModes } from "../shared/utils"; -import styles from './form.module.css' +import styles from '../styles/form.module.css' export function GenerateButtons({ state, setState, inputState }: { state: formState, setState: React.Dispatch>, inputState: inputState }) { return ( diff --git a/app/components/inputSpace.tsx b/app/components/inputSpace.tsx index d4a5464..6655d6f 100644 --- a/app/components/inputSpace.tsx +++ b/app/components/inputSpace.tsx @@ -4,7 +4,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css' config.autoAddCss = false import { inputState, myColors } from "../shared/utils" import CollapsibleMap from "./collapsibleMap" -import styles from './form.module.css' +import styles from '../styles/form.module.css' import { faLocationCrosshairs } from "@fortawesome/free-solid-svg-icons" import { useState } from "react" @@ -15,16 +15,24 @@ export function InputSpace({ inputState, setInputState }: { inputState: inputSta
- +
+ { setInputState({ ...inputState, latitude: parseFloat(e.target.value) }) }} /> - +
+
+ { setInputState({ ...inputState, longitude: parseFloat(e.target.value) }) }} /> - - { setInputState({ ...inputState, targetDate: e.target.value }) }} /> - - { setInputState({ ...inputState, startDate: e.target.value }) }} /> - - { setInputState({ ...inputState, endDate: e.target.value }) }} /> +
+
+ + { setInputState({ ...inputState, targetDate: e.target.value }) }} /> +
+
+ + { setInputState({ ...inputState, startDate: e.target.value }) }} /> + + { setInputState({ ...inputState, endDate: e.target.value }) }} /> +
diff --git a/app/components/legend.tsx b/app/components/legend.tsx index b6041ff..2cddc90 100644 --- a/app/components/legend.tsx +++ b/app/components/legend.tsx @@ -1,5 +1,5 @@ import { DiscreteColorLegend } from "react-vis"; -import styles from './form.module.css' +import styles from '../styles/form.module.css' import { formState, myColors } from "../shared/utils"; export default function FormLegend({ width, state, setState }: { width: number, state: formState, setState: React.Dispatch> }) { diff --git a/app/components/plotControls.tsx b/app/components/plotControls.tsx index 8341e4e..d5f9715 100644 --- a/app/components/plotControls.tsx +++ b/app/components/plotControls.tsx @@ -1,4 +1,4 @@ -import styles from './form.module.css' +import styles from '../styles/form.module.css' import FormLegend from './legend' import { formState } from '../shared/utils' diff --git a/app/components/weatherPlot.tsx b/app/components/weatherPlot.tsx index 0a5a6c1..04f9919 100644 --- a/app/components/weatherPlot.tsx +++ b/app/components/weatherPlot.tsx @@ -2,7 +2,7 @@ import { AreaSeries, Crosshair, DecorativeAxis, Highlight, HighlightArea, Horizo import { formState, myColors } from "../shared/utils"; import { leastSquaresLinearRegression } from "../shared/mathHelpers"; import { useState } from "react"; -import styles from './form.module.css' +import styles from '../styles/form.module.css' export function WeatherPlot({ state, setState, width }: { state: formState, setState: React.Dispatch>, width: any }) { const [lastDrawLocation, setLastDrawLocation] = useState(null) diff --git a/app/layout.tsx b/app/layout.tsx index 097fbbd..dcd0d53 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,6 @@ -import './globals.css' +import './styles/globals.css' import { Barlow, Montserrat, Roboto } from 'next/font/google' -import styles from './layout.module.css'; +import styles from './styles/layout.module.css'; const roboto = Roboto({ weight: ['400', '700'], diff --git a/app/shared/openMeteoInterface.tsx b/app/shared/openMeteoInterface.tsx index dc72661..e2f8c7b 100644 --- a/app/shared/openMeteoInterface.tsx +++ b/app/shared/openMeteoInterface.tsx @@ -1,5 +1,5 @@ import { formState, getWeekNumber, inputState, median, months, myColors, visualizationModes } from "./utils"; -import styles from '../components/form.module.css' +import styles from '../styles/form.module.css' /** * * @returns Historical data for the current state of the form diff --git a/app/components/form.module.css b/app/styles/form.module.css similarity index 92% rename from app/components/form.module.css rename to app/styles/form.module.css index 72e36e1..c5516c2 100644 --- a/app/components/form.module.css +++ b/app/styles/form.module.css @@ -19,6 +19,7 @@ padding: 1rem; background-color: rgba(240, 248, 255, 0.656); border-radius: 25px; + overflow-x:visible; } .form h1 { @@ -138,7 +139,7 @@ } .settingForm { - display: flex; + display:inline-flex; flex-direction: row; justify-content: left; gap: 1rem; @@ -180,4 +181,12 @@ .highlightText { display:inline-block; +} + +@media only screen and (max-width: 825px) { + + .settingForm { + display: grid; + grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr; + } } \ No newline at end of file diff --git a/app/globals.css b/app/styles/globals.css similarity index 100% rename from app/globals.css rename to app/styles/globals.css diff --git a/app/layout.module.css b/app/styles/layout.module.css similarity index 100% rename from app/layout.module.css rename to app/styles/layout.module.css