Large graph back button

src/Features/ERDDAP/Platform/Observations/BackToPlatformButton/index.tsx

@@ -0,0 +1,22 @@
+import { usePathname } from "next/navigation"
+import Link from "next/link"
+import { ArrowLeftIcon } from "Shared/icons/iconsMap"
+
+type BackToPlatformButtonProps = {
+  className: string
+}
+
+export const BackToPlatformButton = ({ className }: BackToPlatformButtonProps) => {
+  const path = usePathname()
+  const urlSegs = path.split("/")
+  const targetLink = urlSegs[1] === "platform" ? `/${urlSegs[1]}/${urlSegs[2]}` : path
+
+  return (
+    <Link href={targetLink} className={className}>
+      <span className="d-flex flex-row align-items-center gap-2">
+        <ArrowLeftIcon className="text-info fa-l" />
+        <span className="text-info">Back</span>
+      </span>
+    </Link>
+  )
+}

src/Features/ERDDAP/Platform/Observations/Condition/index.tsx

@@ -12,7 +12,8 @@ import { TimeframePicker } from "Features/ERDDAP/TimeframeSelector/TimeframePick
 import { TimeframeButtonGroup, TimeframeDropdown } from "Features/ERDDAP/TimeframeButtonGroup"
 import { naturalBounds } from "Shared/dataTypes"
 import { DataTimeSeries } from "Shared/timeSeries"
-import { aWeekAgoRounded, daysInFuture } from "Shared/time"
+import { aWeekAgoRounded, daysInFuture, manuallySetFullEODIso } from "Shared/time"
+import { BackToPlatformButton } from "../BackToPlatformButton"
 
 import { UseDataset } from "../../../hooks"
 import { PlatformFeature, PlatformTimeSeries } from "../../../types"
@@ -59,9 +60,12 @@ export const ErddapObservedCondition: React.FunctionComponent<Props> = ({ platfo
 
     return (
       <div key={ts.depth ? ts.depth : index} className="d-flex flex-column gap-2">
-        <h2 className="d-flex gap-2 justify-content-center align-items-center">
-          {ts.data_type.long_name} {depth} <Info timeSeries={[ts]} id={index} startDate={startDate} />
-        </h2>
+        <div className="d-flex flex-column flex-md-row gap-2 p-2 position-relative align-items-md-start justify-content-end justify-content-md-center">
+          {index === 0 && <BackToPlatformButton className="d-flex back-button-positioning ps-0 bg-white border-0" />}
+          <h2 className="d-flex gap-2 mx-auto align-items-center">
+            {ts.data_type.long_name} {depth} <Info timeSeries={[ts]} id={index} startDate={startDate} />
+          </h2>
+        </div>
         {index === 0 && (
           <div className="d-none d-lg-flex flex-column flex-md-row gap-2 align-items-center">
             <TimeframeButtonGroup

src/Features/ERDDAP/Platform/Observations/WindCondition/index.tsx

@@ -18,6 +18,7 @@ import { pickWindDatasets, pickWindTimeSeries } from "../../../utils/wind"
 import { Info } from "../Condition/Info"
 import { UseDatasets } from "Features/ERDDAP/hooks"
 import { TimeframePicker } from "Features/ERDDAP/TimeframeSelector/TimeframePicker"
+import { BackToPlatformButton } from "../BackToPlatformButton"
 import { useSearchParams } from "next/navigation"
 import { getStartFunction, Timeframes } from "Features/ERDDAP/TimeframeButtonGroup/timeframes"
 import { TimeframeButtonGroup, TimeframeDropdown } from "Features/ERDDAP/TimeframeButtonGroup"
@@ -62,9 +63,12 @@ export const ErddapWindObservedCondition: React.FunctionComponent<Props> = ({ pl
 
   return (
     <div>
-      <h2 className="d-flex gap-2 justify-content-center align-items-center">
-        Wind <Info timeSeries={timeSeries} id={0} startDate={startDate} />
-      </h2>
+      <div className="d-flex flex-column flex-md-row gap-2 p-2 position-relative align-items-md-start justify-content-end justify-content-md-center">
+        <BackToPlatformButton className="d-flex back-button-positioning ps-0 bg-white border-0" />
+        <h2 className="d-flex gap-2 mx-auto align-items-center">
+          Wind <Info timeSeries={timeSeries} id={0} startDate={startDate} />
+        </h2>
+      </div>
       <div className="d-none d-lg-flex flex-column flex-md-row gap-2 align-items-center">
         <TimeframeButtonGroup
           name="time-frame-group"

src/index.scss

@@ -348,12 +348,22 @@ $dig-opacities: (
   background-color: $primary;
   border-radius: 50rem;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     border-radius: 8px;
     margin-top: 4px;
   }
 }
 
+.back-button-positioning {
+  position: absolute;
+  left: 0;
+
+  @include media-breakpoint-down(md) {
+    position: unset;
+    left: unset;
+  }
+}
+
 // ==== GENERAL STATION DETAILS END ====
 .superlatives-tooltip .tooltip-inner {
   max-width: none;