diff --git a/package.json b/package.json index 37987c95e71..d51bac80f02 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "typescript": "4.5.4", "url-polyfill": "1.1.12", "url-search-params-polyfill": "8.1.1", - "vanilla-framework": "4.5.1", + "vanilla-framework": "4.7.0", "yup": "0.32.11" }, "resolutions": { diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js index 95725674954..e7cc7384b53 100644 --- a/static/js/src/navigation.js +++ b/static/js/src/navigation.js @@ -1,5 +1,5 @@ const ANIMATION_DELAY = 200; -const MOBILE_VIEW_BREAKPOINT = 1281; +const MOBILE_VIEW_BREAKPOINT = 1228; const dropdownWindow = document.querySelector(".dropdown-window"); const dropdownWindowOverlay = document.querySelector( ".dropdown-window-overlay" diff --git a/static/sass/_global-settings.scss b/static/sass/_global-settings.scss index 52f68b11081..1a0dd86cd88 100644 --- a/static/sass/_global-settings.scss +++ b/static/sass/_global-settings.scss @@ -1,5 +1,5 @@ $breakpoint-medium: 875px; -$viewport-threshold: 1281px; +$viewport-threshold: 1212px; $color-brand: #e95420; $color-dark: #111; $color-positive: #0e8420 !default; diff --git a/static/sass/_pattern_navigation-dropdown.scss b/static/sass/_pattern_navigation-dropdown.scss index db2fb8b6945..b5a51a7de12 100644 --- a/static/sass/_pattern_navigation-dropdown.scss +++ b/static/sass/_pattern_navigation-dropdown.scss @@ -14,6 +14,14 @@ @media (max-width: $breakpoint-navigation-threshold - 1) { display: none !important; } + + .global-nav-dropdown .global-nav__row { + padding: 0 2rem; + + .col-9 { + margin-left: 0.25rem; + } + } } .dropdown-window-overlay { @@ -114,11 +122,12 @@ .dropdown-window__main-panel, .dropdown-window__side-panel { - margin: 2.5rem 0 2.5rem -0.5rem; + margin: 2rem 0 2.5rem -0.5rem; .p-muted-heading { color: rgba(255, 255, 255, 0.6); padding-left: 0.5rem; + padding-top: 0.25rem; } .p-navigation__dropdown-item { @@ -168,7 +177,7 @@ } .dropdown-window__side-panel { - margin: 2.5rem 0; + margin: 2rem 0; padding: 0; .p-list { diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss index 58719630616..75822e2ba51 100644 --- a/static/sass/_pattern_navigation.scss +++ b/static/sass/_pattern_navigation.scss @@ -39,6 +39,14 @@ $meganav-height: 3rem; } } + .p-navigation__row--25-75 { + @media (min-width: $breakpoint-navigation-threshold) { + .p-navigation__items:first-child { + margin-left: -1rem; + } + } + } + .p-navigation--sliding { position: sticky; top: 0; @@ -52,146 +60,13 @@ $meganav-height: 3rem; font-weight: 400; } - .p-navigation__nav { - margin-left: -1rem; - margin-right: 0; - max-height: calc(100vh - 3rem); - width: auto; - - .p-navigation__items { - width: 100%; - - @media (max-width: $breakpoint-navigation-threshold - 1) { - .p-navigation__link { - padding-left: calc(1.5rem + $row-margin-medium); - - &::before { - left: calc(1.5rem + $row-margin-medium); - } - - &.js-back::after { - left: $row-margin-medium; - } - } - - & > .p-navigation__item--dropdown-toggle > .p-navigation__link { - padding-left: $row-margin-medium; - - &::before { - left: $row-margin-medium; - } - } - - .p-navigation__item--dropdown-toggle { - &:first-child .p-navigation__link::before { - content: ""; - } - - &.is-selected > .p-navigation__link::before { - content: none; - } - } - - .p-navigation__item--dropdown-toggle:first-of-type, - .p-navigation__item--dropdown-close:first-of-type { - > .p-navigation__link::before { - content: none; - } - } - - .p-navigation__dropdown-item { - padding-left: calc(1.5rem + $row-margin-medium); - - &::before { - left: calc(1.5rem + $row-margin-medium); - } - } - - .p-muted-heading { - padding-left: 0; - } - } - - @media (max-width: $breakpoint-medium) { - .p-navigation__link { - padding-left: calc(1.5rem + $row-margin-small); - - &::before { - left: calc(1.5rem + $row-margin-small); - } - - &.js-back::after { - left: $row-margin-small; - } - } - - & > .p-navigation__item--dropdown-toggle > .p-navigation__link { - padding-left: $row-margin-small; - - &::before { - left: $row-margin-small; - } - } - - .p-navigation__dropdown-item { - padding-left: calc(1.5rem + $row-margin-small); - - &::before { - left: calc(1.5rem + $row-margin-small); - } - } - - .p-muted-heading { - padding-left: 0; - } - } - - .global-nav { - margin-left: auto; + .p-navigation__row--25-75 { + @media (min-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__items:first-child { + margin-left: -1rem; } } - .p-search-box__input { - background-color: $color-light !important; - - &:focus, - &:hover { - background-color: $color-light !important; - } - } - - .p-search-box__input::placeholder { - color: #000; - } - } - - .p-navigation__banner { - padding-left: 0; - } - - @media (max-width: $breakpoint-navigation-threshold - 1) { - .row { - display: unset; - } - - .p-navigation__nav { - margin-left: 0; - overflow-y: auto; - } - - .p-navigation__banner { - height: $meganav-height; - padding-left: $row-margin-medium; - } - } - - @media (max-width: $breakpoint-medium) { - .p-navigation__banner { - padding-left: $row-margin-small; - } - } - - .row { @media (max-width: $breakpoint-navigation-threshold - 1) { padding-left: 0; padding-right: 0; @@ -227,7 +102,7 @@ $meganav-height: 3rem; } .p-navigation__link--search-toggle::after { - right: 1rem; + right: 1.5rem; @media (max-width: $breakpoint-navigation-threshold - 1) { right: 0.5rem; @@ -354,21 +229,170 @@ $meganav-height: 3rem; } .p-navigation__link::after { + right: 0.5rem; top: 1.25rem; + @media (max-width: $breakpoint-navigation-threshold - 1) { right: 1.5rem; top: 1rem; } } } - } - .p-navigation--sliding:not(.js-enabled) { - .p-navigation__item--dropdown-toggle > .p-navigation__link { - padding-right: 1rem; + .p-navigation--sliding:not(.js-enabled) { + .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-right: 1rem; - &::after { - content: none; + &::after { + content: none; + } + } + } + + .p-navigation__nav { + margin-right: -1rem; + max-height: calc(100vh - 3rem); + width: auto; + + .p-navigation__items { + width: 100%; + + & > .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-left: $row-margin-small; + padding-right: 2rem; + + &::before { + left: $row-margin-small; + } + } + + @media (max-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__link { + padding-left: calc(1.5rem + $row-margin-medium); + + &::before { + left: calc(1.5rem + $row-margin-medium); + } + + &.js-back::after { + left: $row-margin-medium; + } + } + + & > .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-left: $row-margin-medium; + + &::before { + left: $row-margin-medium; + } + } + + .p-navigation__item--dropdown-toggle { + &:first-child .p-navigation__link::before { + content: ""; + } + + &.is-selected > .p-navigation__link::before { + content: none; + } + } + + .p-navigation__item--dropdown-toggle:first-of-type, + .p-navigation__item--dropdown-close:first-of-type { + > .p-navigation__link::before { + content: none; + } + } + + .p-navigation__dropdown-item { + padding-left: calc(1.5rem + $row-margin-medium); + + &::before { + left: calc(1.5rem + $row-margin-medium); + } + } + + .p-muted-heading { + padding-left: 0; + } + } + + @media (max-width: $breakpoint-medium) { + .p-navigation__link { + padding-left: calc(1.5rem + $row-margin-small); + + &::before { + left: calc(1.5rem + $row-margin-small); + } + + &.js-back::after { + left: $row-margin-small; + } + } + + & > .p-navigation__item--dropdown-toggle > .p-navigation__link { + padding-left: $row-margin-small; + + &::before { + left: $row-margin-small; + } + } + + .p-navigation__dropdown-item { + padding-left: calc(1.5rem + $row-margin-small); + + &::before { + left: calc(1.5rem + $row-margin-small); + } + } + + .p-muted-heading { + padding-left: 0; + } + } + + .global-nav { + margin-left: auto; + } + } + + .p-search-box__input { + background-color: $color-light !important; + + &:focus, + &:hover { + background-color: $color-light !important; + } + } + + .p-search-box__input::placeholder { + color: #000; + } + } + + .p-navigation__banner { + padding-left: 0; + } + + @media (max-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__row--25-75 { + display: unset; + } + + .p-navigation__nav { + margin-left: 0; + overflow-y: auto; + } + + .p-navigation__banner { + height: $meganav-height; + padding-left: $row-margin-medium; + } + } + + @media (max-width: $breakpoint-medium) { + .p-navigation__banner { + padding-left: $row-margin-small; } } } @@ -377,7 +401,7 @@ $meganav-height: 3rem; height: fit-content; @media (max-width: $breakpoint-navigation-threshold - 1) { - .row { + .p-navigation__row--25-75 { height: 100vh; } } @@ -459,6 +483,12 @@ $meganav-height: 3rem; } } + @media (max-width: $breakpoint-navigation-threshold - 1) { + .p-navigation__link::after { + top: 1rem; + } + } + .p-navigation__item { .p-navigation__link { color: $color-mid-light; @@ -485,7 +515,7 @@ $meganav-height: 3rem; } } - @media (min-width: $breakpoint-navigation-threshold - 1) { + @media (min-width: $breakpoint-navigation-threshold) { background-color: $color-dark; margin-bottom: 0; @@ -603,9 +633,11 @@ $meganav-height: 3rem; top: 0; z-index: 10; - .p-navigation__nav { - margin-left: -1rem; + .p-navigation__item > .p-navigation__link { + padding-left: $row-margin-small; + } + .p-navigation__nav { &.is-open { display: flex; @@ -614,10 +646,10 @@ $meganav-height: 3rem; } .p-navigation__link { - padding-left: calc(1rem + $row-margin-medium); + padding-left: $row-margin-medium; @media (max-width: $breakpoint-medium) { - padding-left: calc(1rem + $row-margin-small); + padding-left: $row-margin-small; } &::before { @@ -636,15 +668,11 @@ $meganav-height: 3rem; padding-left: $row-margin-medium; } - .row { + .p-navigation__row--25-75 { display: unset; padding-left: 0; padding-right: 0; } - - .p-navigation__nav { - margin-left: -1rem; - } } @media (max-width: $breakpoint-medium) { diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 2722b57db73..14a2c2e4f7c 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1366,8 +1366,6 @@ $color-link-dark: #69c !default; } } -// XXX: @bartaz: this will be covered in Vanilla -// can be removed once https://github.com/canonical/vanilla-framework/issues/4875 is done and released .p-logo-section.has-misaligned-images { .p-logo-section__item { margin-bottom: $spv--x-large; diff --git a/templates/templates/_navigation.html b/templates/templates/_navigation.html index dbe94a3be16..521633644ca 100644 --- a/templates/templates/_navigation.html +++ b/templates/templates/_navigation.html @@ -1,8 +1,8 @@ {% set breadcrumbs = get_navigation(request.path).breadcrumbs %}
{% block header_banner %} -
-
+
+
-