mirror of https://github.com/istio/istio.io.git
Site improvements
- Darken the text color of the selected tab in a tab set. - Remove extra bottom border line in collapsed sidebar panels. - Cleaned up accessibility annotations for the sidebar.
This commit is contained in:
mtail
parent
eff00317b7
commit
3f6e52e399
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
<nav id="sidebar" aria-label="Section Navigation">
|
||||
<div class="directory" role="tablist">
|
||||
<div class="directory">
|
||||
{{ $section := .Site.GetPage "section" .Section }}
|
||||
|
||||
{{ $pages := (where .Site.Pages "Section" .Section).ByWeight }}
|
||||
|
|
@ -8,16 +8,16 @@
|
|||
{{ range $count, $page := $pages }}
|
||||
{{ if eq .Parent $section }}
|
||||
|
||||
{{ $id := printf "header%d" $count }}
|
||||
<div class="card" role="tabpanel" aria-labelledby="{{ $id }}">
|
||||
<div class="header dynamic" role="tab" id="{{ $id }}" title="{{ $page.Description }}">
|
||||
{{ $id := printf "card%d" $count }}
|
||||
<div class="card">
|
||||
<button class="header dynamic" id="{{ $id }}" title="{{ $page.Description }}" aria-controls="{{ $id }}-body">
|
||||
{{- if $page.Params.icon -}}
|
||||
{{- partial "icon.html" .Params.icon -}}
|
||||
{{- end -}}
|
||||
{{- $page.Title -}}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="body{{if .IsAncestor $current}} default{{end}}">
|
||||
<div class="body{{if .IsAncestor $current}} default{{end}}" aria-labelledby="{{ $id }}" role="region" id="{{ $id }}-body">
|
||||
{{ partial "sidebar_level.html" (dict "pages" $pages "parent" $page "current" $current "collapse" false "top" true "labelledby" $id ) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<nav id="sidebar" aria-label="Section Navigation">
|
||||
<div class="directory" role="tablist">
|
||||
<div class="directory">
|
||||
{{ $section := .Site.GetPage "section" .Section }}
|
||||
|
||||
{{ $id := "header0" }}
|
||||
<div class="card" role="tabpanel" aria-labelledby="{{ $id }}">
|
||||
<div id="{{ $id }}" class="header" role="tab" title="{{ $section.Description }}">
|
||||
<div class="card">
|
||||
<div id="header0" class="header" title="{{ $section.Description }}">
|
||||
{{- if $section.Params.icon -}}
|
||||
{{- partial "icon.html" $section.Params.icon -}}
|
||||
{{- end -}}
|
||||
|
|
@ -13,8 +12,8 @@
|
|||
|
||||
{{ $pages := (where .Site.Pages "Section" .Section).ByWeight }}
|
||||
|
||||
<div class="body default" role="tabpanel" aria-labelledby="header0">
|
||||
{{ partial "sidebar_level.html" (dict "pages" $pages "parent" $section "current" . "collapse" false "top" true "labelledby" $id ) }}
|
||||
<div class="body default" aria-labelledby="header0">
|
||||
{{ partial "sidebar_level.html" (dict "pages" $pages "parent" $section "current" . "collapse" false "top" true "labelledby" "header0" ) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,22 @@ function handleSidebar() {
|
|||
}
|
||||
|
||||
// toggle subtree in sidebar
|
||||
queryAll(sidebar, button).forEach(o => {
|
||||
listen(o, click, e => {
|
||||
let button = e.currentTarget;
|
||||
button.classList.toggle("show");
|
||||
const ul = button.nextElementSibling.nextElementSibling;
|
||||
toggleAttribute(ul, ariaExpanded);
|
||||
queryAll(sidebar, '.body').forEach(body => {
|
||||
queryAll(body, button).forEach(o => {
|
||||
listen(o, click, e => {
|
||||
let button = e.currentTarget;
|
||||
button.classList.toggle("show");
|
||||
const ul = button.nextElementSibling.nextElementSibling;
|
||||
toggleAttribute(ul, ariaExpanded);
|
||||
|
||||
let el = ul;
|
||||
do {
|
||||
el = el.parentElement;
|
||||
} while (!el.classList.contains('body'));
|
||||
let el = ul;
|
||||
do {
|
||||
el = el.parentElement;
|
||||
} while (!el.classList.contains('body'));
|
||||
|
||||
// adjust the body's max height to the total size of the body's content
|
||||
el.style.maxHeight = el.scrollHeight + "px";
|
||||
// adjust the body's max height to the total size of the body's content
|
||||
el.style.maxHeight = el.scrollHeight + "px";
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -32,6 +34,8 @@ function handleSidebar() {
|
|||
const body = header.nextElementSibling;
|
||||
|
||||
body.classList.toggle('show');
|
||||
toggleAttribute(header, ariaExpanded);
|
||||
|
||||
if (body.classList.contains('show')) {
|
||||
// set this as the limit for expansion
|
||||
body.style.maxHeight = body.scrollHeight + "px";
|
||||
|
|
@ -49,6 +53,8 @@ function handleSidebar() {
|
|||
body.style.maxHeight = body.scrollHeight + "px";
|
||||
body.classList.toggle("default");
|
||||
body.classList.toggle("show");
|
||||
const header = body.previousElementSibling;
|
||||
toggleAttribute(header, ariaExpanded);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -53,63 +53,10 @@
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $sidebarLinkWeight;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
&[aria-expanded=true] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .7em 0 .7em 1.3rem;
|
||||
padding: 0;
|
||||
font-size: 85%;
|
||||
position: relative;
|
||||
|
||||
.current {
|
||||
color: $linkActiveColor;
|
||||
font-weight: $sidebarCurrentPageWeight;
|
||||
}
|
||||
}
|
||||
|
||||
.body > ul.leaf-section > li {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: $sidebarRightChevron no-repeat;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
left: -1.3rem;
|
||||
position: absolute;
|
||||
|
||||
&.show {
|
||||
background: $sidebarDownChevron no-repeat;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
outline: 0;
|
||||
background: $sidebarRightChevronHover no-repeat;
|
||||
&.show {
|
||||
background: $sidebarDownChevronHover no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $backgroundColor;
|
||||
margin-top: .1rem;
|
||||
|
|
@ -126,9 +73,15 @@
|
|||
.header {
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
border-bottom: 1px solid $dividerBarColor;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0);
|
||||
padding: .75em 1.25em;
|
||||
color: $textColor;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
transition: border-bottom-color .6s;
|
||||
|
||||
&.dynamic {
|
||||
color: $linkColor;
|
||||
|
|
@ -139,8 +92,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
div {
|
||||
padding: .75em 1.25em;
|
||||
&[aria-expanded=true] {
|
||||
border-bottom-color: $dividerBarColor;
|
||||
transition: border-bottom-color .6s;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -170,6 +124,60 @@
|
|||
transform: scaleY(1) scaleX(1);
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: $sidebarRightChevron no-repeat;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
left: -1.3rem;
|
||||
position: absolute;
|
||||
|
||||
&.show {
|
||||
background: $sidebarDownChevron no-repeat;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
outline: 0;
|
||||
background: $sidebarRightChevronHover no-repeat;
|
||||
|
||||
&.show {
|
||||
background: $sidebarDownChevronHover no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $sidebarLinkWeight;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
&[aria-expanded=true] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .7em 0 .7em 1.3rem;
|
||||
padding: 0;
|
||||
font-size: 85%;
|
||||
position: relative;
|
||||
|
||||
.current {
|
||||
color: $linkActiveColor;
|
||||
font-weight: $sidebarCurrentPageWeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ body {
|
|||
--tabsetShadowColor: #a7a7a7;
|
||||
--tabsetUnselectedTabTextColor: #306Bcc;
|
||||
--tabsetUnselectedTabBackgroundColor: #ffffff;
|
||||
--tabsetSelectedTabTextColor: #a7a7a7;
|
||||
--tabsetSelectedTabTextColor: var(--textColor);
|
||||
--tabsetSelectedTabBackgroundColor: #ffffff;
|
||||
|
||||
--sidebarRightChevron: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407.436 407.436'%3E%3Cpath fill='black' d='M112.814 0L91.566 21.178l181.946 182.54-181.946 182.54 21.248 21.178 203.055-203.718z'/%3E%3C/svg%3E");
|
||||
|
|
|
|||
Loading…
Reference in New Issue