Sidebar tweaks
This commit is contained in:
parent
9813054264
commit
76fb05f0b2
@ -97,11 +97,11 @@ export default defineComponent({
|
||||
|
||||
methods: {
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if(position === -1) {
|
||||
@ -234,28 +234,32 @@ export default defineComponent({
|
||||
flex: 0 0 auto;
|
||||
|
||||
.section__heading {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
margin: -1.5rem -1.5rem 0;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% + 3rem);
|
||||
margin: 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
margin: -1.5rem -1.5rem 0;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
width: calc(100% + 3rem);
|
||||
|
||||
.svg-icon {
|
||||
margin-left: auto;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-visible, &.focus-visible, &:active {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-left: auto;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section__content {
|
||||
@ -276,7 +280,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&.section--collapsed {
|
||||
.section__heading {
|
||||
.section__heading button {
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: -1.5rem;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
|
||||
<h2>
|
||||
<button :id="`${name}-heading`" type="button" class="section__heading"
|
||||
<h2 class="section__heading">
|
||||
<button :id="`${name}-heading`" type="button"
|
||||
@click.prevent="toggle" :title="title"
|
||||
:aria-expanded="!collapsed" :aria-controls="`${name}-content`">
|
||||
<span>
|
||||
|
@ -17,7 +17,7 @@
|
||||
<template>
|
||||
<li :class="{'server': true, 'server--selected': selected}" role="none">
|
||||
<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 }}
|
||||
</button>
|
||||
</li>
|
||||
|
Loading…
Reference in New Issue
Block a user