liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard): make dropdowns keyboard navigable

Browse Source
This commit is contained in:
Draconizations 2022-05-19 21:38:53 +02:00
parent 5cd6ccf99c
commit b9a7b08281
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard/src/lib/Navigation.svelte
View File

@ -29,7 +29,7 @@ import { get } from 'svelte/store';
<Collapse {isOpen} navbar expand="lg"> <Collapse {isOpen} navbar expand="lg">
<Nav class="ms-auto" navbar> <Nav class="ms-auto" navbar>
<Dropdown nav inNavbar> <Dropdown nav inNavbar>
<DropdownToggle color="transparent" tag="span" class="nav-link">Styles</DropdownToggle> <DropdownToggle color="transparent" class="nav-link"><span class="select-text">Styles</span></DropdownToggle>
<DropdownMenu end> <DropdownMenu end>
<DropdownItem on:click={() => style = "light"}>Light</DropdownItem> <DropdownItem on:click={() => style = "light"}>Light</DropdownItem>
<DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem> <DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem>
@ -37,7 +37,7 @@ import { get } from 'svelte/store';
</Dropdown> </Dropdown>
{#if loggedIn_value || localStorage.getItem("pk-token")} {#if loggedIn_value || localStorage.getItem("pk-token")}
<Dropdown nav inNavbar> <Dropdown nav inNavbar>
<DropdownToggle color="transparent" tag="span" class="nav-link">Dash</DropdownToggle> <DropdownToggle color="transparent" class="nav-link"><span class="select-text">Dash</span></DropdownToggle>
<DropdownMenu end> <DropdownMenu end>
<Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem>System</DropdownItem></Link> <Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem>System</DropdownItem></Link>
<Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem>Members</DropdownItem></Link> <Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem>Members</DropdownItem></Link>
@ -55,4 +55,10 @@ import { get } from 'svelte/store';
</NavItem> </NavItem>
</Nav> </Nav>
</Collapse> </Collapse>
</Navbar> </Navbar>
<style>
.select-text {
user-select: text;
}
</style>