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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds additional styling for active global navigation item #15061

Merged
merged 16 commits into from
Jun 11, 2024
Merged

Adds additional styling for active global navigation item #15061

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
39a4d12
Tweak global sidebar CSS slightly to add bold/left padding to current…
May 21, 2024
f5ffdbf
Add a currentPage property to nav items to be able to use for li styl…
May 21, 2024
5cc91c6
Build
May 23, 2024
8f90d06
Add global var for nav item background active/hover colors; start sty…
May 23, 2024
6a32e68
Remove currentPage variable and unneeded code
May 24, 2024
a0862e1
Remove comma
May 24, 2024
912b948
Merge and build
May 24, 2024
3581ca7
Indicator adjustments
brianjhanson Jun 9, 2024
beaa329
More styling adjustments
brianjhanson Jun 9, 2024
5fe4862
Cleanup
brianjhanson Jun 10, 2024
b25e3b8
Cleaning up a bit
brianjhanson Jun 10, 2024
6025e0f
Merge branch '5.2' of github.com:craftcms/cms into a11y/active-global…
brianjhanson Jun 10, 2024
162e3aa
Variable cleanup
brianjhanson Jun 10, 2024
2056ae9
Merge branch '5.2' into a11y/active-global-nav-item
brandonkelly Jun 11, 2024
8cf63ca
Release note
brandonkelly Jun 11, 2024
20bddcc
Release note x2
brandonkelly Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 28 additions & 18 deletions src/templates/_layouts/components/global-sidebar.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,22 @@
{% tag 'a' with linkAttributes %}
<span class="sidebar-action__prefix">
{% if showIcon %}
<span class="nav-icon" aria-hidden="true">
{%- if item.icon is defined -%}
{{ iconSvg(item.icon) }}
{%- elseif item.fontIcon is defined -%}
<span data-icon="{{ item.fontIcon }}"></span>
{%- else -%}
{% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
{%- endif -%}
<span class="nav-icon" aria-hidden="true">
{%- if item.icon is defined -%}
{{ iconSvg(item.icon) }}
{%- elseif item.fontIcon is defined -%}
<span data-icon="{{ item.fontIcon }}"></span>
{%- else -%}
{% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
{%- endif -%}
</span>
{% endif %}
</span>

<span class="sidebar-action__label">
<span class="label">{{ item.label }}</span>
{% if external %}
{{ links.externalLinkIcon() }}
{{ links.externalLinkIcon() }}
{% endif %}
</span>

Expand Down Expand Up @@ -70,25 +70,34 @@
{% set itemAttributes = {
id: item.id,
class: [
'nav-item',
item.sel ? 'sel',
item.subnav ? 'has-subnav'
],
} %}
<li {{ attr(itemAttributes) }}>
{{ _self.action(item) }}
<div class="nav-item {% if item.sel %}sel{% endif %}">
{{ _self.action(item) }}

{% if item.subnav %}
<craft-disclosure class="nav-item__trigger">
<button
type="button"
class="btn menubtn hairline"
aria-controls="{{ item.id }}-subnav"
aria-describedby="{{ item.id }}-link" aria-expanded="{{ item.sel ? 'true' : 'false' }}"
>
<span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
</button>
</craft-disclosure>
{% endif %}
</div>

{% if item.subnav %}
<craft-disclosure class="nav-item__trigger">
<button type="button" class="btn menubtn hairline" aria-controls="{{ item.id }}-subnav" aria-describedby="{{ item.id }}-link" aria-expanded="{{ item.sel ? 'true' : 'false' }}">
<span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
</button>
</craft-disclosure>
<ul class="nav-item__subnav {{ item.sel ? 'is-open' : '' -}}" id="{{ item.id }}-subnav">
{% for itemId, item in item.subnav %}
{% set itemIsSelected = selectedSubnavItem is defined and selectedSubnavItem == itemId -%}

<li class="nav-item nav-item--sub">
<li>
<div class="nav-item nav-item--sub {% if itemIsSelected %}sel{% endif %}">
{{ _self.action(item|merge({
linkAttributes: {
class: ['sidebar-action--sub'],
Expand All @@ -97,6 +106,7 @@
},
}
}), itemIsSelected, false, ) }}
</div>
</li>
{% endfor %}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/web/assets/cp/dist/css/cp.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/web/assets/cp/dist/css/cp.css.map
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 19 additions & 3 deletions src/web/assets/cp/src/css/_cp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,22 @@ $badgeColor: var(--gray-800);
--global-sidebar-width: #{$sidebarWidth};
--header-height: calc(44rem / 16);
--details-width: #{$detailsWidth};

// Sidebar
--sidebar-bgColor: var(--gray-150);

// Nav items
--nav-item-indicator-size: var(--xs);
--nav-item-badge-bgColor: var(--medium-text-color);
--nav-item-badge-fgColor: var(--white);
--nav-item-fgColor-active: var(--text-color);
--nav-item-bgColor-active: var(--gray-200);
--nav-item-fgColor-hover: var(--text-color);
--nav-item-bgColor-hover: var(--gray-200);
--nav-item-prefix-width: calc(30rem / 16);
--nav-item-prefix-ratio: 1;
--nav-item-trigger-size: var(--touch-target-size);
--nav-item-gutter-width: calc(10rem / 16); // Left and right padding
}

