Problem/Motivation

Links and the page header in Vartheme BS5 are static. The new design calls for animated link interactions and a header that stays fixed to the top while scrolling.

Proposed resolution

Add link animations and a sticky header to Vartheme BS5 to match the new design.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes
  • ❌ Release varbase-11.0.0-alpha3, varbase_starter-1.0.0-alpha2, vartheme_bs5-5.0.0-alpha3

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • Links animate on interaction and the header sticks to the top of the page on scroll.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • feat: #3593396 Add link animations and sticky header

Issue fork vartheme_bs5-3593396

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

alamgir.hossain.cse created an issue. See original summary.

alamgir.hossain.cse opened merge request !169

alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Active » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Needs work

Better to split this issue to 2 issues

  • Add hover/focus/active Animations to links
  • Add a Sticky Header behavior
alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Needs work » Needs review
alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Needs review » Active
alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Active » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: alamgir.hossain.cse » Unassigned
Status: Needs review » Postponed (maintainer needs more info)

➖ UX/UI designer responsibilities
❌ Review with the product owner

Only asking to confirm before committing our changes

Is the sticky header the default behavior for the Varbase Demo?

When I navigate to https://www.figma.com/proto/RJkuWNHla1P8VYHa5z6dnL/VB---Approved-Stylesh...

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Postponed (maintainer needs more info) » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Needs work

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs work » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Title: Added Link Animations and Sticky Header » Add link animations and sticky header
Issue summary: View changes
Status: Needs review » Fixed
Issue tags: +varbase-11.0.0-alpha3, +varbase_starter-1.0.0-alpha2, +vartheme_bs5-5.0.0-alpha3

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: Unassigned » josebc
Status: Fixed » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: josebc » mohammed j. razem
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released varbase_starter-1.0.0-alpha2

rajab natshah’s picture

rajab natshah
he/him
commented 
Feature: Website Base Requirements - Default theme settings
      As a site visitor and a site administrator
      I want the default theme settings to work
      So that header behaviour can be configured per site.

  @check @local @development @staging @production
  Scenario: The default theme renders its main landmarks on the homepage
    Given I am an anonymous user
     When I go to the homepage
      And wait
     Then I see visible site header
      And I see visible main nav
      And I see visible main content
      And I see visible footer

  @check @local @development @staging @production
  Scenario: The sticky header is enabled by default on the homepage
    Given I am an anonymous user
     When I go to the homepage
      And wait
     Then I see visible site header
      And the "site header" should be sticky

  @check @local @development @staging @production
  Scenario: The header gains the scrolled state when the page is scrolled
    Given I am an anonymous user
     When I go to the homepage
      And wait
      And I scroll down 600
     Then the "site header" should have the "scrolled" class within 5 seconds

  @check @local @development @staging @production
  Scenario: The sticky header setting is available in the default theme settings
    Given I am a logged in user with the "webmaster" user
     When I go to the default theme settings page
      And wait
     Then I should see "Sticky header"

  @check @local @development @staging @production
  Scenario Outline: The sticky header stays sticky on a <device> screen
    Given I am an anonymous user
      And I set the viewport to the "<breakpoint>" breakpoint
     When I go to the homepage
      And wait
     Then I see visible site header
      And the "site header" should be sticky
      And I scroll down 600
      And the "site header" should have the "scrolled" class within 5 seconds
    Examples:
      | device  | breakpoint |
      | mobile  | xs         |
      | tablet  | md         |
      | desktop | xl         |

  @check @local @development
  Scenario: Disabling the sticky header setting removes the sticky header
    Given I am a logged in user with the "webmaster" user
      And I disable the sticky header theme setting
     When I go to the homepage
      And wait
     Then the "site header" should not be sticky
     When I enable the sticky header theme setting
      And I go to the homepage
      And wait
     Then I see visible site header
      And the "site header" should be sticky
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ UX/UI designer responsibilities

yes sticky header is the default behavior - on sticky add a bit of dropshadown

https://git.drupalcode.org/project/varbase_project/-/merge_requests/11

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released varbase-11.0.0-alpha3

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.