TudbuT/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

UI improvements to optional sections in installation page (#4062)

Browse source 
Currently the collapsed sections on the installation page have bad visibility, clickability and don't look good. This commit attempts to improve this. It is also worth noting that the amount of these sections might increase.

### Changes

* make custom style for these collapsible sections of the form. This is not a standard design to Forgejo, but we also don't have forms this large anywhere else, and it's fit in a few small CSS rules, so I think that's justified. I'm curious how it looks to others visually, good or bad.
* improve the positioning of the installation location hint.
* remove very rare occasion of dashed horizontal divider as this rule is no longer needed with the new borders. It was [added](c16ae1ab39 (diff-f8dad1e2c95a9e959d4688c763f3e02d1878c8e0)) just a month ago and had a visual bug with duplicated dividers.

### Preview

|Before|After|
|-|-|
|![](/attachments/c5360e33-1694-4e75-bedc-b24717172ee9)|![](/attachments/2363e1ac-b4cb-4d96-9b6a-4315c1bd6416)|

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4062
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
0ko 2024-06-07 17:57:54 +00:00
parent f015846c11
commit f71a240239
2 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
templates/install.tmpl
View file

@ -171,8 +171,8 @@
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4> <h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
<!-- Email --> <!-- Email -->
<details class="optional field"> <details class="collapsible optional field">
<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}"> <summary class="tw-py-2{{if .Err_SMTP}} text red{{end}}">
{{ctx.Locale.Tr "install.email_title"}} {{ctx.Locale.Tr "install.email_title"}}
</summary> </summary>
<div class="inline field"> <div class="inline field">
@ -211,8 +211,8 @@
</details> </details>
<!-- Server and other services --> <!-- Server and other services -->
<details class="optional field"> <details class="collapsible optional field">
<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}"> <summary class="tw-py-2{{if .Err_Services}} text red{{end}}">
{{ctx.Locale.Tr "install.server_service_title"}} {{ctx.Locale.Tr "install.server_service_title"}}
</summary> </summary>
<div class="inline field"> <div class="inline field">
@ -314,8 +314,8 @@
</details> </details>
<!-- Admin --> <!-- Admin -->
<details class="optional field"> <details class="collapsible optional field">
<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}"> <summary class="tw-py-2{{if .Err_Admin}} text red{{end}}">
{{ctx.Locale.Tr "install.admin_title"}} {{ctx.Locale.Tr "install.admin_title"}}
</summary> </summary>
<p class="center">{{ctx.Locale.Tr "install.admin_setting.description"}}</p> <p class="center">{{ctx.Locale.Tr "install.admin_setting.description"}}</p>
@ -352,10 +352,8 @@
</div> </div>
{{end}} {{end}}
<p>{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}</p>
<div class="inline field"> <div class="inline field">
<div class="right-content">
{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}
</div>
<div class="tw-mt-4 tw-mb-2 tw-text-center"> <div class="tw-mt-4 tw-mb-2 tw-text-center">
<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button> <button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
</div> </div>

13
web_src/css/install.css
View file

@ -25,9 +25,6 @@
.page-content.install form.ui.form details.optional.field[open] { .page-content.install form.ui.form details.optional.field[open] {
padding-bottom: 10px; padding-bottom: 10px;
} }
.page-content.install form.ui.form details.optional.field[open]:not(:last-child) {
border-bottom: 1px dashed var(--color-secondary);
}
.page-content.install form.ui.form details.optional.field[open] summary { .page-content.install form.ui.form details.optional.field[open] summary {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -53,3 +50,13 @@
text-align: left; text-align: left;
margin: 10px auto; margin: 10px auto;
} }
.page-content.install details.collapsible {
border: 1px solid var(--color-light-border);
border-radius: 0.28571429rem;
}
.page-content.install .collapsible summary {
background: transparent;
margin: auto;
text-align: center;
}