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.

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

UX: Navigation bar fixed #2176

Closed
wants to merge 2 commits into from
Closed

Conversation

saminarp
Copy link
Contributor

Description

This is my follow up PR from #2171 as I mistakenly force-pushed my commit.

With the following changes in client/app/components/Header/Header.scss and app/assets/stylesheets/static/static_content.scss, the navbar will be sticky.

I have added margin-top to the main content of the page as requested in #2171 (comment)

More Details

As. @julianguyen pointed out in #2171 the background color $black-80 The result will look like this. However, I haven't made this change yet and wanted to ask if this is the desired result. :) If so, please let me know and I will make the necessary changes.

CleanShot 2022-10-16 at 03 30 21@2x

Corresponding Issue

#2155


Reviewing this pull request? Check out our Code Review Practices guide if you haven't already!

Copy link
Member

@julianguyen julianguyen left a comment

Choose a reason for hiding this comment

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

Thanks for the updates 🎉

@@ -5,7 +5,7 @@
box-sizing: border-box;
padding: $size-40 34px;
scroll-behavior: smooth;
margin: 0 auto;
margin: 50px auto;
Copy link
Member

Choose a reason for hiding this comment

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

We'll want to apply similar logic in /app/assets/stylesheets/dashboard/dashboard_content.scss.

Or else this is happening on the signed in pages:

image

top: 0;
left: 0;
right: 0;
z-index: 1000;
Copy link
Member

Choose a reason for hiding this comment

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

It would be a better design to have this background only show up once the user starts scrolling in the page. We can do that by applying the transparent black background through React JS in /client/app/components/Header/index.jsx

@julianguyen
Copy link
Member

Any updates here?

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.

2 participants