The footer shadow disappears when a button is hovered

Created on 29 November 2023, about 1 year ago
Updated 16 August 2024, 4 months ago

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

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Navigation 

Last updated about 2 hours ago

No maintainer
Created by

🇪🇸Spain ckrina Barcelona

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Pipeline finished with Skipped
    over 1 year ago
    #17558
  • Pipeline finished with Skipped
    about 1 year ago
    #24656
  • Pipeline finished with Failed
    about 1 year ago
    Total: 330s
    #48039
  • Issue created by @ckrina
  • 🇺🇸United States q0rban Atlanta, GA
  • 🇪🇸Spain ckrina Barcelona

    Crediting @q0rban for reporting it.

  • Assigned to kostyashupenko
  • 🇷🇺Russia kostyashupenko Omsk

    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:

    Desktop behavior:

  • Issue was unassigned.
  • Status changed to Needs review about 1 year ago
  • Pipeline finished with Failed
    about 1 year ago
    Total: 1238s
    #60057
  • 🇪🇸Spain ckrina Barcelona

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

  • 🇪🇸Spain ckrina Barcelona

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

  • Status changed to RTBC about 1 year ago
  • 🇮🇳India pragati_kanade Pune

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

  • Status changed to Needs work about 1 year ago
  • 🇷🇸Serbia finnsky

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

  • Assigned to finnsky
  • Issue was unassigned.
  • Status changed to Needs review about 1 year ago
  • 🇷🇸Serbia finnsky

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

  • Status changed to RTBC about 1 year ago
  • 🇮🇳India pragati_kanade Pune

    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.

  • Status changed to Needs work about 1 year ago
  • 🇷🇸Serbia finnsky

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

  • 🇮🇳India prashant.c Dharamshala

    @finnsky

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

    Thanks!

  • Pipeline finished with Success
    10 months ago
    Total: 2180s
    #110634
  • Pipeline finished with Success
    10 months ago
    Total: 542s
    #111443
  • Pipeline finished with Success
    10 months ago
    Total: 2707s
    #113567
  • Pipeline finished with Success
    10 months ago
    Total: 1192s
    #113874
  • Pipeline finished with Success
    10 months ago
    Total: 35s
    #113951
  • Pipeline finished with Success
    10 months ago
    Total: 34s
    #114639
  • Pipeline finished with Success
    9 months ago
    Total: 225s
    #116024
  • Pipeline finished with Success
    9 months ago
    Total: 1016s
    #117362
  • Pipeline finished with Skipped
    9 months ago
    #117411
  • Pipeline finished with Canceled
    9 months ago
    Total: 780s
    #120189
  • Pipeline finished with Failed
    9 months ago
    Total: 958s
    #120214
  • Pipeline finished with Success
    9 months ago
    Total: 135s
    #121846
  • Pipeline finished with Success
    9 months ago
    Total: 167s
    #121852
  • Pipeline finished with Success
    9 months ago
    Total: 199s
    #121858
  • Pipeline finished with Success
    9 months ago
    Total: 167s
    #121887
  • Pipeline finished with Failed
    9 months ago
    #121890
  • Pipeline finished with Failed
    9 months ago
    Total: 168s
    #121893
  • Pipeline finished with Failed
    9 months ago
    Total: 136s
    #121904
  • Pipeline finished with Success
    9 months ago
    Total: 1135s
    #122075
  • Pipeline finished with Success
    9 months ago
    #122129
  • Pipeline finished with Success
    9 months ago
    Total: 170s
    #131066
  • Pipeline finished with Success
    9 months ago
    Total: 201s
    #131067
  • 🇺🇸United States KeyboardCowboy Denver, CO, USA
  • Assigned to chetansonawane
  • 🇮🇳India chetansonawane Gujarat

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

  • 🇮🇳India chetansonawane Gujarat

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

  • Issue was unassigned.
  • Status changed to RTBC 8 months ago
  • 🇮🇳India chetansonawane Gujarat

    @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 left 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.

  • Status changed to Needs work 8 months ago
  • 🇷🇸Serbia finnsky

    @chetansonawane thank you for testing.

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

  • 🇪🇸Spain ckrina Barcelona
  • 🇷🇸Serbia finnsky

    Here also we need to fix this one.

    I suggest to add to resize observer for that shadows.

  • First commit to issue fork.
  • 🇮🇳India gauravvvv Delhi, India

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

  • 🇮🇳India gauravvvv Delhi, India

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

  • Status changed to Needs review 7 months ago
  • 🇮🇳India gauravvvv Delhi, India
  • Pipeline finished with Success
    7 months ago
    Total: 669s
    #174770
  • Status changed to Needs work 7 months ago
  • 🇷🇸Serbia finnsky

    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

  • Pipeline finished with Success
    7 months ago
    #180346
  • First commit to issue fork.
  • Pipeline finished with Failed
    7 months ago
    Total: 169s
    #184677
  • Pipeline finished with Success
    7 months ago
    Total: 540s
    #184705
  • Pipeline finished with Success
    7 months ago
    Total: 606s
    #184912
  • 🇮🇳India ahsannazir

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

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

  • Pipeline finished with Success
    4 months ago
    Total: 458s
    #248654
  • Status changed to Needs review 4 months ago
  • 🇮🇳India Kanchan Bhogade

    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

  • Status changed to Needs work 4 months ago
  • 🇺🇸United States smustgrave

    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

  • 🇮🇳India ahsannazir

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

Production build 0.71.5 2024