Skip to content

Commit e2e326f

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authored
Fix some UI problems (install/checkbox) (#30854) (#30870)
Backport #30854 by wxiaoguang Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
1 parent 2252a7b commit e2e326f

File tree

4 files changed

+160
-158
lines changed

4 files changed

+160
-158
lines changed

‎templates/install.tmpl

+148-146
Original file line numberDiff line numberDiff line change
@@ -157,168 +157,171 @@
157157

158158
<!-- Optional Settings -->
159159
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
160-
161-
<!-- Email -->
162-
<details class="optional field">
163-
<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}">
164-
{{ctx.Locale.Tr "install.email_title"}}
165-
</summary>
166-
<div class="inline field">
167-
<label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label>
168-
<input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}">
169-
</div>
170-
<div class="inline field">
171-
<label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
172-
<input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
173-
</div>
174-
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
175-
<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
176-
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
177-
<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
178-
</div>
179-
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
180-
<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
181-
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
182-
</div>
183-
<div class="inline field">
184-
<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
185-
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
186-
</div>
187-
<div class="inline field">
188-
<div class="ui checkbox">
189-
<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
190-
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
160+
<div>
161+
<!-- Email -->
162+
<details class="optional field">
163+
<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}">
164+
{{ctx.Locale.Tr "install.email_title"}}
165+
</summary>
166+
<div class="inline field">
167+
<label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label>
168+
<input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}">
191169
</div>
192-
</div>
193-
<div class="inline field">
194-
<div class="ui checkbox">
195-
<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
196-
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
170+
<div class="inline field">
171+
<label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
172+
<input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
197173
</div>
198-
</div>
199-
</details>
174+
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
175+
<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
176+
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
177+
<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
178+
</div>
179+
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
180+
<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
181+
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
182+
</div>
183+
<div class="inline field">
184+
<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
185+
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
186+
</div>
187+
<div class="inline field">
188+
<div class="ui checkbox">
189+
<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
190+
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
191+
</div>
192+
</div>
193+
<div class="inline field">
194+
<div class="ui checkbox">
195+
<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
196+
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
197+
</div>
198+
</div>
199+
</details>
200200

201-
<!-- Server and other services -->
202-
<details class="optional field">
203-
<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}">
204-
{{ctx.Locale.Tr "install.server_service_title"}}
205-
</summary>
206-
<div class="inline field">
207-
<div class="ui checkbox" id="offline-mode">
208-
<label data-tooltip-content="{{ctx.Locale.Tr "install.offline_mode_popup"}}">{{ctx.Locale.Tr "install.offline_mode"}}</label>
209-
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
201+
<!-- Server and other services -->
202+
<details class="optional field">
203+
<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}">
204+
{{ctx.Locale.Tr "install.server_service_title"}}
205+
</summary>
206+
<div class="inline field">
207+
<div class="ui checkbox" id="offline-mode">
208+
<label data-tooltip-content="{{ctx.Locale.Tr "install.offline_mode_popup"}}">{{ctx.Locale.Tr "install.offline_mode"}}</label>
209+
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
210+
</div>
210211
</div>
211-
</div>
212-
<div class="inline field">
213-
<div class="ui checkbox" id="disable-gravatar">
214-
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_gravatar_popup"}}">{{ctx.Locale.Tr "install.disable_gravatar"}}</label>
215-
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
212+
<div class="inline field">
213+
<div class="ui checkbox" id="disable-gravatar">
214+
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_gravatar_popup"}}">{{ctx.Locale.Tr "install.disable_gravatar"}}</label>
215+
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
216+
</div>
216217
</div>
217-
</div>
218-
<div class="inline field">
219-
<div class="ui checkbox" id="federated-avatar-lookup">
220-
<label data-tooltip-content="{{ctx.Locale.Tr "install.federated_avatar_lookup_popup"}}">{{ctx.Locale.Tr "install.federated_avatar_lookup"}}</label>
221-
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
218+
<div class="inline field">
219+
<div class="ui checkbox" id="federated-avatar-lookup">
220+
<label data-tooltip-content="{{ctx.Locale.Tr "install.federated_avatar_lookup_popup"}}">{{ctx.Locale.Tr "install.federated_avatar_lookup"}}</label>
221+
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
222+
</div>
222223
</div>
223-
</div>
224-
<div class="inline field">
225-
<div class="ui checkbox" id="enable-openid-signin">
226-
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signin_popup"}}">{{ctx.Locale.Tr "install.openid_signin"}}</label>
227-
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
224+
<div class="inline field">
225+
<div class="ui checkbox" id="enable-openid-signin">
226+
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signin_popup"}}">{{ctx.Locale.Tr "install.openid_signin"}}</label>
227+
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
228+
</div>
228229
</div>
229-
</div>
230-
<div class="inline field">
231-
<div class="ui checkbox" id="disable-registration">
232-
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_registration_popup"}}">{{ctx.Locale.Tr "install.disable_registration"}}</label>
233-
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
230+
<div class="inline field">
231+
<div class="ui checkbox" id="disable-registration">
232+
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_registration_popup"}}">{{ctx.Locale.Tr "install.disable_registration"}}</label>
233+
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
234+
</div>
234235
</div>
235-
</div>
236-
<div class="inline field">
237-
<div class="ui checkbox" id="allow-only-external-registration">
238-
<label data-tooltip-content="{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}">{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}</label>
239-
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
236+
<div class="inline field">
237+
<div class="ui checkbox" id="allow-only-external-registration">
238+
<label data-tooltip-content="{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}">{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}</label>
239+
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
240+
</div>
240241
</div>
241-
</div>
242-
<div class="inline field">
243-
<div class="ui checkbox" id="enable-openid-signup">
244-
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signup_popup"}}">{{ctx.Locale.Tr "install.openid_signup"}}</label>
245-
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
242+
<div class="inline field">
243+
<div class="ui checkbox" id="enable-openid-signup">
244+
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signup_popup"}}">{{ctx.Locale.Tr "install.openid_signup"}}</label>
245+
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
246+
</div>
246247
</div>
247-
</div>
248-
<div class="inline field">
249-
<div class="ui checkbox" id="enable-captcha">
250-
<label data-tooltip-content="{{ctx.Locale.Tr "install.enable_captcha_popup"}}">{{ctx.Locale.Tr "install.enable_captcha"}}</label>
251-
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
248+
<div class="inline field">
249+
<div class="ui checkbox" id="enable-captcha">
250+
<label data-tooltip-content="{{ctx.Locale.Tr "install.enable_captcha_popup"}}">{{ctx.Locale.Tr "install.enable_captcha"}}</label>
251+
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
252+
</div>
252253
</div>
253-
</div>
254-
<div class="inline field">
255-
<div class="ui checkbox">
256-
<label data-tooltip-content="{{ctx.Locale.Tr "install.require_sign_in_view_popup"}}">{{ctx.Locale.Tr "install.require_sign_in_view"}}</label>
257-
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
254+
<div class="inline field">
255+
<div class="ui checkbox">
256+
<label data-tooltip-content="{{ctx.Locale.Tr "install.require_sign_in_view_popup"}}">{{ctx.Locale.Tr "install.require_sign_in_view"}}</label>
257+
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
258+
</div>
258259
</div>
259-
</div>
260-
<div class="inline field">
261-
<div class="ui checkbox">
262-
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_keep_email_private_popup"}}">{{ctx.Locale.Tr "install.default_keep_email_private"}}</label>
263-
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
260+
<div class="inline field">
261+
<div class="ui checkbox">
262+
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_keep_email_private_popup"}}">{{ctx.Locale.Tr "install.default_keep_email_private"}}</label>
263+
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
264+
</div>
264265
</div>
265-
</div>
266-
<div class="inline field">
267-
<div class="ui checkbox">
268-
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_allow_create_organization_popup"}}">{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label>
269-
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
266+
<div class="inline field">
267+
<div class="ui checkbox">
268+
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_allow_create_organization_popup"}}">{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label>
269+
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
270+
</div>
270271
</div>
271-
</div>
272-
<div class="inline field">
273-
<div class="ui checkbox">
274-
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_enable_timetracking_popup"}}">{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label>
275-
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
272+
<div class="inline field">
273+
<div class="ui checkbox">
274+
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_enable_timetracking_popup"}}">{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label>
275+
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
276+
</div>
276277
</div>
277-
</div>
278-
<div class="inline field">
279-
<label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label>
280-
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
281-
<span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span>
282-
</div>
283-
<div class="inline field">
284-
<label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label>
285-
<div class="ui selection dropdown">
286-
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
287-
<div class="text">{{.password_algorithm}}</div>
288-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
289-
<div class="menu">
290-
{{range .PasswordHashAlgorithms}}
291-
<div class="item" data-value="{{.}}">{{.}}</div>
292-
{{end}}
278+
<div class="inline field">
279+
<label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label>
280+
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
281+
<span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span>
282+
</div>
283+
<div class="inline field">
284+
<label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label>
285+
<div class="ui selection dropdown">
286+
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
287+
<div class="text">{{.password_algorithm}}</div>
288+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
289+
<div class="menu">
290+
{{range .PasswordHashAlgorithms}}
291+
<div class="item" data-value="{{.}}">{{.}}</div>
292+
{{end}}
293+
</div>
293294
</div>
295+
<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span>
294296
</div>
295-
<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span>
296-
</div>
297-
</details>
297+
</details>
298298

299-
<!-- Admin -->
300-
<details class="optional field">
301-
<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}">
302-
{{ctx.Locale.Tr "install.admin_title"}}
303-
</summary>
304-
<p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p>
305-
<div class="inline field {{if .Err_AdminName}}error{{end}}">
306-
<label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label>
307-
<input id="admin_name" name="admin_name" value="{{.admin_name}}">
308-
</div>
309-
<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
310-
<label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label>
311-
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
312-
</div>
313-
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
314-
<label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label>
315-
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
316-
</div>
317-
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
318-
<label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label>
319-
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
320-
</div>
321-
</details>
299+
<!-- Admin -->
300+
<details class="optional field">
301+
<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}">
302+
{{ctx.Locale.Tr "install.admin_title"}}
303+
</summary>
304+
<p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p>
305+
<div class="inline field {{if .Err_AdminName}}error{{end}}">
306+
<label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label>
307+
<input id="admin_name" name="admin_name" value="{{.admin_name}}">
308+
</div>
309+
<div class="inline field {{if .Err_AdminEmail}}error{{end}}">
310+
<label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label>
311+
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
312+
</div>
313+
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
314+
<label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label>
315+
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
316+
</div>
317+
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
318+
<label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label>
319+
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
320+
</div>
321+
</details>
322+
</div>
323+
324+
<div class="divider"></div>
322325

323326
{{if .EnvConfigKeys}}
324327
<!-- Environment Config -->
@@ -333,12 +336,11 @@
333336
</div>
334337
{{end}}
335338

336-
<div class="divider"></div>
337339
<div class="inline field">
338340
<div class="right-content">
339341
These configuration options will be written into: {{.CustomConfFile}}
340342
</div>
341-
<div class="right-content tw-mt-2">
343+
<div class="tw-mt-4 tw-mb-2 tw-text-center">
342344
<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
343345
</div>
344346
</div>

‎web_src/css/install.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313
.page-content.install .ui.form .field > .help,
1414
.page-content.install .ui.form .field > .ui.checkbox:first-child,
1515
.page-content.install .ui.form .field > .right-content {
16-
margin-left: 30%;
17-
padding-left: 5px;
16+
margin-left: calc(30% + 5px);
1817
width: auto;
1918
}
2019

@@ -24,10 +23,11 @@
2423
}
2524

2625
.page-content.install form.ui.form details.optional.field[open] {
27-
border-bottom: 1px dashed var(--color-secondary);
2826
padding-bottom: 10px;
2927
}
30-
28+
.page-content.install form.ui.form details.optional.field[open]:not(:last-child) {
29+
border-bottom: 1px dashed var(--color-secondary);
30+
}
3131
.page-content.install form.ui.form details.optional.field[open] summary {
3232
margin-bottom: 10px;
3333
}

‎web_src/css/modules/checkbox.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ input[type="radio"] {
4141

4242
.ui.checkbox label,
4343
.ui.radio.checkbox label {
44-
margin-left: 1.85714em;
44+
margin-left: 20px;
4545
}
4646

4747
.ui.checkbox + label {

0 commit comments

Comments
 (0)