From f71a240239b2d01b5cf96531f6d4f90b4e68e4f4 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Fri, 7 Jun 2024 17:57:54 +0000
Subject: [PATCH] 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>
---
 templates/install.tmpl  | 16 +++++++---------
 web_src/css/install.css | 13 ++++++++++---
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/templates/install.tmpl b/templates/install.tmpl
index 29eb44526a..400c565b34 100644
--- a/templates/install.tmpl
+++ b/templates/install.tmpl
@@ -171,8 +171,8 @@
 					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
 
 					<!-- Email -->
-					<details class="optional field">
-						<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}">
+					<details class="collapsible optional field">
+						<summary class="tw-py-2{{if .Err_SMTP}} text red{{end}}">
 							{{ctx.Locale.Tr "install.email_title"}}
 						</summary>
 						<div class="inline field">
@@ -211,8 +211,8 @@
 					</details>
 
 					<!-- Server and other services -->
-					<details class="optional field">
-						<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}">
+					<details class="collapsible optional field">
+						<summary class="tw-py-2{{if .Err_Services}} text red{{end}}">
 							{{ctx.Locale.Tr "install.server_service_title"}}
 						</summary>
 						<div class="inline field">
@@ -314,8 +314,8 @@
 					</details>
 
 					<!-- Admin -->
-					<details class="optional field">
-						<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}">
+					<details class="collapsible optional field">
+						<summary class="tw-py-2{{if .Err_Admin}} text red{{end}}">
 							{{ctx.Locale.Tr "install.admin_title"}}
 						</summary>
 						<p class="center">{{ctx.Locale.Tr "install.admin_setting.description"}}</p>
@@ -352,10 +352,8 @@
 					</div>
 					{{end}}
 
+					<p>{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}</p>
 					<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">
 							<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
 						</div>
diff --git a/web_src/css/install.css b/web_src/css/install.css
index 7ab729405e..df2a7cb53f 100644
--- a/web_src/css/install.css
+++ b/web_src/css/install.css
@@ -25,9 +25,6 @@
 .page-content.install form.ui.form details.optional.field[open] {
   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 {
   margin-bottom: 10px;
 }
@@ -53,3 +50,13 @@
   text-align: left;
   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;
+}