Skip to content

Added Hexagon Hover functionality for Desktops and Mobile Touchscreens#149

Merged
maryharebear merged 1 commit intodevelopfrom
feat/hexagons-hover
Mar 26, 2021
Merged

Added Hexagon Hover functionality for Desktops and Mobile Touchscreens#149
maryharebear merged 1 commit intodevelopfrom
feat/hexagons-hover

Conversation

@trumanjchan
Copy link
Copy Markdown
Contributor

Responsive for Desktops from resolution width 800px or higher. Under 800px there is no hover functionality because the HackMerced roles are too long (mainly Marty's), meaning their fonts would have to shrink to unreadable sizes. I added the media query for mobile touchscreens too, but between 800px-1160px Marty's role, "Director of Content Creation" will shift down out of his hexagon. Hexagon hover looks clean on desktops at high resolutions though!

Proposed changes

Needed to spice up the HackMerced Hub with more animations. I thought having a hover-over-hexagons feature would look cool and allow people to know who does what in HackMerced.

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

Chrome - Windows 10:
image
Chrome - Windows 10 Mobile Touch:
image

Further comments

Maybe we should change Marty's title? It's really long and I had to go to lengths to try and fit it in his hexagon, which made it so I had to shift every other title as well. Maybe instead of having their full title in the hexagon, I can just make it say "Director", "Lead", "Mentor", "Engineering", "Design", or "Marketing".

Responsive for Desktops from resolution width 800px or higher. Under 800px there is no hover functionality because the HackMerced roles are too long (mainly Marty's), meaning their fonts would have to shrink to unreadable sizes. I added the media query for mobile touchscreens too, but between 800px-1160px Marty's role, "Director of Content Creation" will shift down out of his hexagon. Hexagon hover looks clean on desktops at high resolutions though!
@trumanjchan trumanjchan added the New Feature New feature label Mar 25, 2021
@trumanjchan trumanjchan self-assigned this Mar 25, 2021
@github-actions github-actions bot added the react label Mar 25, 2021
@maryharebear maryharebear merged commit 5e42430 into develop Mar 26, 2021
@delete-merged-branch delete-merged-branch bot deleted the feat/hexagons-hover branch March 26, 2021 01:59
adriandarian pushed a commit that referenced this pull request Oct 18, 2021
Added Hexagon Hover functionality for Desktops and Mobile Touchscreens
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants