From 3e8618949e088cf3606a0b2ad4828953936d4247 Mon Sep 17 00:00:00 2001 From: zeripath Date: Thu, 3 Nov 2022 20:41:01 +0000 Subject: [PATCH] Clean up formatting on install page (#21668) The install page has been somewhat inconsistently styled for a while. This PR simplifies and standardises the styling of these fields makes things line up better across widths. Replace #21660 Signed-off-by: Andrew Thornton Old: ![Screenshot from 2022-11-02 23-07-05](https://user-images.githubusercontent.com/1824502/199619007-4a6b66c5-e19c-4d29-b71b-9aa73f2789ca.png) New: ![Screenshot from 2022-11-02 23-04-28](https://user-images.githubusercontent.com/1824502/199618779-370f88e7-b590-4abd-afb9-b66cc3194a5d.png) Signed-off-by: Andrew Thornton --- templates/install.tmpl | 30 ++++++++++----------- web_src/less/_install.less | 53 ++++++++++++++++++++++++++------------ 2 files changed, 52 insertions(+), 31 deletions(-) diff --git a/templates/install.tmpl b/templates/install.tmpl index 8d6918e6a2..0625f43cc4 100644 --- a/templates/install.tmpl +++ b/templates/install.tmpl @@ -163,8 +163,8 @@ {{.locale.Tr "install.log_root_path_helper"}}
-
+
{{.locale.Tr "install.enable_update_checker_helper"}} @@ -202,13 +202,13 @@
- +
- +
@@ -221,73 +221,73 @@
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
diff --git a/web_src/less/_install.less b/web_src/less/_install.less index 5769ef68ba..515d727f8a 100644 --- a/web_src/less/_install.less +++ b/web_src/less/_install.less @@ -1,36 +1,57 @@ .page-content.install { padding-top: 45px; - form { - @input-padding: 320px !important; + form.ui.form { + @input-padding: 30%; - .inline.field label { + .inline.field > label { text-align: right; width: @input-padding; + padding-right: 10px; + margin-right: 0; + } + + .inline.field > .ui.checkbox:first-child { + margin-left: @input-padding; + padding-left: 5px; + label { + width: auto; + } + } + + .title { + margin-left: @input-padding; + padding-left: 5px; } input { - width: 35% !important; + width: 60%; + } + + details.optional.field { + &[open] { + border-bottom: 1px solid var(--color-secondary); + padding-bottom: 10px; + + summary { + margin-bottom: 10px; + } + } + + * { + box-sizing: border-box; + } } .field { text-align: left; .help { - margin-left: @input-padding+15px; + margin-left: @input-padding; + padding-left: 5px; + width: 60%; } - &.optional { - .title { - margin-left: 38%; - } - .checkbox { - margin-left: 40% !important; - label { - width: auto !important; - } - } - } } }