mathieu/os-rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve wrapping on settings page

Browse source 
Previously, the radio button choices for themes would wrap awkwardly on
narrow screens. With this change, the group of choices will prefer
bumping down to the next line together, leaving the setting name on its
own line.

Also fix some minor spacing issues:

 - Align the setting name vertically with the radio button choices.
 - Use margin instead of padding for most spacing choices.
 - Use no margin/padding on the right-hand side.
This commit is contained in:
Jacob Hoffman-Andrews 2022-01-28 05:21:34 -08:00
parent e0e70c0c2c
commit c790128c3c
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/librustdoc/html/render/mod.rs
View file

@ -376,7 +376,7 @@ impl Setting {
description,
),
Setting::Select { js_data_name, description, default_value, ref options } => format!(
"<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span>{}</div></div>",
"<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span><div class=\"choices\">{}</div></div></div>",
js_data_name,
description,
options

16
src/librustdoc/html/static/css/settings.css
View file

@ -1,5 +1,5 @@
.setting-line {
padding: 5px;
margin: 0.6em 0 0.6em 0.3em;
position: relative;
}
@ -17,17 +17,16 @@
border-bottom: 1px solid;
}
.setting-line .radio-line {
.setting-line .radio-line,
.setting-line .choices {
display: flex;
flex-wrap: wrap;
}
.setting-line .radio-line > * {
padding: 0.3em;
}
.setting-line .radio-line .setting-name {
flex-grow: 1;
margin-top: auto;
margin-bottom: auto;
}
.setting-line .radio-line input {
@ -38,7 +37,10 @@
border-radius: 0.1em;
border: 1px solid;
margin-left: 0.5em;
min-width: 3.5em;
margin-top: 0.1em;
margin-bottom: 0.1em;
min-width: 3.8em;
padding: 0.3em;
}
.toggle {

6
src/test/rustdoc-gui/mobile.goml
View file

@ -15,3 +15,9 @@ assert-css: (".content .out-of-band .since::before", { "content": "\"Since \"" }
size: (1000, 1000)
assert-css-false: (".content .out-of-band .since::before", { "content": "\"Since \"" })
// On the settings page, the theme buttons should not line-wrap. Instead, they should
// all be placed as a group on a line below the setting name "Theme."
goto: file://|DOC_PATH|/settings.html
size: (400, 600)
compare-elements-position-near-false: ("#preferred-light-theme .setting-name", "#preferred-light-theme .choice", {"y": 16})