fix legend/general responsiveness

openclimatefix · Aug 30, 2024 · 8b0cb5d · 8b0cb5d
1 parent 461bc2d
commit 8b0cb5d
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 93 deletions.
diff --git a/apps/nowcasting-app/components/charts/ChartLegend.tsx b/apps/nowcasting-app/components/charts/ChartLegend.tsx
@@ -5,6 +5,7 @@ import { FC, useEffect } from "react";
 import useGlobalState from "../helpers/globalState";
 import { getRounded4HoursAgoString } from "../helpers/utils";
 import LegendItem from "./LegendItem";
+import { NHR_FORECAST_OPTIONS } from "../../constant";
 
 type ChartLegendProps = {
   className?: string;
@@ -14,78 +15,73 @@ export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
   const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast");
 
   const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = `flex flex-initial flex-row lg:flex-col 3xl:flex-row ${
+  const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${
     className ? ` ${className}` : ""
   }`;
   return (
-    <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
-      <div
-        className={`flex flex-initial gap-4 xl:gap-8 2xl:gap-12 justify-between flex-col lg:flex-row 3xl:flex-col overflow-x-auto`}
-      >
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            dashStyle={"dashed"}
-            label={"PV live initial estimate"}
-            dataKey={`GENERATION`}
-          />
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            label={"PV live updated"}
-            dataKey={`GENERATION_UPDATED`}
-          />
-        </div>
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-yellow"}
-            dashStyle={"both"}
-            label={"OCF Latest Forecast"}
-            dataKey={`FORECAST`}
-          />
-          {/*<LegendItem*/}
-          {/*  iconClasses={"text-ocf-yellow"}*/}
-          {/*  label={"OCF Final Forecast"}*/}
-          {/*  dataKey={`PAST_FORECAST`}*/}
-          {/*/>*/}
-          {showNhrView && (
+    <div className="@container flex flex-initial">
+      <div className="flex flex-1 flex-col justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 gap-3 bg-mapbox-black-500 overflow-y-visible @sm:flex-row @xl:gap-6">
+        <div
+          className={`flex flex-initial pr-2 justify-between flex-col overflow-x-auto @sm:gap-1 @md:pr-0 @md:flex-col @md:gap-1 @lg:flex-row @lg:gap-8 @3xl:gap-12 @6xl:gap-6`}
+        >
+          <div className={legendItemContainerClasses}>
+            <LegendItem
+              iconClasses={"text-ocf-black"}
+              dashStyle={"dashed"}
+              label={"PV live initial estimate"}
+              dataKey={`GENERATION`}
+            />
+            <LegendItem
+              iconClasses={"text-ocf-black"}
+              label={"PV live updated"}
+              dataKey={`GENERATION_UPDATED`}
+            />
+          </div>
+          <div className={legendItemContainerClasses}>
             <LegendItem
-              iconClasses={"text-ocf-orange"}
+              iconClasses={"text-ocf-yellow"}
               dashStyle={"both"}
-              label={`OCF ${nHourForecast}hr Forecast`}
-              dataKey={`NHR_FORECAST`}
+              label={"OCF Latest Forecast"}
+              dataKey={`FORECAST`}
             />
-          )}
+            {/*<LegendItem*/}
+            {/*  iconClasses={"text-ocf-yellow"}*/}
+            {/*  label={"OCF Final Forecast"}*/}
+            {/*  dataKey={`PAST_FORECAST`}*/}
+            {/*/>*/}
+            {showNhrView && (
+              <LegendItem
+                iconClasses={"text-ocf-orange"}
+                dashStyle={"both"}
+                label={`OCF ${nHourForecast}hr Forecast`}
+                dataKey={`NHR_FORECAST`}
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex flex-1 w-full justify-end items-end gap-3 pr-3 @md:flex-col @lg:gap-4 @2xl:flex-row @3xl:gap-12">
+          <div className="flex">
+            <div className="h-8 w-10 mr-2 custom-select bg-mapbox-black-600 rounded-md">
+              <select
+                value={nHourForecast}
+                onChange={(e) => setNHourForecast(Number(e.target.value))}
+                className="text-sm px-2 py-0 rounded-md"
+              >
+                {NHR_FORECAST_OPTIONS.map((option) => (
+                  <option
+                    key={`NHr-select-option-${option}`}
+                    className="text-black bg-white"
+                    value={option}
+                  >
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>{" "}
+            hour <br />
+            forecast
+          </div>
         </div>
-      </div>
-      <div className="flex flex-initial items-center self-center">
-        <div className="h-8 w-10 mr-2 custom-select bg-mapbox-black-600 rounded-md">
-          <select
-            value={nHourForecast}
-            onChange={(e) => setNHourForecast(Number(e.target.value))}
-            className="text-sm border-mapbox-black-400 px-2 py-0 text-white rounded-md"
-          >
-            <option>1</option>
-            <option>2</option>
-            <option>4</option>
-            <option>8</option>
-          </select>
-        </div>{" "}
-        hour <br />
-        forecast
-      </div>
-      <div className="flex-initial flex self-center items-start">
-        <Tooltip
-          tip={
-            <div className="w-64 rounded-md">
-              <ChartInfo />
-            </div>
-          }
-          position="top"
-          className={"text-right"}
-          fullWidth
-        >
-          <InfoIcon />
-        </Tooltip>
       </div>
     </div>
   );

diff --git a/apps/nowcasting-app/components/charts/LegendItem.tsx b/apps/nowcasting-app/components/charts/LegendItem.tsx
@@ -24,7 +24,7 @@ const LegendItem: FC<{
     <div className="flex items-center flex-initial">
       <LegendLineGraphIcon className={iconClasses} dashStyle={dashStyle} />
       <button
-        className="inline-flex flex-1 text-left pl-1 max-w-full w-auto dash:w-auto text-xs dash:text-base dash:tracking-wider dash:pb-1"
+        className="inline-flex flex-1 text-left pl-1 max-w-full w-auto leading-tight text-2xs @lg:pr-1 @xl:pr-0 @2xl:text-xs dash:text-base dash:tracking-wider dash:pb-1"
         onClick={toggleLineVisibility}
       >
         <span

diff --git a/apps/nowcasting-app/components/icons/icons.tsx b/apps/nowcasting-app/components/icons/icons.tsx
@@ -21,28 +21,28 @@ export const LegendLineGraphIcon: React.FC<LegendLineGraphIconProps> = ({
   let dash = "0";
   switch (dashStyle) {
     case "both":
-      dash = "11 4 3 4 3";
+      dash = "8 4 3 4 3";
       break;
     case "dashed":
-      dash = "3 4";
+      dash = "3 3";
       break;
     case "solid":
       break;
   }
   return (
     <svg
       className={className}
-      width="24"
-      height="22"
-      viewBox="0 0 24 22"
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M3 19C7 19 12 16 12.5 11C13 6 17 3 21 3"
+        d="M2.5 15.5C5.8 15.5 10 13 10.4 9.1C10.8 5.1 14.2 2.5 17.5 2.5"
         strokeWidth={2}
         stroke="currentColor"
-        strokeLinecap={"round"}
+        strokeLinecap="round"
         strokeDasharray={dash}
       />
     </svg>

diff --git a/apps/nowcasting-app/components/layout/header/index.tsx b/apps/nowcasting-app/components/layout/header/index.tsx
@@ -29,7 +29,7 @@ const HeaderLink: React.FC<HeaderLinkProps> = ({
   const computedClasses = classNames(
     className || "",
     disabled ? "text-gray-500 cursor-not-allowed" : "cursor-pointer hover:text-ocf-yellow-400",
-    "flex px-4 py-2 font-semibold text-sm"
+    "flex px-1 sm:px-4 py-2 font-semibold text-xs sm:text-sm"
   );
 
   // Denotes external link for styling
@@ -80,7 +80,7 @@ type HeaderProps = { view: VIEWS; setView: Dispatch<SetStateAction<VIEWS>> };
 
 const Header: React.FC<HeaderProps> = ({ view, setView }) => {
   return (
-    <header className="h-16 text-white text-right px-4 bg-black flex absolute top-0 w-full p-1 text-sm items-center z-30">
+    <header className="h-16 text-white text-right sm:px-4 bg-black flex absolute top-0 w-full overflow-y-visible p-1 text-sm items-center z-30">
       <div className="flex-grow-0 -mt-0.5 flex-shrink-0">
         <a
           className="flex h-8 self-center w-auto"
@@ -109,7 +109,7 @@ const Header: React.FC<HeaderProps> = ({ view, setView }) => {
           <OCFlogo />
         </div>
       </div>
-      <div className="grow text-center inline-flex px-8 gap-5 items-center">
+      <div className="grow text-center inline-flex px-2 sm:px-8 gap-2 sm:gap-5 items-center">
         <Menu>
           <HeaderLink
             url="/"

diff --git a/apps/nowcasting-app/components/layout/layout.tsx b/apps/nowcasting-app/components/layout/layout.tsx
@@ -17,7 +17,7 @@ const Layout = ({ children }: ILayout) => {
         <title>Solar PV Forecast</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="absolute inset-0 flex flex-col h-screen">
+      <main className="flex flex-col h-screen">
         {!solarStatus || solarStatus?.status === "ok" ? null : (
           <div className="blue text-white text-m px-4 py-2" style={{ backgroundColor: "#48B0DF" }}>
             <p>{solarStatus?.message}</p>

diff --git a/apps/nowcasting-app/components/side-layout/expand-button.tsx b/apps/nowcasting-app/components/side-layout/expand-button.tsx
@@ -5,15 +5,15 @@ type ExpandButtonProps = { isOpen: boolean; onClick: () => void };
 const ExpandButton: React.FC<ExpandButtonProps> = ({ onClick, isOpen }) => {
   return (
     <button
-      className="items-center w-10 h-10  text-lg m text-black bg-amber-400  hover:bg-amber-400 focus:bg-amber-400 "
+      className="items-center w-8 h-8 text-lg m text-black bg-amber-400  hover:bg-amber-400 focus:bg-amber-400 "
       onClick={() => {
         onClick();
       }}
     >
       {!isOpen ? (
-        <MdKeyboardArrowRight size={40} className="m-auto" />
+        <MdKeyboardArrowRight size={32} className="m-auto" />
       ) : (
-        <MdKeyboardArrowLeft size={40} className="m-auto" />
+        <MdKeyboardArrowLeft size={32} className="m-auto" />
       )}
     </button>
   );

diff --git a/apps/nowcasting-app/components/side-layout/index.tsx b/apps/nowcasting-app/components/side-layout/index.tsx
@@ -1,6 +1,10 @@
-import { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import ExpandButton from "./expand-button";
 import useGlobalState from "../helpers/globalState";
+import { ChartInfo } from "../../ChartInfo";
+import { InfoIcon } from "../icons/icons";
+import Tooltip, { TooltipPosition } from "../tooltip";
+import { VIEWS } from "../../constant";
 
 type SideLayoutProps = {
   children: ReactNode;
@@ -16,8 +20,20 @@ const SideLayout: FC<SideLayoutProps> = ({
   bottomPadding = true
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [view] = useGlobalState("view");
   // const closedWidth = dashboardModeActive ? "50%" : "44%";
   const closedWidth = "50%";
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (window.innerWidth < 1024) {
+      setIsOpen(true);
+      setIsMobile(true);
+    }
+  }, []);
+  let position: TooltipPosition = "top";
+  if (isMobile) {
+    position = isOpen ? "top-left" : "top-middle";
+  }
   return (
     <div
       className={`h-full pt-16 absolute top-0 left-0 z-20 ${className || ""}`}
@@ -28,17 +44,28 @@ const SideLayout: FC<SideLayoutProps> = ({
           "focus:outline-none h-full text-white justify-between flex flex-col bg-mapbox-black-500 z-20 "
         }
       >
-        <div
-          className={`min-h-full max-h-full flex flex-col overflow-y-scroll${
-            bottomPadding ? " pb-[4.5rem]" : ""
-          }`}
-        >
-          {children}
-        </div>
+        <div className={`min-h-full max-h-full flex flex-col overflow-y-scroll`}>{children}</div>
       </div>
-      <div className="absolute bottom-14 -right-5 h-10">
+      <div className="absolute bottom-12 -right-4 h-10">
         <ExpandButton isOpen={isOpen} onClick={() => setIsOpen((o) => !o)} />
       </div>
+
+      {view !== VIEWS.SOLAR_SITES && (
+        <div className="absolute bottom-3 -right-4 bg-mapbox-black-500 p-1.5 rounded-full">
+          <Tooltip
+            tip={
+              <div className="w-64 rounded-md">
+                <ChartInfo />
+              </div>
+            }
+            position={position}
+            className={"text-right"}
+            fullWidth
+          >
+            <InfoIcon />
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/apps/nowcasting-app/components/tooltip.tsx b/apps/nowcasting-app/components/tooltip.tsx
@@ -1,7 +1,8 @@
+export type TooltipPosition = "left" | "right" | "middle" | "top" | "top-middle" | "top-left";
 type TooltipProps = {
   children: React.ReactNode;
   tip: string | React.ReactNode;
-  position?: "left" | "right" | "middle" | "top";
+  position?: TooltipPosition;
   className?: string;
   fullWidth?: boolean;
 };
@@ -32,6 +33,15 @@ const Tooltip: React.FC<TooltipProps> = ({
     case "top":
       containerPositionClass = "bottom-5 right-2";
       tipPositionClass = "-right-2 bottom-0";
+      break;
+    case "top-middle":
+      containerPositionClass = "bottom-6 -left-32 transform translate-x-2";
+      tipPositionClass = "-left-1 bottom-0";
+      break;
+    case "top-left":
+      containerPositionClass = "bottom-8 right-64 transform -translate-x-2";
+      tipPositionClass = "-left-1 bottom-0";
+      break;
   }
   return (
     <div

diff --git a/apps/nowcasting-app/constant.ts b/apps/nowcasting-app/constant.ts
@@ -102,3 +102,5 @@ export enum DELTA_BUCKET {
   POS4 = 100
 }
 export const getDeltaBucketKeys = () => Object.keys(DELTA_BUCKET).filter((k) => isNaN(Number(k)));
+
+export const NHR_FORECAST_OPTIONS = [1, 2, 4, 8];
diff --git a/apps/nowcasting-app/pages/_document.tsx b/apps/nowcasting-app/pages/_document.tsx
@@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from "next/document";
 class MyDocument extends Document {
   render() {
     return (
-      <Html className="h-full bg-gray-50">
+      <Html className="bg-gray-50">
         <Head>
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           {/*// @ts-ignore*/}
@@ -15,7 +15,7 @@ class MyDocument extends Document {
           <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
           <script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>
         </Head>
-        <body className="h-full">
+        <body>
           <Main />
           <NextScript />
         </body>

diff --git a/apps/nowcasting-app/styles/globals.css b/apps/nowcasting-app/styles/globals.css
@@ -11,6 +11,10 @@
   @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-mapbox-black bg-ocf-yellow hover:bg-ocf-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ocf-delta-500;
 }
 
+.pv-map a.mapboxgl-ctrl-logo, .delta-map a.mapboxgl-ctrl-logo {
+  margin-left: 0.5rem;
+}
+
 .pv-map .mapboxgl-popup-content, .delta-map .mapboxgl-popup-content {
   background: rgba(0,0,0,0.75);
   color: white;
@@ -81,7 +85,7 @@
   height: 100%;
   padding: 0.25em 0.5em 0.25em 0.5em;
   background: transparent;
-  border: 1px solid #caced1;
+  border: 1px solid #FF9736;
   border-radius: 0.25rem;
   cursor: pointer;
 }