Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sidebar tweaks

Browse Source
This commit is contained in:
James Lyne 2021-05-26 23:28:03 +01:00
parent 9813054264
commit 76fb05f0b2
3 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Sidebar.vue
View File

@ -97,11 +97,11 @@ export default defineComponent({
methods: { methods: {
handleKeydown(e: KeyboardEvent) { handleKeydown(e: KeyboardEvent) {
if(!e.target || !(e.target as HTMLElement).classList.contains('section__heading')) { if(!e.target || !(e.target as HTMLElement).matches('.section__heading button')) {
return; return;
} }
const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading')), const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button')),
position = sectionHeadings.indexOf(e.target as HTMLElement); position = sectionHeadings.indexOf(e.target as HTMLElement);
if(position === -1) { if(position === -1) {
@ -234,23 +234,21 @@ export default defineComponent({
flex: 0 0 auto; flex: 0 0 auto;
.section__heading { .section__heading {
font-size: 2rem;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
text-align: left;
align-items: center;
margin: 0;
button {
display: flex;
font-size: 2rem;
padding: 1.5rem 1.5rem 1rem; padding: 1.5rem 1.5rem 1rem;
margin: -1.5rem -1.5rem 0; margin: -1.5rem -1.5rem 0;
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-align: left;
display: flex;
align-items: center;
width: calc(100% + 3rem); width: calc(100% + 3rem);
&:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent;
color: inherit;
}
.svg-icon { .svg-icon {
margin-left: auto; margin-left: auto;
width: 1.5rem; width: 1.5rem;
@ -258,6 +256,12 @@ export default defineComponent({
} }
} }
&:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent;
color: inherit;
}
}
.section__content { .section__content {
padding: 0 0.5rem; padding: 0 0.5rem;
margin: 0 -.5rem 1rem; margin: 0 -.5rem 1rem;
@ -276,7 +280,7 @@ export default defineComponent({
} }
&.section--collapsed { &.section--collapsed {
.section__heading { .section__heading button {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
margin-bottom: -1.5rem; margin-bottom: -1.5rem;
} }

4
src/components/sidebar/CollapsibleSection.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}"> <section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
<h2> <h2 class="section__heading">
<button :id="`${name}-heading`" type="button" class="section__heading" <button :id="`${name}-heading`" type="button"
@click.prevent="toggle" :title="title" @click.prevent="toggle" :title="title"
:aria-expanded="!collapsed" :aria-controls="`${name}-content`"> :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
<span> <span>

2
src/components/sidebar/ServerListItem.vue
View File

@ -17,7 +17,7 @@
<template> <template>
<li :class="{'server': true, 'server--selected': selected}" role="none"> <li :class="{'server': true, 'server--selected': selected}" role="none">
<button type="button" :class="{'active': selected}" <button type="button" :class="{'active': selected}"
role="option" :aria-pressed="selected" :title="server.label || server.id" role="radio" :aria-checked="selected" :title="server.label || server.id"
@click="setCurrentServer(server.id)">{{ server.label || server.id }} @click="setCurrentServer(server.id)">{{ server.label || server.id }}
</button> </button>
</li> </li>