Make search results tab and help button focusable with keyboard
This commit is contained in:
parent
e413d89aa7
commit
2363a20b98
6 changed files with 23 additions and 20 deletions
|
@ -98,7 +98,7 @@ crate fn render<T: Print, S: Print>(
|
||||||
placeholder=\"Click or press ‘S’ to search, ‘?’ for more options…\" \
|
placeholder=\"Click or press ‘S’ to search, ‘?’ for more options…\" \
|
||||||
type=\"search\">\
|
type=\"search\">\
|
||||||
</div>\
|
</div>\
|
||||||
<span class=\"help-button\">?</span>
|
<button class=\"help-button\">?</button>
|
||||||
<a id=\"settings-menu\" href=\"{root_path}settings.html\">\
|
<a id=\"settings-menu\" href=\"{root_path}settings.html\">\
|
||||||
<img src=\"{static_root_path}wheel{suffix}.svg\" \
|
<img src=\"{static_root_path}wheel{suffix}.svg\" \
|
||||||
width=\"18\" \
|
width=\"18\" \
|
||||||
|
|
|
@ -1633,10 +1633,10 @@ function defocusSearchBar() {
|
||||||
|
|
||||||
function makeTabHeader(tabNb, text, nbElems) {
|
function makeTabHeader(tabNb, text, nbElems) {
|
||||||
if (currentTab === tabNb) {
|
if (currentTab === tabNb) {
|
||||||
return "<div class=\"selected\">" + text +
|
return "<button class=\"selected\">" + text +
|
||||||
" <div class=\"count\">(" + nbElems + ")</div></div>";
|
" <div class=\"count\">(" + nbElems + ")</div></button>";
|
||||||
}
|
}
|
||||||
return "<div>" + text + " <div class=\"count\">(" + nbElems + ")</div></div>";
|
return "<button>" + text + " <div class=\"count\">(" + nbElems + ")</div></button>";
|
||||||
}
|
}
|
||||||
|
|
||||||
function showResults(results) {
|
function showResults(results) {
|
||||||
|
|
|
@ -1176,21 +1176,22 @@ pre.rust {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div {
|
#titles > button {
|
||||||
float: left;
|
float: left;
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
border-top: 2px solid;
|
border-top: 2px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:not(:last-child) {
|
#titles > button:not(:last-child) {
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
width: calc(33.3% - 1px);
|
width: calc(33.3% - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div > div.count {
|
#titles > button > div.count {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
@ -1459,7 +1460,7 @@ h4 > .notable-traits {
|
||||||
top: 24px;
|
top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div > div.count {
|
#titles > button > div.count {
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -1565,7 +1566,7 @@ h4 > .notable-traits {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 416px) {
|
@media (max-width: 416px) {
|
||||||
#titles, #titles > div {
|
#titles, #titles > button {
|
||||||
height: 73px;
|
height: 73px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -403,22 +403,22 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
border-color: #5c6773;
|
border-color: #5c6773;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div.selected {
|
#titles > button.selected {
|
||||||
background-color: #141920 !important;
|
background-color: #141920 !important;
|
||||||
border-bottom: 1px solid #ffb44c !important;
|
border-bottom: 1px solid #ffb44c !important;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:not(.selected) {
|
#titles > button:not(.selected) {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:hover {
|
#titles > button:hover {
|
||||||
border-bottom: 1px solid rgba(242, 151, 24, 0.3);
|
border-bottom: 1px solid rgba(242, 151, 24, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div > div.count {
|
#titles > button > div.count {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -434,7 +434,7 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */
|
||||||
.block a.current.derive,.content span.macro,.content a.macro,.block a.current.macro {}
|
.block a.current.derive,.content span.macro,.content a.macro,.block a.current.macro {}
|
||||||
.content .highlighted.trait {}
|
.content .highlighted.trait {}
|
||||||
.content span.struct,.content a.struct,.block a.current.struct {}
|
.content span.struct,.content a.struct,.block a.current.struct {}
|
||||||
#titles>div:hover,#titles>div.selected {}
|
#titles>button:hover,#titles>button.selected {}
|
||||||
.content .highlighted.traitalias {}
|
.content .highlighted.traitalias {}
|
||||||
.content span.type,.content a.type,.block a.current.type {}
|
.content span.type,.content a.type,.block a.current.type {}
|
||||||
.content span.union,.content a.union,.block a.current.union {}
|
.content span.union,.content a.union,.block a.current.union {}
|
||||||
|
|
|
@ -352,16 +352,17 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
border-color: #777;
|
border-color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:not(.selected) {
|
#titles > button:not(.selected) {
|
||||||
background-color: #252525;
|
background-color: #252525;
|
||||||
border-top-color: #252525;
|
border-top-color: #252525;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:hover, #titles > div.selected {
|
#titles > button:hover, #titles > button.selected {
|
||||||
border-top-color: #0089ff;
|
border-top-color: #0089ff;
|
||||||
|
background-color: #353535;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div > div.count {
|
#titles > button > div.count {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -343,16 +343,17 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
border-color: #999;
|
border-color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:not(.selected) {
|
#titles > button:not(.selected) {
|
||||||
background-color: #e6e6e6;
|
background-color: #e6e6e6;
|
||||||
border-top-color: #e6e6e6;
|
border-top-color: #e6e6e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div:hover, #titles > div.selected {
|
#titles > button:hover, #titles > button.selected {
|
||||||
border-top-color: #0089ff;
|
border-top-color: #0089ff;
|
||||||
|
background-color: #353535;
|
||||||
}
|
}
|
||||||
|
|
||||||
#titles > div > div.count {
|
#titles > button > div.count {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue