Skip to content

Commit cc4f804

Browse files
GuillaumeGomezGuillaumeGomez
committed
Move help popup into a pocket menu as well
1 parent 10f4ce3 commit cc4f804

File tree

8 files changed

+173
-159
lines changed

8 files changed

+173
-159
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

+41-33
Original file line numberDiff line numberDiff line change
@@ -979,60 +979,69 @@ table,
979979
font-weight: normal;
980980
}
981981

982-
body.blur > :not(#help) {
983-
filter: blur(8px);
984-
-webkit-filter: blur(8px);
985-
opacity: .7;
982+
.popover {
983+
font-size: 1rem;
984+
position: absolute;
985+
right: 0;
986+
z-index: 2;
987+
display: block;
988+
margin-top: 7px;
989+
border-radius: 3px;
990+
border: 1px solid;
991+
font-size: 1rem;
986992
}
987993

988-
#help {
989-
width: 100%;
990-
height: 100vh;
991-
position: fixed;
992-
top: 0;
993-
left: 0;
994-
display: flex;
995-
justify-content: center;
996-
align-items: center;
994+
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
995+
.popover::before {
996+
content: '';
997+
position: absolute;
998+
right: 11px;
999+
border: solid;
1000+
border-width: 1px 1px 0 0;
1001+
display: inline-block;
1002+
padding: 4px;
1003+
transform: rotate(-45deg);
1004+
top: -5px;
9971005
}
998-
#help > div {
999-
flex: 0 0 auto;
1000-
box-shadow: 0 0 6px rgba(0,0,0,.2);
1001-
width: 550px;
1002-
height: auto;
1003-
border: 1px solid;
1006+
1007+
#help-button .popover {
1008+
max-width: 600px;
10041009
}
1005-
#help dt {
1010+
1011+
#help-button .popover::before {
1012+
right: 48px;
1013+
}
1014+
1015+
#help-button dt {
10061016
float: left;
10071017
clear: left;
10081018
display: block;
10091019
margin-right: 0.5rem;
10101020
}
1011-
#help span.top, #help span.bottom {
1021+
#help-button span.top, #help-button span.bottom {
10121022
text-align: center;
10131023
display: block;
10141024
font-size: 1.125rem;
1015-
10161025
}
1017-
#help span.top {
1026+
#help-button span.top {
10181027
text-align: center;
10191028
display: block;
10201029
margin: 10px 0;
10211030
border-bottom: 1px solid;
10221031
padding-bottom: 4px;
10231032
margin-bottom: 6px;
10241033
}
1025-
#help span.bottom {
1034+
#help-button span.bottom {
10261035
clear: both;
10271036
border-top: 1px solid;
10281037
}
1029-
#help dd { margin: 5px 35px; }
1030-
#help .infos { padding-left: 0; }
1031-
#help h1, #help h2 { margin-top: 0; }
1032-
#help > div div {
1038+
.side-by-side {
1039+
text-align: initial;
1040+
}
1041+
.side-by-side > div {
10331042
width: 50%;
10341043
float: left;
1035-
padding: 0 20px 20px 17px;;
1044+
padding: 0 20px 20px 17px;
10361045
}
10371046

10381047
.item-info .stab {
@@ -1387,7 +1396,7 @@ pre.rust {
13871396
#copy-path {
13881397
height: 34px;
13891398
}
1390-
#settings-menu > a, #help-button, #copy-path {
1399+
#settings-menu > a, #help-button > button, #copy-path {
13911400
padding: 5px;
13921401
width: 33px;
13931402
border: 1px solid;
@@ -1397,9 +1406,8 @@ pre.rust {
13971406
#settings-menu {
13981407
padding: 0;
13991408
}
1400-
#settings-menu > a {
1409+
#settings-menu > a, #help-button > button {
14011410
padding: 5px;
1402-
width: 100%;
14031411
height: 100%;
14041412
display: block;
14051413
}
@@ -1416,7 +1424,7 @@ pre.rust {
14161424
animation: rotating 2s linear infinite;
14171425
}
14181426

