archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-30 22:50:05 +00:00
Code Issues Projects Releases Wiki Activity

Updated breadcrumb dropdown styles, improved keyboard nav

Browse source 
- Removed harsh theme color border between search and content.
- Prevented intermediate focus on list container to align arrow & tab
  behaviour, and to get to content quicker.
This commit is contained in:
Dan Brown 2022-05-14 13:11:48 +01:00
parent e6864a9cff
commit 2c74dfd1d4
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
3 changed files with 6 additions and 3 deletions
resources
js/components
dropdown.js
sass
_components.scss
views/entities
breadcrumb-listing.blade.php

2
resources/js/components/dropdown.js
View file

@ -101,7 +101,7 @@ class DropDown {
} }
getFocusable() { getFocusable() {
return Array.from(this.menu.querySelectorAll('[tabindex],[href],button,input:not([type=hidden])')); return Array.from(this.menu.querySelectorAll('[tabindex]:not([tabindex="-1"]),[href],button,input:not([type=hidden])'));
} }
focusNext() { focusNext() {

5
resources/sass/_components.scss
View file

@ -767,12 +767,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
text-decoration: none; text-decoration: none;
} }
} }
input { input, input:focus {
padding-inline-start: $-xl; padding-inline-start: $-xl;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
input:focus {
outline: 0;
}
} }
@include smaller-than($m) { @include smaller-than($m) {

2
resources/views/entities/breadcrumb-listing.blade.php
View file

@ -18,6 +18,6 @@
<div refs="dropdown-search@loading"> <div refs="dropdown-search@loading">
@include('common.loading-icon') @include('common.loading-icon')
</div> </div>
<div refs="dropdown-search@listContainer" class="dropdown-search-list px-m"></div> <div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1"></div>
</div> </div>
</div> </div>