Skip to content

Large graph back button - #4158

Open
shindelr wants to merge 13 commits into
gulfofmaine:mainfrom
shindelr:feature-back-button
Open

Large graph back button#4158
shindelr wants to merge 13 commits into
gulfofmaine:mainfrom
shindelr:feature-back-button

Conversation

@shindelr

Copy link
Copy Markdown
Collaborator

@cgalvarino
#3884

Adds a back button to the large graph page. Takes you back to the "Last 24 hours" page. Things didn't fit well on mobile portrait mode so I pushed the graph heading all the way to the right and the back button all the way to the left.

Goal
Screenshot 2026-05-29 at 4 22 45 PM

Desktop
Screenshot 2026-05-29 at 4 22 08 PM

Mobile - landscape
Screenshot 2026-05-29 at 4 21 26 PM

Mobile - portrait
Screenshot 2026-05-29 at 4 20 50 PM

Comment thread src/Features/ERDDAP/Platform/Observations/BackToPlatformButton/index.tsx Outdated
@shindelr

Copy link
Copy Markdown
Collaborator Author

@abkfenris now with link!

Comment on lines +63 to +68
<div className="d-flex flex-row p-2 position-relative align-items-start justify-content-end justify-content-sm-center">
<BackToPlatformButton className="d-flex position-absolute start-0 ps-0 bg-white border-0" />
<h2 className="d-flex gap-2 align-items-center">
{ts.data_type.long_name} {depth} <Info timeSeries={[ts]} id={index} startDate={startDate} />
</h2>
</div>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that going to show up at every depth?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya, this doesn't need to get repeated.

Image

Especially when that might happen

Image

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good eye, it does. Probably prefer just one at the top then?

Comment on lines +63 to +68
<div className="d-flex flex-row p-2 position-relative align-items-start justify-content-end justify-content-sm-center">
<BackToPlatformButton className="d-flex position-absolute start-0 ps-0 bg-white border-0" />
<h2 className="d-flex gap-2 align-items-center">
{ts.data_type.long_name} {depth} <Info timeSeries={[ts]} id={index} startDate={startDate} />
</h2>
</div>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya, this doesn't need to get repeated.

Image

Especially when that might happen

Image

@cgalvarino

Copy link
Copy Markdown
Collaborator

Team, I feel like I need to speak up for the back buttons of the world. This "Back" button IMHO (and my unsolicited opinion) ain't a back button. If anything, it's redundant since it mimics a click on he Last 24 Hours button. And to add insult to injury, it highlights the beast.

Let's say your friends gave you this link cuz they were so impressed when they saw it at the DMAC, http://localhost:3000/platform/ca0101/observations/direction_of_sea_water_velocity.

You can't believe your luck! You're so impressed, that you click on the Back link to see what other awesome parameters be on the menu. And you are left w/ . . . nada.

Why is the internets always playing tricks on me?

@shindelr

shindelr commented May 29, 2026

Copy link
Copy Markdown
Collaborator Author

Well whether the back button is kept or not, I think it's in a better place now. Handled the long variable names eating the back button by stacking column on mobile regardless. Centering both the text and icon does seem to play oddly when the string is just the right length though.

Screenshot 2026-05-29 at 6 01 26 PM Screenshot 2026-05-29 at 6 01 54 PM Screenshot 2026-05-29 at 6 02 50 PM

No more back button on all graphs ^^^

@cgalvarino

Copy link
Copy Markdown
Collaborator

In spite of me being a Karen, if this is merge ready, what say ye?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants