addds a new font and text highlights in form title

lmueller27 · Jul 8, 2023 · bf9ac34 · bf9ac34
1 parent 01aa05f
commit bf9ac34
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 14 deletions.
diff --git a/app/components/form.module.css b/app/components/form.module.css
@@ -3,7 +3,10 @@
  overflow: auto;
  display: flex;
  flex-direction: column;
- padding: 5rem;
+ padding-top: 3rem;
+ padding-left: 5rem;
+ padding-right: 5rem;
+ padding-bottom: 3rem;
  gap: 1rem;
 }
 
@@ -147,6 +150,7 @@
  border-radius: 10px;
  border-color: lightslategray;
  padding: 0.1rem;
+ padding-left: .3rem;
 }
 
 .settingForm input[type="number"] {
@@ -169,3 +173,11 @@
  background-color:forestgreen;
  color: white;
 }
+
+.formTitle {
+ white-space:nowrap;
+}
+
+.highlightText {
+ display:inline-block;
+}
diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -38,7 +38,7 @@ export default function Form(props: any) {
  keepCrosshair: false,
  showTargetDate: false,
  showTargetWeek: false,
- formTitle: 'Select a visualization',
+ formTitle: <h1>Select a visualization</h1>,
  formGeoString: '',
  currentVisMode: null,
  })
@@ -63,10 +63,10 @@ export default function Form(props: any) {
  }, [inputState])
 
  return (
- <div className={styles.form}>
+ <div className={styles.form} >
  <InputSpace inputState={inputState} setInputState={setInputState} />
  <GenerateButtons state={state} setState={setState} inputState={inputState}/>
- <h1>{state.formTitle}</h1>
+ {state.formTitle}
  <p>{state.formGeoString}</p>
  <h4>Click on the series to freeze/unfreeze the tooltip. Drag to zoom in.</h4>
  <AutoSizer disableHeight>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,17 @@
 import './globals.css'
-import { Roboto } from 'next/font/google'
+import { Barlow, Montserrat, Roboto } from 'next/font/google'
 import styles from './layout.module.css';
 
 const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
 })
 
+const montserrat = Montserrat({
+ weight: ['400', '700'],
+ subsets: ['latin'],
+})
+
 export const metadata = {
  title: 'Daily Weather History',
  description: 'Visualize and compare historical weather data for any geolocation.',
@@ -19,7 +24,7 @@ export default function RootLayout({
 }) {
  return (
  <html className={styles.container} lang="en">
- <body className={roboto.className}>
+ <body className={montserrat.className}>
  {children}
  </body>
  </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,4 @@
 
-import Form from "./components/form";
 import FormComparer from "./components/formComparer";
 import Layout from "./layout";
 

diff --git a/app/shared/openMeteoInterface.tsx b/app/shared/openMeteoInterface.tsx
@@ -1,5 +1,5 @@
-import { formState, getWeekNumber, inputState, median, visualizationModes } from "./utils";
-
+import { formState, getWeekNumber, inputState, median, months, myColors, visualizationModes } from "./utils";
+import styles from '../components/form.module.css'
 /**
  * 
  * @returns Historical data for the current state of the form 
@@ -69,7 +69,16 @@ export async function getOpenMeteoData(inputState: inputState, state: formState,
  showTargetWeek: false,
  currentVisMode: visualizationModes.Interval,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `Daily Data between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `Daily Data between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: <div className={styles.formTitle}><h1>Daily Data between&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.startDate}&nbsp;
+ </p>and&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.endDate}
+ </p>.
+ </h1>
+ </div>
  })
 }
 
@@ -119,7 +128,20 @@ export async function getDateHistory(inputState: inputState, state: formState, s
  showTargetWeek: false,
  currentVisMode: visualizationModes.DateHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of ${inputState.targetDate.slice(5)} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of ${inputState.targetDate.slice(5)} between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: <div className={styles.formTitle}><h1>History of&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.targetDate.slice(5)}&nbsp;
+ </p>
+ between&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.startDate}&nbsp;
+ </p>and&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.endDate}
+ </p>.
+ </h1>
+ </div>
  })
 }
 
@@ -198,7 +220,20 @@ export async function getWeekHistory(inputState: inputState, state: formState, s
  showTargetWeek: true,
  currentVisMode: visualizationModes.WeekHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of Calender Week ${targetWeek} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of Calender Week ${targetWeek} between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: <div className={styles.formTitle}><h1>History of Calender Week&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {targetWeek}&nbsp;
+ </p>
+ between&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.startDate}&nbsp;
+ </p>and&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.endDate}
+ </p>.
+ </h1>
+ </div>
  })
 }
 
@@ -269,7 +304,20 @@ export async function getMonthHistory(inputState: inputState, state: formState,
  showTargetWeek: true,
  currentVisMode: visualizationModes.MonthHistory,
  formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of Month ${inputState.targetDate.slice(5).slice(0, -3)} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of Month ${months[Number(inputState.targetDate.slice(5).slice(0, -3))]} between ${inputState.startDate} and ${inputState.endDate}.`,
+ formTitle: <div className={styles.formTitle}><h1>History of Month&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {months[Number(inputState.targetDate.slice(5).slice(0, -3))]}&nbsp;
+ </p>
+ between&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.startDate}&nbsp;
+ </p>and&nbsp;
+ <p className={styles.highlightText} style={{ color: myColors.IconBlue }}>
+ {inputState.endDate}
+ </p>.
+ </h1>
+ </div>
  })
 }
 
diff --git a/app/shared/utils.tsx b/app/shared/utils.tsx
@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
 /**
  * The type we use to mark a data point in a weather data series. x is the date and y a temperature measurement
  */
@@ -29,7 +31,7 @@ export interface formState {
  keepCrosshair: boolean,
  showTargetDate: boolean,
  showTargetWeek: boolean,
- formTitle: string,
+ formTitle: ReactElement<any, any>,
  formGeoString: string,
  currentVisMode: visualizationModes | null,
 }
@@ -49,6 +51,21 @@ export enum myColors {
  IconBlue = "#0070f3"
 }
 
+export enum months {
+ January = 1,
+ Feburary = 2,
+ March = 3,
+ April = 4,
+ May = 5,
+ June = 6,
+ July = 7,
+ August = 8,
+ September = 9,
+ October = 10,
+ November = 11,
+ December = 12,
+}
+
 /**
  * from https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
  * @param d a Date