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

taruntds's "Added "activePage" as a active class in navigation menu and web pages" #1354

Merged
merged 1 commit into from
Sep 24, 2018
Merged

taruntds's "Added "activePage" as a active class in navigation menu and web pages" #1354

merged 1 commit into from
Sep 24, 2018

Conversation

Ubersmake
Copy link
Contributor

What?

A new PR for #1335

activePage is a active class which will be applied when any page is active. For example. If you visit any category page then this "activePage" class will be activated and that particular category name will be highlighted in different color.

The active page has the same styling as a navigation link on hover.

Tickets / Documentation

#1335

Screenshots

Category Page (Bath):

Before:
screen shot 2018-09-21 at 1 15 08 pm

After:
screen shot 2018-09-21 at 1 17 05 pm

Narrow Category Page (Publications):

Before:
screen shot 2018-09-21 at 1 36 45 pm

After:
screen shot 2018-09-21 at 1 33 46 pm

Nested Category Page (Shop All > Bath):

Before:
screen shot 2018-09-21 at 1 21 35 pm

After:
screen shot 2018-09-21 at 1 22 07 pm

Narrow Nested Category Page (Shop All > Bath):

Before:
screen shot 2018-09-21 at 1 36 37 pm

After:
screen shot 2018-09-21 at 1 33 39 pm

@bigbot
Copy link

bigbot commented Sep 21, 2018

Autotagging @bigcommerce/storefront-team @davidchin

@Ubersmake Ubersmake requested a review from a user September 21, 2018 20:52
Copy link

@davidwrpayne davidwrpayne left a comment

Choose a reason for hiding this comment

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

Seems fine to me. Might be good to get one more set of eyes

@@ -16,7 +16,7 @@
{{#unless theme_settings.hide_content_navigation}}
{{#each pages}}
<li class="navPages-item navPages-item-page">
<a class="navPages-action" href="{{url}}">{{name}}</a>
<a class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}" href="{{url}}">{{name}}</a>
Copy link
Contributor

Choose a reason for hiding this comment

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

why this check ?

Copy link
Contributor Author

@Ubersmake Ubersmake Sep 24, 2018

Choose a reason for hiding this comment

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

This is for the parent-page scenario. If a page is nested in a tree this will highlight both the current page and its parent, like in: https://user-images.githubusercontent.com/1546172/45905025-c491ab80-bda3-11e8-8302-fab27866a954.png , where the page is "Bath" but "Bath" is in the "Shop All" category.

@Ubersmake Ubersmake merged commit dae209e into bigcommerce:master Sep 24, 2018
@Ubersmake Ubersmake deleted the taruntds-activepage branch September 24, 2018 17:43
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.

None yet

5 participants