adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve lang switch accesibility

Browse source
This commit is contained in:
Alex Shpak 2020-02-10 18:39:07 +01:00
parent 72cf0968ce
commit e1d55f2b15
4 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/_main.scss
View file

@ -249,15 +249,19 @@ ul.pagination {
padding: $padding-16; padding: $padding-16;
margin: -$padding-16; margin: -$padding-16;
&:hover .book-languages-list { &:hover,
&:focus,
&:focus-within {
.book-languages-list {
display: block; display: block;
} }
}
.book-languages-list { .book-languages-list {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 100%;
left: 0; left: 0;
padding: $padding-8 0; padding: $padding-8 0;
@ -265,7 +269,6 @@ ul.pagination {
box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1); box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
li { li {
padding: $padding-8 $padding-16;
white-space: nowrap; white-space: nowrap;
} }
@ -279,6 +282,7 @@ ul.pagination {
a { a {
color: inherit; color: inherit;
padding: $padding-8 $padding-16;
} }
} }

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
View file

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
View file

@ -1 +1 @@
{"Target":"book.min.e44f7b3e03f829c264df576fb55b300cec33280fe834e604024e41b24dd6897a.css","MediaType":"text/css","Data":{"Integrity":"sha256-5E97PgP4KcJk31dvtVswDOwzKA/oNOYEAk5Bsk3WiXo="}} {"Target":"book.min.e5c9b9ce08a1b4d00a97034509105a57f3c0ddc4d20bbcff4043fa956e1481a4.css","MediaType":"text/css","Data":{"Integrity":"sha256-5cm5zgihtNAKlwNFCRBaV/PA3cTSC7z/QEP6lW4UgaQ="}}

5
layouts/partials/docs/languages.html
View file

@ -7,8 +7,7 @@
{{ $langs = merge $langs (dict .Language.Lang .) }} {{ $langs = merge $langs (dict .Language.Lang .) }}
{{ end }} {{ end }}
<div class="book-languages"> <div class="book-languages" tabindex="0" aria-haspopup="true">
<ul> <ul>
<li class="flex"> <li class="flex">
<img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" /> <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
@ -18,7 +17,7 @@
<ul class="book-languages-list"> <ul class="book-languages-list">
{{ range sort $langs }} {{ range sort $langs }}
<li class="{{ if (eq $.Site.Language .Language ) }}active{{ end }}"> <li class="{{ if (eq $.Site.Language .Language) }}active{{ end }}">
<a href="{{ .Permalink }}" class="flex"> <a href="{{ .Permalink }}" class="flex">
<img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" /> <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
{{ .Language.LanguageName }} {{ .Language.LanguageName }}