Skip to content

Added navbar hover feature, & fixed breaklines width in hamburger navbar#161

Merged
trumanjchan merged 1 commit intodevelopfrom
feat/hover-animation
Apr 28, 2021
Merged

Added navbar hover feature, & fixed breaklines width in hamburger navbar#161
trumanjchan merged 1 commit intodevelopfrom
feat/hover-animation

Conversation

@trumanjchan
Copy link
Copy Markdown
Contributor

Proposed changes

Implemented hover feature animation for the navbar. Fixed breaklines having full width of the div by using margins as inner div padding (this is needed because it doesn't make sense to have a full width breakline under "Home"). Also, the navbar buttons' divs were tall for some reason so I chopped off the excess height on the bottoms. Now the div height is the height of the button name or toggle button.

Types of changes

What types of changes does your code introduce to HackMerced Hub?
Put an x in the boxes that apply

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

  • I have read the CONTRIBUTING doc
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • Any dependent changes have been merged and published in downstream modules

Responsiveness

Check off the different browsers and devices you have tested on. Note: testing includes Horizontal and Vertical alignments

Browsers

  • Chrome
  • Firefox
  • Edge
  • Safari
  • Brave
  • Opera

Devices

Phones

  • Moto G4
  • Galaxy S5
  • Pixel 2
  • Pixel 2 XL
  • iPhone 5/SE
  • iPhone 6/7/8
  • iPhone 6/7/8 Plus
  • iPhone X

Tablets

  • iPad
  • iPad Pro

Desktops

  • Windows 10
  • MacOSX
  • Ubuntu

Screenshots

After changes (Scaling button name animation):
image
After changes (Scaling button name animation & breaklines fix):
image
Before changing div height (this means the user can select the button by clicking inside the bottom of the div):
image
After changing div height:
image

Further comments

We can do a similar fix for the register button animation.

Implemented hover feature animation for the navbar. Fixed breaklines having full width of the div by using margins as inner div padding (this is needed because it doesn't make sense to have a full width breakline under "Home").
@trumanjchan trumanjchan added New Feature New feature Fix Fixing a known bug labels Apr 28, 2021
@trumanjchan trumanjchan self-assigned this Apr 28, 2021
@github-actions github-actions bot added the react label Apr 28, 2021
@trumanjchan trumanjchan merged commit 0156564 into develop Apr 28, 2021
@delete-merged-branch delete-merged-branch bot deleted the feat/hover-animation branch April 28, 2021 03:32
adriandarian pushed a commit that referenced this pull request Oct 18, 2021
Added navbar hover feature, & fixed breaklines width in hamburger navbar
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Fix Fixing a known bug New Feature New feature react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant