Problem/Motivation

Gins secondary toolbar overlaps Oliveros site-header.

Open site-header:

Closed site-header:

Steps to reproduce

  1. install Drupal 10 standard
  2. install Gin as admin theme
  3. install Gin Toolbar
  4. navigate to /
  5. scroll page down

Proposed resolution

Add attribute data-offset-top to <div class="gin-secondary-toolbar gin-secondary-toolbar--frontend"> in toolbar.html.twig

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#6 olivero-site-header-open-with-data-offset-top-horizontal.PNG52.29 KBluenemann
#5 olivero-site-header-open-with-data-offset-top.PNG39.97 KBluenemann
olivero-site-header-open.PNG26.9 KBluenemann
olivero-site-header-closed.PNG10.22 KBluenemann

Issue fork gin_toolbar-3336972

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

luenemann created an issue. See original summary.

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Title: Oliveros header is hidden by Gins secondary toolbar when after scroll » Oliveros header is hidden by Gins secondary toolbar after scroll
luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Issue summary: View changes

luenemann opened merge request !23

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Status: Active » Needs review
StatusFileSize
new olivero-site-header-open-with-data-offset-top.PNG39.97 KB

Screenshot of proposed solution:

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Status: Needs review » Needs work
StatusFileSize
new olivero-site-header-open-with-data-offset-top-horizontal.PNG52.29 KB

It's not perfect for the horizontal toolbar:

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Status: Needs work » Needs review

Add attribute data-offset-top only for the vertical toolbar layout.

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Issue summary: View changes

I didn't test on Drupal 9, only Drupal 10.

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Title: Oliveros header is hidden by Gins secondary toolbar after scroll » D10 Oliveros header is hidden by Gins secondary toolbar after scroll

Cannot reproduce on D9.

Relevant changes made in #3277809: Use Drupal.displace()'s new CSS variables to place Olivero's fixed header, maybe #3291729: Refactor Olivero styles to use new --drupal-displace variables and ensure that toolbar/buttons are always visible.

So Olivero D10 changed header positioning to use displace instead of fixed toolbar height values. Maybe worth a CR. But the Drupal toolbar had data-offset-top attribute before. Maybe gin_toolbar should have used it before.

hudri’s picture

hudri
Primary language German
Location Austria
commented

FYI: Gin has a couple of CSS variables, which can be used by frontend themes to offset whatever is sticky in their own theme:

    --gin-toolbar-secondary-height
    --gin-icon-size-toolbar
    --gin-scroll-offset
    --gin-toolbar-y-offset
    --gin-toolbar-x-offset
    --gin-sticky-offset
saschaeggi’s picture

saschaeggi
he/him
commented
Status: Needs review » Closed (outdated)

I guess this is outdated as I couldn't reproduce it with Gin RC2.

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented
Status: Closed (outdated) » Needs review

I've checked with

  1. Drupal 10
  2. Gin 8.x-3.0-rc2
  3. Gin Toolbar 8.x-1.0-rc1

Still reproduceable.

In Drupal 9 it's not a problem, only Drupal 10. Didn't check Drupal 10.1.x

luenemann’s picture

luenemann
Primary language German
Location Südbaden, Germany
commented

Reproduced with Drupal 10.1.x-dev.

@hudri regarding #10: I think this is not about a custom theme. I would like gin_toolbar to play nice with Drupals default theme.

Olivero changed it's behavior in Drupal 10, see Slack message by @mherchel:

Is that Drupal 9 or 10? Within D10, Olivero uses the new custom CSS properties to place the header. Within D9, we only check for the CSS classes added by the toolbar

saschaeggi’s picture

saschaeggi
he/him
commented

  • saschaeggi committed 6cbca4ff on 8.x-1.x authored by luenemann 
    Issue #3336972: Oliveros header is hidden by Gins secondary toolbar...
saschaeggi’s picture

saschaeggi
he/him
commented
Status: Needs review » Fixed

Corresponding integration in Gin -> #3371767: Update Drupal.displace when vertical toolbar changes

saschaeggi’s picture

saschaeggi
he/him
commented
Related issues: +#3371767: Update Drupal.displace when vertical toolbar changes

Status: Fixed » Closed (fixed)

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