From 1470360e7c64d5d3f6a22bd1a4cddec6df5a5926 Mon Sep 17 00:00:00 2001 From: Ian Wienand Date: Tue, 13 Sep 2022 10:05:00 +1000 Subject: web: move navbar to tertiary This was suggested and written by Joachim Schuler in [1]. It moves the top navbar as a "tertiary" option to the page header. This bar is always visible and doesn't roll-up into the "top" area. This means we can drop the more complex grid layout that is trying to keep this bar always visible for some much more simple styling. As this moves the navbar location the link matching is updated to find new elements. [1] https://github.com/patternfly/patternfly-react/issues/7960#issuecomment-1244017295 Change-Id: I4a61a1e246ca4fe0d96f630a06be7f0264782723 --- web/src/index.css | 30 +++++++++--------------------- 1 file changed, 9 insertions(+), 21 deletions(-) (limited to 'web/src/index.css') diff --git a/web/src/index.css b/web/src/index.css index d5b9a854f..da74a4a24 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -30,6 +30,15 @@ a.refresh { height: 40px; } +.zuul-page .pf-c-page__header { + min-height: 0; +} + +.zuul-page .pf-c-page__main-nav { + background-color: var(--pf-global--BackgroundColor--dark-300); + padding-top: 0; +} + .zuul-select-tz { /* That's the color PF4 uses for the dropdown items in the navbar */ color: var(--pf-global--Color--dark-100); @@ -429,27 +438,6 @@ details.foldable[open] summary::before { content: "less"; } -/* Overwrite PF4 navbar rules to enforce the 'lg' layout of the navbar also for - 'xl' sized screens. This will keep the navbar stacked (like it was in Zuul - before) and prevent PF4 to put all elements in a single line with horizontal - scrolling (which would look something like: - ZUUL | < Status Projects Jobs Labels No... > | API Documentation Tenant */ -@media screen and (min-width: 1200px) { - .pf-c-page__header-nav { - grid-column: 1/-1; - grid-row: 2/3; - } - - .pf-c-page { - --pf-c-page__header-nav--PaddingRight: var( - --pf-c-page__header-nav--lg--PaddingRight - ); - --pf-c-page__header-nav--PaddingLeft: var( - --pf-c-page__header-nav--lg--PaddingLeft - ); - } -} - /* The box size calculation compared to the text size seems off, but this looks better */ .zuul-job-graph text { -- cgit v1.2.1