1419-
#help-button {
1427+
#help-button > button {
14201428
font-family: "Fira Sans", Arial, sans-serif;
14211429
text-align: center;
14221430
/* Rare exception to specifying font sizes in rem. Since this is acting

‎src/librustdoc/html/static/css/settings.css

-21
Original file line numberDiff line numberDiff line change
@@ -86,27 +86,6 @@ input:checked + .slider:before {
8686
display: block;
8787
}
8888

89-
div#settings {
90-
position: absolute;
91-
right: 0;
92-
z-index: 1;
93-
display: block;
94-
margin-top: 7px;
95-
border-radius: 3px;
96-
border: 1px solid;
97-
}
9889
#settings .setting-line {
9990
margin: 1.2em 0.6em;
10091
}
101-
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
102-
div#settings::before {
103-
content: '';
104-
position: absolute;
105-
right: 11px;
106-
border: solid;
107-
border-width: 1px 1px 0 0;
108-
display: inline-block;
109-
padding: 4px;
110-
transform: rotate(-45deg);
111-
top: -5px;
112-
}

‎src/librustdoc/html/static/css/themes/ayu.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
55

66
/* General structure and fonts */
77

8-
body, #settings-menu #settings, #settings-menu #settings::before {
8+
body, .popover, .popover::before {
99
background-color: #0f1419;
1010
color: #c5c5c5;
1111
}
@@ -567,7 +567,7 @@ kbd {
567567
box-shadow: inset 0 -1px 0 #5c6773;
568568
}
569569

570-
#settings-menu > a, #help-button {
570+
#settings-menu > a, #help-button > button {
571571
border-color: #5c6773;
572572
background-color: #0f1419;
573573
color: #fff;
@@ -577,7 +577,8 @@ kbd {
577577
filter: invert(100);
578578
}
579579

580-
#settings-menu #settings, #settings-menu #settings::before {
580+
.popover, .popover::before,
581+
#help-button span.top, #help-button span.bottom {
581582
border-color: #5c6773;
582583
}
583584

@@ -592,7 +593,7 @@ kbd {
592593
}
593594

594595
#settings-menu > a:hover, #settings-menu > a:focus,
595-
#help-button:hover, #help-button:focus {
596+
#help-button > button:hover, #help-button > button:focus {
596597
border-color: #e0e0e0;
597598
}
598599

‎src/librustdoc/html/static/css/themes/dark.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body, #settings-menu #settings, #settings-menu #settings::before {
1+
body, .popover, .popover::before {
22
background-color: #353535;
33
color: #ddd;
44
}
@@ -442,18 +442,19 @@ kbd {
442442
box-shadow: inset 0 -1px 0 #c6cbd1;
443443
}
444444

445-
#settings-menu > a, #help-button {
445+
#settings-menu > a, #help-button > button {
446446
border-color: #e0e0e0;
447447
background: #f0f0f0;
448448
color: #000;
449449
}
450450

451451
#settings-menu > a:hover, #settings-menu > a:focus,
452-
#help-button:hover, #help-button:focus {
452+
#help-button > button:hover, #help-button > button:focus {
453453
border-color: #ffb900;
454454
}
455455

456-
#settings-menu #settings, #settings-menu #settings::before {
456+
.popover, .popover::before,
457+
#help-button span.top, #help-button span.bottom {
457458
border-color: #d2d2d2;
458459
}
459460

‎src/librustdoc/html/static/css/themes/light.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* General structure and fonts */
22

3-
body, #settings-menu #settings, #settings-menu #settings::before {
3+
body, .popover, .popover::before {
44
background-color: white;
55
color: black;
66
}
@@ -427,17 +427,18 @@ kbd {
427427
box-shadow: inset 0 -1px 0 #c6cbd1;
428428
}
429429

430-
#settings-menu > a, #help-button {
430+
#settings-menu > a, #help-button > button {
431431
border-color: #e0e0e0;
432432
background-color: #fff;
433433
}
434434

435435
#settings-menu > a:hover, #settings-menu > a:focus,
436-
#help-button:hover, #help-button:focus {
436+
#help-button > button:hover, #help-button > button:focus {
437437
border-color: #717171;
438438
}
439439

440-
#settings-menu #settings, #settings-menu #settings::before {
440+
.popover, .popover::before,
441+
#help-button span.top, #help-button span.bottom {
441442
border-color: #DDDDDD;
442443
}
443444

0 commit comments

Comments
 (0)