Problem/Motivation

Need a global header that looks similar to Figma and new.drupal.org/home

Steps to reproduce

Proposed resolution

Default content has been add via:

#3510426: Create SDDS global header config

To get default content:

https://www.drupal.org/community-initiatives/starshot-demo-design-system...

1. Install SDDS as usual
2. Use drush to run the recipes (see README.md as well)

then style :)

Remaining tasks

  • Set up local with default content
  • Add/update css etc
  • Review/test/commit

User interface changes

The user will see the header in XB that looks nice :)

API changes

Data model changes

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:

Comments

kristen pol created an issue. See original summary.

kristen pol’s picture

kristen pol’s picture

Assigned: alan.cole » kristen pol
Status: Active » Needs review
kristen pol’s picture

I have class today so I won't be able to test this until tonight.

If someone else wants to test in the meantime, go for it.

heyyo’s picture

StatusFileSize
new384.36 KB
new766.9 KB

I tried to test it. I'm not sure how everything should work.

  1. One new bug, adding an image for Hero , and the publishing the page, the image disappear, and we have error message inside the settings of this SDC. See screenshot
  2. In the above section, I added the new SDC Header Panel, in the fist column I tried to add branding block, but it's not present, not sure how to make it available.
  3. The navigation block is available but doesn't show anything once included. Not sure what's need to be done to make it work
  4. Small issue button tertiary is not right color
  5. Some images have wrong path. See screenshot

Here what I achieved so far Hero styled with new above section

Missing images

kristen pol’s picture

I recorded my testing of the header and of global regions: https://youtu.be/pF6F523Jieg

I'm not loving the UX of the global regions, but I think that's a known thing, so maybe it'll be different at some point.

I'm not sure it's good to build the header into the hero, because only the home page will have that particular hero and not the other pages.

If we build that bar separately (not in the hero) and put it into the header region then it would be the same across all pages.

But then it wouldn't look integrated with the hero, and a hero may or may not be on other pages and, if it is, it will be different content.

I'm not sure what the best UX is for this.

Could this instead be a variation of the container rather than being its own "header panel" component? At least then, we don't have a very special purpose component. Not sure.

I'll see if others have some thoughts.

gábor hojtsy’s picture

I agree the UX is confusing of empty regions not being exposed in XB, needing to place stuff in the content and then moving it. After that though double-clicking on/into the region makes it possible to adjust it, which is for me at least natural. The initial part of how one tries to use it is confusing.

I think #3512060: Too many global regions in SDDS must be solved before this issue or as part of this issue first because otherwise you don't have a clean region to place the header onto. Otherwise I don't think this should be help up in trying to get it perfectly blend in with the hero/design at all :)

kristen pol’s picture

The regions are reduced in this issue’s MR but I didn’t include the header region because I had my unstyled blocks in there. Even disabled blocks will show up in XB.

I made an issue for me to remove those blocks from block placement so it’s not additionally confusing things. I’ll try to do soon.

kristen pol’s picture

kristen pol’s picture

StatusFileSize
new57.78 KB

Removed some of the main menu links to reduce wrapping issues so it will look more like:

Drupal header menu with four links and drupal log and button

kristen pol’s picture

We're going to move from the standalone MR into an issue MR so non-maintainers can collaborate.

kristen pol’s picture

When splitting up the menus into starshot-specific ones, I must have missed some config as I get errors sometimes... I'll try to figure it out but am off to class for a few hours soon :/

kristen pol’s picture

Assigned: kristen pol » Unassigned

I'll try with a fresh install later as my local db might be a bit borked now

I'll be out of commission until tonight, so unassigning in case someone can pick this up.

kristen pol’s picture

Here's a video of it... not sure why the link styling disappeared after switching menus:

https://youtu.be/B_P-8bzG2cM

If someone can look at that while I'm out, that would be great.

kristen pol’s picture

Oh… or probably because it’s not inside the hero

kristen pol’s picture

Merged MR and we'll do another MR to clean up some styling things.

kristen pol’s picture

Status: Needs review » Fixed

Some generic styling to support footer and minor header tweaks happened in:

#3510427: Add SDDS global footer styling

https://youtu.be/V3JbUZ7_mHc

These changes were merged.

We probably want to move away from a specialized header component and move the styling into some of the generic components (e.g. flexible slot and or columns)

To avoid confusion, I'll mark this one as fixed and we can create a follow up issue for that.

kristen pol’s picture

Status: Fixed » Closed (fixed)

Thanks, everyone!

kristen pol’s picture

kristen pol’s picture

kristen pol’s picture