oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

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](https://codeberg.org/forgejo/forgejo/commit/c16ae1ab395dd31c3a1e35f3c21ce656446808ea#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>

0ko f71a2402 f015846c

+17 -12
+7 -9
templates/install.tmpl
··· 171 171 <h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4> 172 172 173 173 <!-- Email --> 174 - <details class="optional field"> 175 - <summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}"> 174 + <details class="collapsible optional field"> 175 + <summary class="tw-py-2{{if .Err_SMTP}} text red{{end}}"> 176 176 {{ctx.Locale.Tr "install.email_title"}} 177 177 </summary> 178 178 <div class="inline field"> ··· 211 211 </details> 212 212 213 213 <!-- Server and other services --> 214 - <details class="optional field"> 215 - <summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}"> 214 + <details class="collapsible optional field"> 215 + <summary class="tw-py-2{{if .Err_Services}} text red{{end}}"> 216 216 {{ctx.Locale.Tr "install.server_service_title"}} 217 217 </summary> 218 218 <div class="inline field"> ··· 314 314 </details> 315 315 316 316 <!-- Admin --> 317 - <details class="optional field"> 318 - <summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}"> 317 + <details class="collapsible optional field"> 318 + <summary class="tw-py-2{{if .Err_Admin}} text red{{end}}"> 319 319 {{ctx.Locale.Tr "install.admin_title"}} 320 320 </summary> 321 321 <p class="center">{{ctx.Locale.Tr "install.admin_setting.description"}}</p> ··· 352 352 </div> 353 353 {{end}} 354 354 355 + <p>{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}</p> 355 356 <div class="inline field"> 356 - <div class="right-content"> 357 - {{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}} 358 - </div> 359 357 <div class="tw-mt-4 tw-mb-2 tw-text-center"> 360 358 <button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button> 361 359 </div>
+10 -3
web_src/css/install.css
··· 25 25 .page-content.install form.ui.form details.optional.field[open] { 26 26 padding-bottom: 10px; 27 27 } 28 - .page-content.install form.ui.form details.optional.field[open]:not(:last-child) { 29 - border-bottom: 1px dashed var(--color-secondary); 30 - } 31 28 .page-content.install form.ui.form details.optional.field[open] summary { 32 29 margin-bottom: 10px; 33 30 } ··· 53 50 text-align: left; 54 51 margin: 10px auto; 55 52 } 53 + 54 + .page-content.install details.collapsible { 55 + border: 1px solid var(--color-light-border); 56 + border-radius: 0.28571429rem; 57 + } 58 + .page-content.install .collapsible summary { 59 + background: transparent; 60 + margin: auto; 61 + text-align: center; 62 + }