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

Doc Site: Documentation Mega Menu and main menu updates #46

Closed
9 tasks done
rosibaj opened this issue Jul 30, 2020 · 14 comments
Closed
9 tasks done

Doc Site: Documentation Mega Menu and main menu updates #46

rosibaj opened this issue Jul 30, 2020 · 14 comments
Assignees
@samrichca
Labels
blocked blocked canarie SP:2
Milestone
Canarie Sprint 8

Comments

@rosibaj
Copy link
Contributor

rosibaj commented Jul 30, 2020 •
edited by samrichca

Zeplin link https://zpl.io/VOOk4o8
Mega Menu
Work with the Gatsby template to create the mega menu when user clicks on the Documentation tab on the Landing page.

  • The mega menu should show up, when the user clicks on the Documentation.
  • Clicking on the documentation tab again and anywhere else on the screen should be able to hide the mega menu.(see current product section mega menu on overture.bio for behaviour)
  • Implement the mega menu item hover state in both mega menus (Products and Documentation)
  • Implement the dropshadow and bottom border in both mega menus (Products and Documentation)

2020-08-10_12-02-13

Updates to the main header bar:

  • Font size has changed to 16px
  • hover state now: dark blue text with light grey background and active state is magenta text with light grey background
  • Slack and GItHub buttons have gotten a bit smaller and using the same style. To be clear, we labeled the second button "Overture GitHub"

2020-07-31_1030

Update to the Footer:

  • Add the documentation link to the footer. If there isn't room to split the "Other" category into two columns, just leave as one.
  • Change title of this section from "About" to "Other"

2020-07-31_1106
@gokul472
Copy link

@kcullion - pls add the zeplin link when ready.

@kcullion kcullion changed the title Documentation Mega Menu Links Documentation Mega Menu and main menu updates Jul 31, 2020
@gokul472 gokul472 mentioned this issue Aug 10, 2020
Closed
2 tasks
@gokul472 gokul472 added the SP:2 label Aug 20, 2020
@gokul472 gokul472 changed the title Documentation Mega Menu and main menu updates Doc Site: Documentation Mega Menu and main menu updates Aug 20, 2020
@samrichca
Copy link
Member

work remaining: some CSS changes

@samrichca samrichca mentioned this issue Sep 17, 2020
Merged
@samrichca
Copy link
Member

https://5f63a9ed455465299805f4fe--overture.netlify.app

@samrichca
Copy link
Member

overture-stack/website#77

@b-f-chan b-f-chan added the blocked blocked label Oct 1, 2020
@b-f-chan
Copy link

b-f-chan commented Oct 1, 2020 •
edited

Blocked waiting on #84, want to test with feature flag. @samrichca new netlify also required as previous one has expired. Will carryover to Sprint 7.

@b-f-chan
Copy link

Netlify still expired, requesting new link from @samrichca again

@b-f-chan b-f-chan mentioned this issue Oct 15, 2020
Closed
@b-f-chan
Copy link

Confirmed with @samrichca, now that #84 is verified and closed, a new merged netlify can/will be provided

@samrichca
Copy link
Member

documentation is hidden, styling changes are included:

https://5f886706d161ad467a013ef0--overture.netlify.app/

documentation menu is visible in header and footer:

https://5f886764bd49c5012ac63ba5--overture.netlify.app/

@b-f-chan
Copy link

b-f-chan commented Oct 15, 2020 •
edited

Tested at netlify links above.

Disabled Doc Menu:

  • Feature flag works correctly, Doc menu NOT visible or accessible
  • New active state displays correctly
  • New hover state displays correctly
  • Menu drop-shadow + bottom border displays correctly
  • Menu titles items font size correctly reduced to 16 px
  • Menu content tags/labels (e.g. Generate & Upload, Access & Download, etc) correctly widened with more spacing for text
  • "Join us on Slack", "Overture GitHub" correct styling and font ("Get Started" now removed)
  • "Other" section title correctly displays in footer
  • "Documentation" link correctly NOT displayed in footer
  • Issue 1: Footer links font-weight not the same as styled in the Zeplin provided
  • Issue 2: (Case Studies, Services) in the wrong column, should be swapped with (About Us, Team Blog, Contact)

image.png

Enabled Doc Menu:

  • Feature flag works correctly, Doc menu is visible & accessible
  • New active state displays correctly
  • New hover state displays correctly
  • Menu drop-shadow + bottom border displays correctly
  • Menu titles items font size correctly reduced to 16 px
  • Menu content tags/labels (e.g. Generate & Upload, Access & Download, etc) correctly widened with more spacing for text
  • "Join us on Slack", "Overture GitHub" correct styling and font ("Get Started" now removed)
  • "Other" section title correctly displays in footer
  • "Documentation" link correctly displayed in footer
  • (Documentation, Case Studies, Services) and (About Us, Team Blog, Contact) in correct columns
  • Issue 1: Footer links font-weight not the same as styled in the Zeplin provided (same as disabled doc menu netlify link, see above)

@b-f-chan b-f-chan mentioned this issue Oct 15, 2020
Closed
@b-f-chan
Copy link

Need to close Sprint 7 so moving to Sprint 8. Can close and open new ticket for fixes if required @samrichca, but since this didn't finish yet do not want to lose track. Let me know your preference.

@b-f-chan b-f-chan removed this from the Canarie Sprint 7 milestone Oct 16, 2020
@b-f-chan b-f-chan added this to the [FUTURE] Canarie Sprint 8 milestone Oct 16, 2020
@samrichca
Copy link
Member

from Kim

  1. Let's make the font consistent for the mega-menu items and footer items: the weight you have in the megamenu of this link you sent me looks great - easier to read than the lighter footer weight. So please use the bolder weight in the footer
  2. For the order of the other links, I think my mock isn't quite right. Let's go with the order we have in the header menu

left
Documentation
Case Studies
About Us
right
Services
Contact
Team Blog

@samrichca
Copy link
Member

with documentation link

image.png

without
image.png

@samrichca
Copy link
Member

no docs
https://5f8f485c56e4490bade9fa83--overture.netlify.app/

with docs
https://5f8f482c56e4490ce0e9f79c--overture.netlify.app/

@b-f-chan
Copy link

Tested at netlify links above:

No Docs:

  • "Documentation" correctly hidden from mega menu and footer
  • Heavier font weight used in both mega menu and footer
  • Order of items in two columns under "Other" in footer are in correct order

With Docs:

  • "Documentation" correctly displayed in mega menu and footer
  • Heavier font weight used in both mega menu and footer
  • Order of items in two columns under "Other" in footer are in correct order

QA complete, ready to close

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@samrichca samrichca

Labels
blocked blocked canarie SP:2
Projects
None yet
Milestone
Canarie Sprint 8
Development

No branches or pull requests
4 participants
@samrichca @rosibaj @b-f-chan @gokul472