1
Fork 0

Make search results tab and help button focusable with keyboard

This commit is contained in:
Guillaume Gomez 2020-12-10 11:38:12 +01:00
parent e413d89aa7
commit 2363a20b98
6 changed files with 23 additions and 20 deletions

View file

@ -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\" \

View file

@ -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) {

View file

@ -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;
} }

View file

@ -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 {}

View file

@ -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;
} }

View file

@ -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;
} }