Problem/Motivation

When the content region of the navigation is bigger than the available space a shadow to the navigation footer is added to help understand the missing items are scrolling below that region and that there is missing content.

But if an item is active or being hovered right under that shadow, the shadow disappears:

The shadow should still be visible when hovering items in the content.

Proposed resolution

Remaining tasks

User interface changes

CommentFileSizeAuthor
#36 desktop with shadow.png31.03 KBkanchan bhogade
#36 Mobile with shadow.png37.44 KBkanchan bhogade
#34 Mobile_shadow.png46.77 KBahsannazir
#34 Desktop_shadow.png90.9 KBahsannazir
#26 ff8c5086b93870be69d7036869ebb883.gif216.2 KBfinnsky
#23 new-ui-changes-onhover.gif8.58 MBchetansonawane
#18 hover-bottom-border-disappears.gif10.55 MBprashant.c
#17 shadow.gif736.14 KBfinnsky
#16 footer-shadow-3.png23.26 KBpragati_kanade
#16 footer-shadow-2.png40.51 KBpragati_kanade
#16 footer-shadow-1.png37.73 KBpragati_kanade
#11 Screenshot from 2023-12-11 15-48-04.png366.8 KBpragati_kanade
#7 screen-capture (24).gif4.55 MBkostyashupenko
#7 screen-capture (23).gif3.45 MBkostyashupenko
shadow-disappears.gif101.17 KBckrina

Issue fork drupal-3405006

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:

Issue fork navigation-3405006

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

ckrina created an issue. See original summary.

ckrina credited q0rban.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Crediting @q0rban for reporting it.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko

kostyashupenko opened merge request !143

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
StatusFileSize
new screen-capture (23).gif3.45 MB
new screen-capture (24).gif4.55 MB

It was a bit tricky, but working now and working even better than before from my pov.

Previous shadows were added using CSS gradients technique. However we can't use this method, since inner elements in the tree contains background colors (on hover, active, etc states) which are overlapping parent gradient (that's why shadow disappeared @ckrina on hovering).

Now shadows are controlled by javascript (which is OK i think, and there will be no shadows at all if js is disabled in browser).

Mobile behavior:
test

Desktop behavior:
test

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
Status: Active » Needs review

ckrina changed the visibility of the branch 3405006-the-footer-shadow to hidden.

ckrina changed the visibility of the branch 3405006-the-footer-shadow to active.

pragati_kanade’s picture

pragati_kanade commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot from 2023-12-11 15-48-04.png366.8 KB

I have reviewed #6 and it is working fine as per the proposed solution so I am moving it to RTBC.
Thanks.

finnsky’s picture

finnsky commented
Status: Reviewed & tested by the community » Needs work

Sorry, i didn't change status after MR discussion.
I still think that we can move it outside of sidebar.

finnsky’s picture

finnsky commented
Assigned: Unassigned » finnsky

finnsky opened merge request !148

finnsky’s picture

finnsky commented
Assigned: finnsky » Unassigned
Status: Needs work » Needs review

Rerolled previously added script here. It seems me more delicate approach. Please review.

pragati_kanade’s picture

pragati_kanade commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new footer-shadow-1.png37.73 KB
new footer-shadow-2.png40.51 KB
new footer-shadow-3.png23.26 KB

Hi @finnsky I have review this MR and It looks good to me. Footer shadow is also not getting disappear after hover on buttons.
Hence changing status to "RTBC".
Thanks.

finnsky’s picture

finnsky commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new shadow.gif736.14 KB

Sorry, i retested my work. Seems i forgot to manage header shadow in expanded state. Sending back to NW.

prashant.c’s picture

prashant.c
he/him
Primary language English
Location Dharamshala
commented
StatusFileSize
new hover-bottom-border-disappears.gif10.55 MB

@finnsky

I am not sure, this issue is related to this or not. On hover of last menu item, the bottom border disappears/overflows.
Hover bottom border disappears
Thanks!

KeyboardCowboy’s picture

KeyboardCowboy
Primary language English
Location Denver, CO, USA
commented
Priority: Normal » Minor
chetansonawane’s picture

chetansonawane
he/him
Location Gujarat, India 🇮🇳
commented
Assigned: Unassigned » chetansonawane

chetansonawane changed the visibility of the branch single-overflow-script-3405006 to hidden.

chetansonawane changed the visibility of the branch single-overflow-script-3405006 to active.

chetansonawane’s picture

chetansonawane
he/him
Location Gujarat, India 🇮🇳
commented
Assigned: chetansonawane » Unassigned
Status: Needs work » Reviewed & tested by the community
StatusFileSize
new new-ui-changes-onhover.gif8.58 MB

@finnsky,

I think the whole UI behavior is changed now, I can not see the dropdown functionality while hovering on the menu item, on hover of the first level menu it expand right side and on hover of second level menu there is dropdown, but UI is different, so it is working fine, we can close this issue.

finnsky’s picture

finnsky commented
Status: Reviewed & tested by the community » Needs work

@chetansonawane thank you for testing.

I think it should be rebased or even recreated first.
Problem still present in current 1.x

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Project: Navigation » Drupal core
Version: 1.x-dev » 11.x-dev
Component: Code » navigation.module
finnsky’s picture

finnsky commented
StatusFileSize
new ff8c5086b93870be69d7036869ebb883.gif216.2 KB

Here also we need to fix this one.

shadow

I suggest to add to resize observer for that shadows.

Gauravvvv made their first commit to this issue’s fork.

Gauravvvv changed the visibility of the branch single-overflow-script-3405006 to hidden.

Gauravvvv opened merge request !8106

Gauravvvv changed the visibility of the branch 3405006-the-footer-shadow to hidden.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
finnsky’s picture

finnsky commented
Status: Needs review » Needs work

Thank you for backporting this.

Some notes.

Since that original script was written lot of things were changed.
We need to rework at and adapt to current logic.

1. I see shadow on mobile but not on desktop
2. I see broken header and wrong padding relative to footer.
https://gyazo.com/f08ad11ee5f5d21f4290af428d220d72

3. I see some flickering on popover open
https://gyazo.com/b80215700f117abb7350000800758d08
probably not related to this fix but better to check

ahsannazir made their first commit to this issue’s fork.

ahsannazir’s picture

ahsannazir commented
StatusFileSize
new Desktop_shadow.png90.9 KB
new Mobile_shadow.png46.77 KB

The shadow is shown both on Desktop & Mobile when data-detected-y-overflow="true"

The 3rd point mentioned in #32 about flickering needs to be investigated more and fixed accordingly.

ahsannazir’s picture

ahsannazir commented
Status: Needs work » Needs review
kanchan bhogade’s picture

kanchan bhogade commented
StatusFileSize
new Mobile with shadow.png37.44 KB
new desktop with shadow.png31.03 KB

Hi
I've tested MR 8106 on Drupal 11
The MR is applied cleanly...

Checked for the #32 1 and 2 point
1. Added shadow on desktop
2. Added shadow on Mobile for header

Attaching Screenshots

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

Issue summary is not complete, proposed solution is empty and User Interface section is empty and this appears to be a UI fix.

Have not reviewed

ahsannazir’s picture

ahsannazir commented

@gauravvvv Can you please add/update the issue summary with proposed solution

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.