Skip to content

Commit 3e86189

Browse files
zeripathzeripath
authored
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 <[email protected]> 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 <[email protected]>
1 parent b6e8135 commit 3e86189

File tree

2 files changed

+52
-31
lines changed

2 files changed

+52
-31
lines changed

‎templates/install.tmpl

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@
163163
<span class="help">{{.locale.Tr "install.log_root_path_helper"}}</span>
164164
</div>
165165
<div class="inline field">
166-
<label for="enable_update_checker">{{.locale.Tr "install.enable_update_checker"}}</label>
167166
<div class="ui checkbox">
167+
<label for="enable_update_checker">{{.locale.Tr "install.enable_update_checker"}}</label>
168168
<input name="enable_update_checker" type="checkbox">
169169
</div>
170170
<span class="help">{{.locale.Tr "install.enable_update_checker_helper"}}</span>
@@ -202,13 +202,13 @@
202202
</div>
203203
<div class="inline field">
204204
<div class="ui checkbox">
205-
<label><strong>{{.locale.Tr "install.register_confirm"}}</strong></label>
205+
<label>{{.locale.Tr "install.register_confirm"}}</label>
206206
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
207207
</div>
208208
</div>
209209
<div class="inline field">
210210
<div class="ui checkbox">
211-
<label><strong>{{.locale.Tr "install.mail_notify"}}</strong></label>
211+
<label>{{.locale.Tr "install.mail_notify"}}</label>
212212
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
213213
</div>
214214
</div>
@@ -221,73 +221,73 @@
221221
</summary>
222222
<div class="inline field">
223223
<div class="ui checkbox" id="offline-mode">
224-
<label class="tooltip" data-content="{{.locale.Tr "install.offline_mode_popup"}}"><strong>{{.locale.Tr "install.offline_mode"}}</strong></label>
224+
<label class="tooltip" data-content="{{.locale.Tr "install.offline_mode_popup"}}">{{.locale.Tr "install.offline_mode"}}</label>
225225
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
226226
</div>
227227
</div>
228228
<div class="inline field">
229229
<div class="ui checkbox" id="disable-gravatar">
230-
<label class="tooltip" data-content="{{.locale.Tr "install.disable_gravatar_popup"}}"><strong>{{.locale.Tr "install.disable_gravatar"}}</strong></label>
230+
<label class="tooltip" data-content="{{.locale.Tr "install.disable_gravatar_popup"}}">{{.locale.Tr "install.disable_gravatar"}}</label>
231231
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
232232
</div>
233233
</div>
234234
<div class="inline field">
235235
<div class="ui checkbox" id="federated-avatar-lookup">
236-
<label class="tooltip" data-content="{{.locale.Tr "install.federated_avatar_lookup_popup"}}"><strong>{{.locale.Tr "install.federated_avatar_lookup"}}</strong></label>
236+
<label class="tooltip" data-content="{{.locale.Tr "install.federated_avatar_lookup_popup"}}">{{.locale.Tr "install.federated_avatar_lookup"}}</label>
237237
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
238238
</div>
239239
</div>
240240
<div class="inline field">
241241
<div class="ui checkbox" id="enable-openid-signin">
242-
<label class="tooltip" data-content="{{.locale.Tr "install.openid_signin_popup"}}"><strong>{{.locale.Tr "install.openid_signin"}}</strong></label>
242+
<label class="tooltip" data-content="{{.locale.Tr "install.openid_signin_popup"}}">{{.locale.Tr "install.openid_signin"}}</label>
243243
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
244244
</div>
245245
</div>
246246
<div class="inline field">
247247
<div class="ui checkbox" id="disable-registration">
248-
<label class="tooltip" data-content="{{.locale.Tr "install.disable_registration_popup"}}"><strong>{{.locale.Tr "install.disable_registration"}}</strong></label>
248+
<label class="tooltip" data-content="{{.locale.Tr "install.disable_registration_popup"}}">{{.locale.Tr "install.disable_registration"}}</label>
249249
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
250250
</div>
251251
</div>
252252
<div class="inline field">
253253
<div class="ui checkbox" id="allow-only-external-registration">
254-
<label class="tooltip" data-content="{{.locale.Tr "install.allow_only_external_registration_popup"}}"><strong>{{.locale.Tr "install.allow_only_external_registration_popup"}}</strong></label>
254+
<label class="tooltip" data-content="{{.locale.Tr "install.allow_only_external_registration_popup"}}">{{.locale.Tr "install.allow_only_external_registration_popup"}}</label>
255255
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
256256
</div>
257257
</div>
258258
<div class="inline field">
259259
<div class="ui checkbox" id="enable-openid-signup">
260-
<label class="tooltip" data-content="{{.locale.Tr "install.openid_signup_popup"}}"><strong>{{.locale.Tr "install.openid_signup"}}</strong></label>
260+
<label class="tooltip" data-content="{{.locale.Tr "install.openid_signup_popup"}}">{{.locale.Tr "install.openid_signup"}}</label>
261261
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
262262
</div>
263263
</div>
264264
<div class="inline field">
265265
<div class="ui checkbox" id="enable-captcha">
266-
<label class="tooltip" data-content="{{.locale.Tr "install.enable_captcha_popup"}}"><strong>{{.locale.Tr "install.enable_captcha"}}</strong></label>
266+
<label class="tooltip" data-content="{{.locale.Tr "install.enable_captcha_popup"}}">{{.locale.Tr "install.enable_captcha"}}</label>
267267
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
268268
</div>
269269
</div>
270270
<div class="inline field">
271271
<div class="ui checkbox">
272-
<label class="tooltip" data-content="{{.locale.Tr "install.require_sign_in_view_popup"}}"><strong>{{.locale.Tr "install.require_sign_in_view"}}</strong></label>
272+
<label class="tooltip" data-content="{{.locale.Tr "install.require_sign_in_view_popup"}}">{{.locale.Tr "install.require_sign_in_view"}}</label>
273273
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
274274
</div>
275275
</div>
276276
<div class="inline field">
277277
<div class="ui checkbox">
278-
<label class="tooltip" data-content="{{.locale.Tr "install.default_keep_email_private_popup"}}"><strong>{{.locale.Tr "install.default_keep_email_private"}}</strong></label>
278+
<label class="tooltip" data-content="{{.locale.Tr "install.default_keep_email_private_popup"}}">{{.locale.Tr "install.default_keep_email_private"}}</label>
279279
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
280280
</div>
281281
</div>
282282
<div class="inline field">
283283
<div class="ui checkbox">
284-
<label class="tooltip" data-content="{{.locale.Tr "install.default_allow_create_organization_popup"}}"><strong>{{.locale.Tr "install.default_allow_create_organization"}}</strong></label>
284+
<label class="tooltip" data-content="{{.locale.Tr "install.default_allow_create_organization_popup"}}">{{.locale.Tr "install.default_allow_create_organization"}}</label>
285285
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
286286
</div>
287287
</div>
288288
<div class="inline field">
289289
<div class="ui checkbox">
290-
<label class="tooltip" data-content="{{.locale.Tr "install.default_enable_timetracking_popup"}}"><strong>{{.locale.Tr "install.default_enable_timetracking"}}</strong></label>
290+
<label class="tooltip" data-content="{{.locale.Tr "install.default_enable_timetracking_popup"}}">{{.locale.Tr "install.default_enable_timetracking"}}</label>
291291
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
292292
</div>
293293
</div>

