Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Add documentation layout example with right side items #5023

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

WIP: Add documentation layout example with right side items #5023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d43ad86
Add documentation layout example with right side items
bartaz Mar 6, 2024
24a6027
Prevent content being squeezed on smaller screens
bartaz Mar 6, 2024
b07e11b
Update navigation padding and alignment
bartaz Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_layouts_docs.scss
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@
.l-docs__subgrid {
display: grid;
grid-template-areas: 'sidebar main meta';
grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr) min-content;
grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr) max-content;
width: 100%;
}
}
Expand Down
22 changes: 15 additions & 7 deletions scss/_patterns_navigation.scss
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
}

@media (min-width: $breakpoint-navigation-threshold) {
padding-left: map-get($grid-margin-widths, default);
padding-left: $sph--large;
}
}

Expand All @@ -45,7 +45,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
}

@media (min-width: $breakpoint-navigation-threshold) {
padding-right: map-get($grid-margin-widths, default);
padding-right: $sph--large;
}
}

Expand Down Expand Up @@ -87,7 +87,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
}

@media (min-width: $breakpoint-navigation-threshold) {
padding-left: map-get($grid-margin-widths, default);
padding-left: $sph--large;
}

&:visited,
Expand Down Expand Up @@ -189,6 +189,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
width: 100%;
}

// when large screen navigation is displayed, use 25/75 grid split
@media (min-width: $breakpoint-navigation-threshold) {
// shift navigation items by the size of grid margin to align with grid
.p-navigation__items:first-child {
margin-left: calc(map-get($grid-margin-widths, default) - $sph--large);
}
}

.p-navigation__row--25-75 {
// ideally we'd like to extend row only on large screens,
// but that's not possible to use @extend inside media query
Expand All @@ -208,7 +216,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px

// shift navigation items by the size of grid margin to align with grid
.p-navigation__items:first-child {
margin-left: calc(-1 * map-get($grid-margin-widths, default));
margin-left: calc(-1 * $sph--large);
}

// on medium screen sizes (6 columns) use 2/4 column split
Expand Down Expand Up @@ -484,7 +492,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
height: 100%; // keep the height of the navigation when 'Search' label is hidden

padding-left: 0; // on small screens label is hidden, so we remove left padding as well
padding-right: calc(map-get($grid-margin-widths, default) + map-get($icon-sizes, default));
padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
position: relative;

// hide "search" label on small screens (only show the icon)
Expand All @@ -494,7 +502,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px

// show both label and icon on large screens
@media (min-width: $breakpoint-large) {
padding-left: map-get($grid-margin-widths, default);
padding-left: $sph--large;

.p-navigation__search-label {
display: initial;
Expand All @@ -510,7 +518,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
height: $spv--large;
pointer-events: none;
position: absolute;
right: calc(map-get($grid-margin-widths, default) / 2);
right: $sph--small; // calc(map-get($grid-margin-widths, default) / 2);
text-indent: calc(100% + 10rem);
top: calc($spv--medium + map-get($nudges, x-small));
width: map-get($icon-sizes, default);
Expand Down