Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Keep the header sticky on the mission page #1072

Merged
merged 2 commits into from
Nov 13, 2023
Merged

Keep the header sticky on the mission page #1072

merged 2 commits into from
Nov 13, 2023

Conversation

andchiind
Copy link
Contributor

Closes #901

@andchiind andchiind self-assigned this Oct 18, 2023
@andchiind andchiind added improvement Improvement to existing functionality frontend Frontend related functionality labels Oct 18, 2023
mrica-equinor
mrica-equinor approved these changes Oct 19, 2023
View reviewed changes
Copy link
Contributor

@mrica-equinor mrica-equinor left a comment

Choose a reason for hiding this comment

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

LGTM :)

prasm313
prasm313 reviewed Oct 26, 2023
View reviewed changes
frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -9,10 +9,17 @@ import { useLanguageContext, TranslateTextWithContext } from 'components/Context
import { StatusReason } from '../StatusReason'
import { MissionRestartButton } from 'components/Pages/FrontPage/MissionOverview/MissionRestartButton'

const HeaderSection = styled.div`
const HeaderSection = styled(Card)`
Copy link
Contributor

@prasm313 prasm313 Oct 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I would prefer if only the title and buttons were sticky. When status, start date, start time etc. are visible it can be confusing when the mission has a lot of tags.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a bit difficult since we can't actually achieve this without moving the title out of the header. The CSS sticky feature only works within the parent component. To have something stay the same position on the screen regardless of its context we need to use "fixed" positioning which does not allow us to only start moving it when we scroll down a certain amount

@andchiind andchiind force-pushed the 901-fixed-position branch 4 times, most recently from bba307e to eb982a8 Compare November 10, 2023 14:41
mrica-equinor
mrica-equinor approved these changes Nov 13, 2023
View reviewed changes
Copy link
Contributor

@mrica-equinor mrica-equinor left a comment

Choose a reason for hiding this comment

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

LGTM :)

@andchiind andchiind merged commit 5e2102d into equinor:main Nov 13, 2023
6 checks passed
@andchiind andchiind deleted the 901-fixed-position branch November 13, 2023 15:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@prasm313 prasm313 prasm313 left review comments

@Eddasol Eddasol Eddasol left review comments

@mrica-equinor mrica-equinor mrica-equinor approved these changes

Assignees

@andchiind andchiind

Labels
frontend Frontend related functionality improvement Improvement to existing functionality
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Consider to place pause and stop button in fixed position
4 participants
@andchiind @Eddasol @mrica-equinor @prasm313