‎web_src/less/_install.less

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,57 @@
11
.page-content.install {
22
padding-top: 45px;
33

4-
form {
5-
@input-padding: 320px !important;
4+
form.ui.form {
5+
@input-padding: 30%;
66

7-
.inline.field label {
7+
.inline.field > label {
88
text-align: right;
99
width: @input-padding;
10+
padding-right: 10px;
11+
margin-right: 0;
12+
}
13+
14+
.inline.field > .ui.checkbox:first-child {
15+
margin-left: @input-padding;
16+
padding-left: 5px;
17+
label {
18+
width: auto;
19+
}
20+
}
21+
22+
.title {
23+
margin-left: @input-padding;
24+
padding-left: 5px;
1025
}
1126

1227
input {
13-
width: 35% !important;
28+
width: 60%;
29+
}
30+
31+
details.optional.field {
32+
&[open] {
33+
border-bottom: 1px solid var(--color-secondary);
34+
padding-bottom: 10px;
35+
36+
summary {
37+
margin-bottom: 10px;
38+
}
39+
}
40+
41+
* {
42+
box-sizing: border-box;
43+
}
1444
}
1545

1646
.field {
1747
text-align: left;
1848

1949
.help {
20-
margin-left: @input-padding+15px;
50+
margin-left: @input-padding;
51+
padding-left: 5px;
52+
width: 60%;
2153
}
2254

23-
&.optional {
24-
.title {
25-
margin-left: 38%;
26-
}
27-
.checkbox {
28-
margin-left: 40% !important;
29-
label {
30-
width: auto !important;
31-
}
32-
}
33-
}
3455
}
3556
}
3657

0 commit comments

Comments
 (0)