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

fix: Correct Navbar Height and Spacing Issues #549

Merged
merged 2 commits into from
Oct 18, 2023

Conversation

LakshanRukantha
Copy link
Contributor

Description

This pull request addresses the concerns outlined in Issue #548, focusing on enhancing the user interface (UI) of the website's navbar (header). The primary issues tackled in this PR are the excessive navbar height and improper spacing, both of which contribute to an undesirable user experience.

Fixes #548

Changes

  • Reduced Navbar Height
  • Optimized Spacing

Previews

Before:
before

After:
after

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • My changes generate no new warnings
  • Open Source Program names(Hacktoberfest)

Copy link
Member

@tombruijn tombruijn left a comment

Choose a reason for hiding this comment

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

Looks good! Can you remove the unnecessary padding line?

css/style.css Outdated
@@ -134,6 +139,15 @@ footer p:last-child {
margin-bottom: 0;
}

.nav {
margin-bottom: 0;
padding: 20px auto;
Copy link
Member

Choose a reason for hiding this comment

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

For me, Firefox gives an "Invalid property value" error, because padding can't have an auto value.

Suggested change
padding: 20px auto;

Removing it also works for me.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure.

Comment on lines +259 to +267
background-image: url("/images/icon-text-editor.png");
}

i.icon-prompt {
background-image: url('/images/icon-prompt.png');
background-image: url("/images/icon-prompt.png");
}

i.icon-browser {
background-image: url('/images/icon-browser.png');
background-image: url("/images/icon-browser.png");
Copy link
Member

Choose a reason for hiding this comment

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

Feedback for next time: Keep the changes limited to necessary changes so it's easier to review and we don't have to check code style changes to see if they impact the design.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I greatly appreciate your feedback. I'll make sure to keep my changes more focused on my future contributions.

@LakshanRukantha
Copy link
Contributor Author

@tombruijn Thank you for your valuable suggestions. I have made the recommended changes in the latest commit. When you have a moment, could you please re-review the updated code? Your feedback is greatly appreciated.

@tombruijn tombruijn merged commit e840579 into railsgirls:main Oct 18, 2023
1 check passed
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.

Enhancement - Improve Website Navbar (Header) User Interface
2 participants