html {
Expand Down Expand Up @@ -113,10 +129,10 @@ $systemInfoHoverBgColor: darken($grey800, 10%);

#system-info {
display: grid;
grid-template-columns: var(--prefix-width) auto;
grid-template-columns: var(--nav-item-prefix-width) auto;
gap: 10px;
height: calc(45rem / 16);
padding: 0 var(--gutter-width);
padding: 0 var(--nav-item-gutter-width);
position: relative;
flex: 0 0 calc(45rem / 16);
flex-direction: row;
Expand All @@ -137,7 +153,7 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
}

#site-icon {
--size: var(--prefix-width); // Matches .sidebar-action__prefix
--size: var(--nav-item-prefix-width); // Matches .sidebar-action__prefix
height: var(--size);

img,
Expand Down
111 changes: 57 additions & 54 deletions src/web/assets/cp/src/css/_global-sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.global-sidebar {
--is-always-visible: true;
--prefix-width: calc(30rem / 16);
--prefix-ratio: 1;
--gutter-width: calc(10rem / 16); // Left and right padding

position: sticky;
top: 0;
z-index: $sidebarZIndex;
Expand Down Expand Up @@ -52,16 +48,12 @@
.global-nav > ul {
display: flex;
flex-direction: column;
gap: var(--s);
}

.global-nav > ul > li {
position: relative;
}

.global-nav > ul > li.sel {
}

.nav-icon {
display: inline-flex;
flex-direction: column;
Expand All @@ -81,40 +73,48 @@
}

.nav-item {
--gutter-width: calc(10rem / 16);
display: grid;
grid-template-columns: var(--gutter-width) minmax(0, 1fr) var(--prefix-width) var(
--gutter-width
);
grid-template-columns:
var(--nav-item-gutter-width) minmax(0, 1fr) var(--nav-item-prefix-width)
var(--nav-item-gutter-width);
grid-template-areas: '. action trigger .' 'subnav subnav subnav subnav';
align-items: center;
width: 100%;
padding-block: var(--xs);

> .sidebar-action {
grid-area: action;
}

&.sel {
color: var(--nav-item-fgColor-active);
background-color: var(--nav-item-bgColor-active);
}
}

.nav-item--sub {
padding-block: 0;
}

.nav-item__trigger {
--icon-size: 10px;
--trigger-size: var(--touch-target-size);
width: var(--nav-item-trigger-size);
grid-area: trigger;
display: flex;
justify-content: center;
z-index: 1;

.menubtn {
padding: 0;
flex-direction: column;
justify-content: center;
align-items: center;
width: var(--trigger-size);
height: var(--trigger-size);
width: var(--nav-item-trigger-size);
height: var(--nav-item-trigger-size);
border: transparent;

&:hover {
@include light-on-dark-text;
color: var(--white);
background-color: var(--medium-text-color);
background-color: var(--nav-item-bgColor-hover);
}

&[aria-expanded='true']:not(:hover) {
Expand All @@ -132,12 +132,15 @@
}

.nav-item__subnav {
--prefix-ratio: 4/3;
--nav-item-prefix-ratio: 4/3;
display: none;
grid-area: subnav;
gap: 1px;
margin-block: 1px;
flex-direction: column;

&[data-state='expanded'] {
display: block;
display: flex;
}
}

Expand All @@ -150,19 +153,19 @@
min-width: 1.1rem;
height: 1rem;
padding: 0 var(--xs);
border-radius: var(--s);
background-color: var(--medium-text-color);
color: var(--white);
border-radius: 8px;
background-color: var(--nav-item-badge-bgColor);
color: var(--nav-item-badge-fgColor);
}

.sidebar-actions {
padding: 10px var(--gutter-width); // match padding of #system-info
padding: 10px var(--nav-item-gutter-width); // match padding of #system-info
}

.sidebar-action {
--thumb-size: 0.75rem;
display: grid;
grid-template-columns: var(--prefix-width) minmax(0, 1fr) auto;
grid-template-columns: var(--nav-item-prefix-width) minmax(0, 1fr) auto;
width: 100%;
align-items: center;
position: relative;
Expand All @@ -177,49 +180,49 @@
&:before {
content: '';
position: absolute;
inset-inline-start: calc((10rem / 16) * -1); // match #system-name
inset-inline-start: 0;
inset-block-start: 50%;
height: 80%;
transform: translateY(-50%);
width: var(--xs);
transform: translateY(-50%) translateX(-100%);
height: 95%;
width: var(--nav-item-indicator-size);
border-radius: var(--small-border-radius);
}

&:focus-visible,
&:hover {
@include light-on-dark-text;
color: var(--white);
background-color: var(--medium-text-color);
color: var(--nav-item-fgColor-hover);
background-color: var(--nav-item-bgColor-hover);
}

&.sel {
&[aria-current='page'],
&[aria-current='true'] {
&:before {
--indicator-size: 6px;
color: var(--white);
background-color: var(--medium-text-color);
background-color: var(--nav-item-fgColor-active);
}
}
}

.sidebar-action--sub {
--indicator-size: 4px;
font-size: 0.9em;
min-height: 26px;

&:focus-visible,
&:hover {
&:before {
background-color: var(--white);
}
}

&:before {
@include left(calc((30px / 2) - (var(--indicator-size) / 2)));
width: var(--indicator-size);
height: var(--indicator-size);
transform: translateY(-50%);
inset-inline-start: calc(
var(--xs) + calc(var(--nav-item-prefix-width) / 2) -
(var(--nav-item-indicator-size) / 2)
);
width: var(--nav-item-indicator-size);
height: var(--nav-item-indicator-size);
border-radius: 100%;
top: 50%;
background-color: currentColor;
}

&[aria-current='page'],
&[aria-current='true'] {
--nav-item-indicator-size: 6px;
}
}

.sidebar-action--job {
Expand Down Expand Up @@ -277,8 +280,8 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--prefix-width);
aspect-ratio: var(--prefix-ratio);
width: var(--nav-item-prefix-width);
aspect-ratio: var(--nav-item-prefix-ratio);
line-height: 0;
flex-shrink: 0;
}
Expand Down Expand Up @@ -318,19 +321,19 @@ States

.nav-item {
grid-template-areas: '. action .' '. trigger .' 'subnav subnav subnav';
grid-template-columns: var(--gutter-width) var(--prefix-width) var(
--gutter-width
);
grid-template-columns:
var(--nav-item-gutter-width) var(--nav-item-prefix-width)
var(--nav-item-gutter-width);
}

.nav-item__indicator {
right: -1px;
}

.sidebar-action {
width: var(--prefix-width);
width: var(--nav-item-prefix-width);
padding-inline: 0;
min-height: var(--prefix-width);
min-height: var(--nav-item-prefix-width);

&:focus-visible,
&:hover {
Expand Down
Loading