Skip to content

Commit 3c55dc1

Browse files
AlecRustAlecRust
authored
Improve checkboxes/radios (hestiacp#2902)
* Refactor radio and checkbox styles, apply to "Edit Web" template * Remove invalid </br> HTML * Apply new checkboxes to Edit User form * Apply new checkboxes to edit server package forms * Apply new checkbox to edit/add IP forms * Apply new checkboxes add user form * Apply new checkboxes add web form * Move .hidden utility class with other utilities * Apply new checkboxes edit server form * Apply new checkboxes to add access key form * Improve formatting of add access key form * Apply new checkboxes to remaining forms * Remove unnecessary .vst-text around new checkboxes
1 parent 89d3862 commit 3c55dc1

23 files changed

Lines changed: 616 additions & 308 deletions

‎web/css/src/themes/dark.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -880,8 +880,6 @@ a.vst-text:active b {
880880
box-shadow: none !important;
881881
}
882882

883-
.vst-checkbox {}
884-
885883
.lets-encrypt-note {}
886884

887885
.additional-control {
@@ -1187,10 +1185,6 @@ a.button.cancel {
11871185
box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
11881186
}
11891187

1190-
.password-option {
1191-
1192-
}
1193-
11941188
.login a.error {
11951189
color: #f864fa;
11961190
}

‎web/css/src/themes/default.css‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -159,10 +159,6 @@
159159
background-color: #fff;
160160
}
161161

162-
.hidden {
163-
display: none;
164-
}
165-
166162
* {
167163
-webkit-tap-highlight-color: transparent;
168164
}
@@ -2271,10 +2267,6 @@ body.mobile .l-icon-shortcuts {
22712267
cursor: pointer;
22722268
}
22732269

2274-
input[type="radio"] {
2275-
margin-top: 10px;
2276-
}
2277-
22782270
.step-top {
22792271
padding-top: 18px;
22802272
}
@@ -2594,10 +2586,17 @@ a.vst-text:active b {
25942586
border: none !important;
25952587
}
25962588

2597-
.vst-checkbox {
2598-
font-size: 0.85rem;
2599-
margin: 2px 6px 0 3px;
2600-
padding: 5px;
2589+
.form-check {
2590+
padding-left: 20px;
2591+
margin-bottom: 2px;
2592+
margin-left: 3px;
2593+
min-height: 24px;
2594+
}
2595+
2596+
.form-check-input {
2597+
float: left;
2598+
margin-top: 3px;
2599+
margin-left: -20px;
26012600
}
26022601

26032602
.lets-encrypt-note {
@@ -3039,10 +3038,6 @@ a.button.cancel {
30393038
box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
30403039
}
30413040

3042-
.password-option {
3043-
margin-top: 15px;
3044-
}
3045-
30463041
.login a.error {
30473042
color: #be5abf;
30483043
font-size: 0.8rem;
@@ -3989,3 +3984,14 @@ meter[value="1"]::-moz-meter-bar { background: red; }
39893984
meter[value="2"]::-moz-meter-bar { background: orange; }
39903985
meter[value="3"]::-moz-meter-bar { background: yellow; }
39913986
meter[value="4"]::-moz-meter-bar { background: green; }
3987+
3988+
/* Global utilities
3989+
========================================================================== */
3990+
3991+
.hidden {
3992+
display: none;
3993+
}
3994+
3995+
.u-mt15 {
3996+
margin-top: 15px !important;
3997+
}

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/templates/pages/add_access_key.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
<div class="l-center edit">
33
<div class="l-sort clearfix">
44
<div class="l-unit-toolbar__buttonstrip">
5-
<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/"><i
6-
class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?></a>
5+
<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
6+
<i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
7+
</a>
78
</div>
89
<div class="l-unit-toolbar__buttonstrip float-right">
9-
<a href="#" class="ui-button" data-action="submit" data-id="vstobjects"><i
10-
class="fas fa-save status-icon purple"></i><?= _('Save'); ?></a>
10+
<a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
11+
<i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
12+
</a>
1113
</div>
1214
</div>
1315
</div>
@@ -16,10 +18,9 @@
1618
<div class="l-separator"></div>
1719

1820
<div class="l-center animated fadeIn">
19-
2021
<form id="vstobjects" name="v_add_access_key" method="post">
21-
<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>"/>
22-
<input type="hidden" name="ok" value="Add"/>
22+
<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>" />
23+
<input type="hidden" name="ok" value="Add" />
2324

2425
<table class="data mode-add">
2526
<tr class="data-add">
@@ -48,18 +49,18 @@
4849
<?= _('Permissions'); ?>
4950
</td>
5051
</tr>
51-
<?php
52-
foreach ($apis as $api_name => $api_data) {
53-
?>
54-
<tr>
55-
<td class="vst-text input-label">
56-
<label><input type="checkbox" size="20" class="vst-checkbox"
57-
name="v_apis[]" value="<?= $api_name ?>"
58-
tabindex="5"/><?= _($api_name); ?></label>
59-
</td>
60-
</tr>
61-
<?php
62-
} ?>
52+
<tr>
53+
<td class="input-label">
54+
<?php foreach ($apis as $api_name => $api_data) { ?>
55+
<div class="form-check">
56+
<input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
57+
<label for="v_apis_<?= $api_name ?>">
58+
<?= _($api_name); ?>
59+
</label>
60+
</div>
61+
<?php } ?>
62+
</td>
63+
</tr>
6364

6465
<tr>
6566
<td class="vst-text step-top">

‎web/templates/pages/add_ip.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,13 @@
7979
</td>
8080
</tr>
8181
<tr>
82-
<td class="vst-text input-label">
83-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');"><?=_('Shared');?></label>
82+
<td class="input-label">
83+
<div class="form-check">
84+
<input class="form-check-input" type="checkbox" name="v_shared" id="v_shared" <?php if (empty($v_dedicated)) echo "checked=yes" ?> onclick="javascript:elementHideShow('usrtable');">
85+
<label for="v_shared">
86+
<?=_('Shared');?>
87+
</label>
88+
</div>
8489
</td>
8590
</tr>
8691
<tr>
@@ -133,4 +138,4 @@
133138
</tr>
134139
</table>
135140
</form>
136-
</div>
141+
</div>

‎web/templates/pages/add_mail.html‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<form id="vstobjects" name="v_add_mail" method="post">
1919
<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
2020
<input type="hidden" name="ok" value="Add" />
21-
21+
2222
<table class="data mode-add">
2323
<tr class="data-add">
2424
<td class="data-dotted">
@@ -93,31 +93,56 @@
9393
<?php } ?>
9494
<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
9595
<tr>
96-
<td class="vst-text input-label step-top">
97-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo "checked=yes"; ?>><?=_('AntiSpam Support');?></label>
96+
<td class="input-label step-top">
97+
<div class="form-check">
98+
<input class="form-check-input" type="checkbox" name="v_antispam" id="v_antispam" <?php if ((empty($v_antispam)) || ($v_antispam == 'yes')) echo "checked=yes"; ?>>
99+
<label for="v_antispam">
100+
<?=_('AntiSpam Support');?>
101+
</label>
102+
</div>
98103
</td>
99104
</tr>
100105
<tr>
101-
<td class="vst-text input-label">
102-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo "checked=yes"; ?>><?=_('Reject spam');?></label>
106+
<td class="input-label">
107+
<div class="form-check">
108+
<input class="form-check-input" type="checkbox" name="v_reject" id="v_reject" <?php if ((empty($v_reject)) || ($v_reject == 'yes')) echo "checked=yes"; ?>>
109+
<label for="v_reject">
110+
<?=_('Reject spam');?>
111+
</label>
112+
</div>
103113
</td>
104114
</tr>
105115
<?php } ?>
106116
<?php if (!empty($_SESSION['ANTIVIRUS_SYSTEM'])) {?>
107117
<tr>
108-
<td class="vst-text input-label">
109-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo "checked=yes"; ?>><?=_('AntiVirus Support');?></label>
118+
<td class="input-label">
119+
<div class="form-check">
120+
<input class="form-check-input" type="checkbox" name="v_antivirus" id="v_antivirus" <?php if ((empty($v_antivirus)) || ($v_antivirus == 'yes')) echo "checked=yes"; ?>>
121+
<label for="v_antivirus">
122+
<?=_('AntiVirus Support');?>
123+
</label>
124+
</div>
110125
</td>
111126
</tr>
112127
<?php } ?>
113128
<tr>
114-
<td class="vst-text input-label">
115-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo "checked=yes"; ?>><?=_('DKIM Support');?></label>
129+
<td class="input-label">
130+
<div class="form-check">
131+
<input class="form-check-input" type="checkbox" name="v_dkim" id="v_dkim" <?php if (isset($v_dkim)&&$v_dkim == 'yes') echo "checked=yes"; ?>>
132+
<label for="v_dkim">
133+
<?=_('DKIM Support');?>
134+
</label>
135+
</div>
116136
</td>
117137
</tr>
118138
<tr>
119-
<td class="vst-text input-label">
120-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');"><?=_('SMTP Relay');?></label>
139+
<td class="input-label">
140+
<div class="form-check">
141+
<input class="form-check-input" type="checkbox" name="v_smtp_relay" id="v_smtp_relay" <?php if ($v_smtp_relay == 'true') echo "checked=yes"; ?> onclick="javascript:elementHideShow('smtp_relay_table');">
142+
<label for="v_smtp_relay">
143+
<?=_('SMTP Relay');?>
144+
</label>
145+
</div>
121146
</td>
122147
</tr>
123148
<tr>
@@ -178,4 +203,4 @@
178203
</tr>
179204
</table>
180205
</form>
181-
</div>
206+
</div>

‎web/templates/pages/add_mail_acc.html‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,23 @@
122122
</td>
123123
</tr>
124124
<tr>
125-
<td class="vst-text input-label">
126-
<label><input type="checkbox" size="20" class="vst-checkbox" id="v_blackhole" name="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>><?=_('Discard all mail');?></label>
125+
<td class="input-label">
126+
<div class="form-check">
127+
<input class="form-check-input" type="checkbox" name="v_blackhole" id="v_blackhole" <?php if ($v_blackhole == 'yes') echo "checked=yes" ?>>
128+
<label for="v_blackhole">
129+
<?=_('Discard all mail');?>
130+
</label>
131+
</div>
127132
</td>
128133
</tr>
129134
<tr <?php if ($v_blackhole == 'yes') echo 'style="display:none"'; ?> id="id_fwd_for">
130-
<td class="vst-text input-label">
131-
<label><input type="checkbox" size="20" class="vst-checkbox" id="v_fwd_for" name="v_fwd_only" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>><?=_('Do not store forwarded mail');?></label>
135+
<td class="input-label">
136+
<div class="form-check">
137+
<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo "checked=yes" ?>>
138+
<label for="v_fwd_for">
139+
<?=_('Do not store forwarded mail');?>
140+
</label>
141+
</div>
132142
</td>
133143
</tr>
134144
<tr>
@@ -166,20 +176,20 @@
166176
<tr><td><?=_('Username');?>: </td><td><span id="v_account">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
167177
<tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
168178
<?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
169-
<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
170-
179+
<tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
180+
171181
<tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>
172182
<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
173183
<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 993
174184
<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 143
175185
<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 143
176-
186+
177187
<tr><td colspan="2"><strong><?=strtoupper(_('POP3 settings'));?></strong></td></tr>
178188
<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
179189
<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 995
180190
<tr><td><?=_('STARTTLS');?>: </td><td><?=_('Port');?> 110
181191
<tr><td><?=_('No encryption');?>: </td><td><?=_('Port');?> 110
182-
192+
183193
<tr><td colspan="2"><strong><?=strtoupper(_('SMTP settings'));?></strong></td></tr>
184194
<tr><td><?=_('Authentication');?>: </td><td> <?=_('Normal password');?></td></tr>
185195
<tr><td><?=_('SSL/TLS');?>: </td><td><?=_('Port');?> 465
@@ -191,4 +201,4 @@
191201
</tr>
192202
</table>
193203
</form>
194-
</div>
204+
</div>

‎web/templates/pages/add_user.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,22 @@
9393
</tr>
9494
<tr>
9595
<td>
96-
<label><input type="checkbox" size="20" class="vst-checkbox" onclick="javascript:elementHideShow('send-welcome');" name="v_login_disabled" <?php if ($v_login_disabled == "yes") echo "checked=yes" ?>><?=_('Do not allow user to log in to Control Panel');?></label>
96+
<div class="form-check">
97+
<input class="form-check-input" type="checkbox" name="v_login_disabled" id="v_login_disabled" onclick="javascript:elementHideShow('send-welcome');" <?php if ($v_login_disabled == "yes") echo "checked=yes" ?>>
98+
<label for="v_login_disabled">
99+
<?=_('Do not allow user to log in to Control Panel');?>
100+
</label>
101+
</div>
97102
</td>
98103
</tr>
99104
<tr id="send-welcome">
100-
<td class="vst-text input-label">
101-
<label><input type="checkbox" size="20" class="vst-checkbox" name="v_email_notice" id='v_email_notify' value="" tabindex="5" /><?=_('Send welcome email');?></label>
105+
<td class="input-label">
106+
<div class="form-check">
107+
<input class="form-check-input" type="checkbox" name="v_email_notice" id="v_email_notify" tabindex="5">
108+
<label for="v_email_notify">
109+
<?=_('Send welcome email');?>
110+
</label>
111+
</div>
102112
</td>
103113
</tr>
104114
<tr>
@@ -179,4 +189,4 @@
179189
</tr>
180190
</table>
181191
</form>
182-
</div>
192+
</div>

0 commit comments

Comments
 (0)