Skip to content

Commit 1c2e6b6

Browse files
compiler-errorscompiler-errors
authored
Rollup merge of rust-lang#98297 - GuillaumeGomez:help-pocket-menu, r=notriddle
Transform help popup into a pocket menu Just like we moved the settings menu into a "pocket menu", it's doing the same to the help popup. You can test it [here](https://rustdoc.crud.net/imperio/help-pocket-menu/doc/foo/index.html) and here is a screenshot: ![Screenshot from 2022-06-20 20-58-29](https://user-images.githubusercontent.com/3050060/174663718-538e9d11-3bf9-48b2-8909-f9bfe75af135.png) r? ``@jsha``
2 parents be2ef3e + e4b2b41 commit 1c2e6b6

File tree

11 files changed

+248
-184
lines changed

11 files changed

+248
-184
lines changed

Diff for: ‎src/librustdoc/html/static/css/rustdoc.css

+41-33
Original file line numberDiff line numberDiff line change
@@ -983,60 +983,69 @@ table,
983983
font-weight: normal;
984984
}
985985

986-
body.blur > :not(#help) {
987-
filter: blur(8px);
988-
-webkit-filter: blur(8px);
989-
opacity: .7;
986+
.popover {
987+
font-size: 1rem;
988+
position: absolute;
989+
right: 0;
990+
z-index: 2;
991+
display: block;
992+
margin-top: 7px;
993+
border-radius: 3px;
994+
border: 1px solid;
995+
font-size: 1rem;
990996
}
991997

992-
#help {
993-
width: 100%;
994-
height: 100vh;
995-
position: fixed;
996-
top: 0;
997-
left: 0;
998-
display: flex;
999-
justify-content: center;
1000-
align-items: center;
998+
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
999+
.popover::before {
1000+
content: '';
1001+
position: absolute;
1002+
right: 11px;
1003+
border: solid;
1004+
border-width: 1px 1px 0 0;
1005+
display: inline-block;
1006+
padding: 4px;
1007+
transform: rotate(-45deg);
1008+
top: -5px;
10011009
}
1002-
#help > div {
1003-
flex: 0 0 auto;
1004-
box-shadow: 0 0 6px rgba(0,0,0,.2);
1005-
width: 550px;
1006-
height: auto;
1007-
border: 1px solid;
1010+
1011+
#help-button .popover {
1012+
max-width: 600px;
10081013
}
1009-
#help dt {
1014+
1015+
#help-button .popover::before {
1016+
right: 48px;
1017+
}
1018+
1019+
#help-button dt {
10101020
float: left;
10111021
clear: left;
10121022
display: block;
10131023
margin-right: 0.5rem;
10141024
}
1015-
#help span.top, #help span.bottom {
1025+
#help-button span.top, #help-button span.bottom {
10161026
text-align: center;
10171027
display: block;
10181028
font-size: 1.125rem;
1019-
10201029
}
1021-
#help span.top {
1030+
#help-button span.top {
10221031
text-align: center;
10231032
display: block;
10241033
margin: 10px 0;
10251034
border-bottom: 1px solid;
10261035
padding-bottom: 4px;
10271036
margin-bottom: 6px;
10281037
}
1029-
#help span.bottom {
1038+
#help-button span.bottom {
10301039
clear: both;
10311040
border-top: 1px solid;
10321041
}
1033-
#help dd { margin: 5px 35px; }
1034-
#help .infos { padding-left: 0; }
1035-
#help h1, #help h2 { margin-top: 0; }
1036-
#help > div div {
1042+
.side-by-side {
1043+
text-align: initial;
1044+
}
1045+
.side-by-side > div {
10371046
width: 50%;
10381047
float: left;
1039-
padding: 0 20px 20px 17px;;
1048+
padding: 0 20px 20px 17px;
10401049
}
10411050

10421051
.item-info .stab {
@@ -1391,7 +1400,7 @@ pre.rust {
13911400
#copy-path {
13921401
height: 34px;
13931402
}
1394-
#settings-menu > a, #help-button, #copy-path {
1403+
#settings-menu > a, #help-button > button, #copy-path {
13951404
padding: 5px;
13961405
width: 33px;
13971406
border: 1px solid;
@@ -1401,9 +1410,8 @@ pre.rust {
14011410
#settings-menu {
14021411
padding: 0;
14031412
}
1404-
#settings-menu > a {
1413+
#settings-menu > a, #help-button > button {
14051414
padding: 5px;
1406-
width: 100%;
14071415
height: 100%;
14081416
display: block;
14091417
}
@@ -1420,7 +1428,7 @@ pre.rust {
14201428
animation: rotating 2s linear infinite;
14211429
}
14221430

1423-
#help-button {
1431+
#help-button > button {
14241432
font-family: "Fira Sans", Arial, sans-serif;
14251433
text-align: center;
14261434
/* Rare exception to specifying font sizes in rem. Since this is acting

Diff for: ‎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-
}

Diff for: ‎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

Diff for: ‎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

Diff for: ‎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)