Skip to content

Commit cf7f80a

Browse files
AlecRustAlecRust
authored
Minor table UI improvements (hestiacp#3749)
* Improve icon sizing consistency * Refactor units table badges * Bump Node dependencies * Remove unnecessary &nbsp
1 parent ae2daca commit cf7f80a

File tree

10 files changed

+852
-572
lines changed

10 files changed

+852
-572
lines changed

‎package-lock.json‎

Lines changed: 776 additions & 492 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,30 +27,30 @@
2727
},
2828
"devDependencies": {
2929
"@prettier/plugin-php": "^0.19.6",
30-
"@typescript-eslint/eslint-plugin": "^5.60.1",
31-
"@typescript-eslint/parser": "^5.60.1",
30+
"@typescript-eslint/eslint-plugin": "^5.61.0",
31+
"@typescript-eslint/parser": "^5.61.0",
3232
"cssnano": "^6.0.1",
3333
"esbuild": "^0.18.11",
3434
"eslint": "^8.44.0",
3535
"eslint-config-prettier": "^8.8.0",
3636
"eslint-plugin-editorconfig": "^4.0.3",
3737
"eslint-plugin-import": "^2.27.5",
3838
"husky": "^8.0.3",
39-
"lint-staged": "^13.2.2",
39+
"lint-staged": "^13.2.3",
4040
"markdownlint-cli2": "^0.8.1",
4141
"postcss": "^8.4.24",
4242
"postcss-import": "^15.1.0",
4343
"postcss-path-replace": "^1.0.4",
44-
"postcss-preset-env": "^8.5.1",
44+
"postcss-preset-env": "^9.0.0",
4545
"postcss-size": "^4.0.1",
4646
"prettier": "^2.8.8",
4747
"prettier-plugin-nginx": "^1.0.3",
4848
"prettier-plugin-sh": "^0.12.8",
4949
"prettier-plugin-sql": "^0.14.0",
50-
"stylelint": "^15.9.0",
51-
"stylelint-config-standard": "^33.0.0",
50+
"stylelint": "^15.10.0",
51+
"stylelint-config-standard": "^34.0.0",
5252
"typescript": "^5.1.6",
53-
"vitepress": "1.0.0-beta.3",
53+
"vitepress": "1.0.0-beta.5",
5454
"vue": "^3.3.4"
5555
},
5656
"browserslist": [

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -440,6 +440,16 @@
440440
}
441441
}
442442

443+
.units-table-badge {
444+
@media (--viewport-large) {
445+
color: #dadada;
446+
border-color: #212121;
447+
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
448+
text-shadow: 0 1px rgb(0 0 0 / 70%);
449+
background-color: #252525;
450+
}
451+
}
452+
443453
/* Statistics
444454
========================================================================== */
445455

@@ -700,17 +710,6 @@
700710
}
701711
}
702712

703-
/* Badge component
704-
========================================================================== */
705-
706-
.badge {
707-
color: #dadada;
708-
border-color: #212121;
709-
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
710-
text-shadow: 0 1px rgb(0 0 0 / 70%);
711-
background-color: #252525;
712-
}
713-
714713
/* Icon component
715714
========================================================================== */
716715

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

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1024,9 +1024,19 @@
10241024
margin-right: 0;
10251025
}
10261026

1027+
& .fas {
1028+
padding: 5px 5px 5px 10px;
1029+
font-size: 0.9rem;
1030+
}
1031+
10271032
@media (--viewport-large) {
10281033
margin-right: 0;
10291034
margin-bottom: 0;
1035+
1036+
& .fas {
1037+
color: silver;
1038+
padding: 4px;
1039+
}
10301040
}
10311041
}
10321042

@@ -1038,20 +1048,29 @@
10381048
align-items: center;
10391049
padding-right: 10px;
10401050

1041-
& .fas {
1042-
padding: 5px 5px 5px 10px;
1043-
font-size: 0.9rem;
1044-
}
1045-
10461051
@media (--viewport-large) {
10471052
background-color: transparent;
10481053
border: 0;
10491054
padding-right: 0;
1055+
}
1056+
}
10501057

1051-
& .fas {
1052-
color: silver;
1053-
padding: 4px;
1054-
}
1058+
.units-table-badge {
1059+
@media (--viewport-large) {
1060+
display: inline-block;
1061+
min-width: 26px;
1062+
line-height: 24px;
1063+
border-radius: 13px;
1064+
font-weight: 700;
1065+
font-size: 0.75rem;
1066+
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
1067+
color: #6c6c6c;
1068+
padding-left: 4px;
1069+
padding-right: 4px;
1070+
text-align: center;
1071+
text-shadow: 0 1px #fafafa;
1072+
border: 1px solid #b8b8b8;
1073+
background-color: #eaeaea;
10551074
}
10561075
}
10571076

@@ -2113,26 +2132,6 @@
21132132
padding-bottom: 20px;
21142133
}
21152134

2116-
/* Badge component
2117-
========================================================================== */
2118-
2119-
.badge {
2120-
display: inline-block;
2121-
min-width: 26px;
2122-
line-height: 24px;
2123-
border-radius: 13px;
2124-
font-weight: 700;
2125-
font-size: 0.75rem;
2126-
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
2127-
color: #6c6c6c;
2128-
padding-left: 4px;
2129-
padding-right: 4px;
2130-
text-align: center;
2131-
text-shadow: 0 1px #fafafa;
2132-
border: 1px solid #b8b8b8;
2133-
background-color: #eaeaea;
2134-
}
2135-
21362135
/* Icon component
21372136
========================================================================== */
21382137

‎web/css/src/themes/flat.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@
7373
}
7474
}
7575

76+
.units-table-badge {
77+
@media (--viewport-large) {
78+
box-shadow: none;
79+
}
80+
}
81+
7682
/* Statistics
7783
========================================================================== */
7884

@@ -93,13 +99,6 @@
9399
}
94100
}
95101

96-
/* Badge component
97-
========================================================================== */
98-
99-
.badge {
100-
box-shadow: none;
101-
}
102-
103102
/* Collapse component
104103
========================================================================== */
105104

‎web/css/src/themes/vestia.css‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,14 @@ h1 {
221221
}
222222
}
223223

224+
.units-table-badge {
225+
@media (--viewport-large) {
226+
border-color: #eaeaea;
227+
box-shadow: none;
228+
border-radius: 4px;
229+
}
230+
}
231+
224232
/* Statistics
225233
========================================================================== */
226234

@@ -360,15 +368,6 @@ h1 {
360368
box-shadow: none;
361369
}
362370

363-
/* Badge component
364-
========================================================================== */
365-
366-
.badge {
367-
border-color: #eaeaea;
368-
box-shadow: none;
369-
border-radius: 4px;
370-
}
371-
372371
/* Shortcuts panel
373372
========================================================================== */
374373

‎web/templates/pages/list_firewall.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
159159
</div>
160160
<div class="units-table-cell u-text-bold">
161161
<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
162-
<?php if (!empty($data[$key]['COMMENT'])) echo '' . $data[$key]['COMMENT']; else echo "&nbsp;"; ?>
162+
<?php if (!empty($data[$key]['COMMENT'])) { echo $data[$key]['COMMENT']; } ?>
163163
</div>
164164
<div class="units-table-cell u-text-center-desktop">
165165
<span class="u-hide-desktop u-text-bold"><?= _("Protocol") ?>:</span>

‎web/templates/pages/list_packages.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
213213
</div>
214214
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
215215
<span class="u-hide-desktop"><?= _("Web Domains") ?>:</span>
216-
<span class="badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
216+
<span class="units-table-badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
217217
<?php if ($data[$key]["WEB_DOMAINS"] == "unlimited") { ?>
218218
&infin;
219219
<?php } else { ?>
@@ -223,7 +223,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
223223
</div>
224224
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
225225
<span class="u-hide-desktop"><?= _("Web Aliases") ?>:</span>
226-
<span class="badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
226+
<span class="units-table-badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
227227
<?php if ($data[$key]["WEB_ALIASES"] == "unlimited") { ?>
228228
&infin;
229229
<?php } else { ?>
@@ -233,7 +233,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
233233
</div>
234234
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
235235
<span class="u-hide-desktop"><?= _("DNS Zones") ?>:</span>
236-
<span class="badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
236+
<span class="units-table-badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
237237
<?php if ($data[$key]["DNS_DOMAINS"] == "unlimited") { ?>
238238
&infin;
239239
<?php } else { ?>
@@ -243,7 +243,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
243243
</div>
244244
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
245245
<span class="u-hide-desktop"><?= _("DNS Records") ?>:</span>
246-
<span class="badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
246+
<span class="units-table-badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
247247
<?php if ($data[$key]["DNS_RECORDS"] == "unlimited") { ?>
248248
&infin;
249249
<?php } else { ?>
@@ -253,7 +253,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
253253
</div>
254254
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
255255
<span class="u-hide-desktop"><?= _("Mail Domains") ?>:</span>
256-
<span class="badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
256+
<span class="units-table-badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
257257
<?php if ($data[$key]["MAIL_DOMAINS"] == "unlimited") { ?>
258258
&infin;
259259
<?php } else { ?>
@@ -263,7 +263,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
263263
</div>
264264
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
265265
<span class="u-hide-desktop"><?= _("Mail Accounts") ?>:</span>
266-
<span class="badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
266+
<span class="units-table-badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
267267
<?php if ($data[$key]["MAIL_ACCOUNTS"] == "unlimited") { ?>
268268
&infin;
269269
<?php } else { ?>
@@ -273,7 +273,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
273273
</div>
274274
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
275275
<span class="u-hide-desktop"><?= _("Databases") ?>:</span>
276-
<span class="badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
276+
<span class="units-table-badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
277277
<?php if ($data[$key]["DATABASES"] == "unlimited") { ?>
278278
&infin;
279279
<?php } else { ?>
@@ -283,7 +283,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
283283
</div>
284284
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
285285
<span class="u-hide-desktop"><?= _("Cron Jobs") ?>:</span>
286-
<span class="badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
286+
<span class="units-table-badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
287287
<?php if ($data[$key]["CRON_JOBS"] == "unlimited") { ?>
288288
&infin;
289289
<?php } else { ?>
@@ -293,7 +293,7 @@ class="units-table-row-action-link data-controls js-confirm-action"
293293
</div>
294294
<div class="units-table-cell compact u-text-bold u-text-center-desktop">
295295
<span class="u-hide-desktop"><?= _("Backups") ?>:</span>
296-
<span class="badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
296+
<span class="units-table-badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
297297
<?php if ($data[$key]["BACKUPS"] == "unlimited") { ?>
298298
&infin;
299299
<?php } else { ?>

‎web/templates/pages/list_search.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@
163163
<?= $value["USER"] ?>
164164
</a>
165165
<?php if (!($_SESSION["POLICY_SYSTEM_HIDE_ADMIN"] === "yes" && $value["USER"] !== "admin") && $_SESSION["userContext"] === "admin") { ?>
166-
<a href="/login/?loginas=<?= $value["USER"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $value["USER"] ?>">
166+
<a href="/login/?loginas=<?= $value["USER"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $value["USER"] ?>" class="u-ml5">
167167
<i class="fas fa-right-to-bracket icon-green icon-dim"></i>
168168
<span class="u-hidden-visually"><?= _("Log in as") ?> <?= $value["USER"] ?></span>
169169
</a>

‎web/templates/pages/list_user.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
<ul class="units-table-row-actions">
172172
<?php if ($key == $user_plain) { ?>
173173
<li class="units-table-row-action">
174-
<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
174+
<i class="fas fa-user-check" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
175175
<span class="u-hide-desktop"><?= $key ?> (<?= $data[$key]["NAME"] ?>)</span>
176176
</li>
177177
<?php } else { ?>
@@ -272,31 +272,31 @@ class="units-table-row-action-link data-controls js-confirm-action"
272272
</div>
273273
<div class="units-table-cell compact u-text-center-desktop">
274274
<span class="u-hide-desktop u-text-bold"><?= _("Web Domains") ?>:</span>
275-
<span class="badge">
275+
<span class="units-table-badge">
276276
<?= $data[$key]["U_WEB_DOMAINS"] ?>
277277
</span>
278278
</div>
279279
<div class="units-table-cell compact u-text-center-desktop">
280280
<span class="u-hide-desktop u-text-bold"><?= _("DNS Zones") ?>:</span>
281-
<span class="badge">
281+
<span class="units-table-badge">
282282
<?= $data[$key]["U_DNS_DOMAINS"] ?>
283283
</span>
284284
</div>
285285
<div class="units-table-cell compact u-text-center-desktop">
286286
<span class="u-hide-desktop u-text-bold"><?= _("Mail Domains") ?>:</span>
287-
<span class="badge">
287+
<span class="units-table-badge">
288288
<?= $data[$key]["U_MAIL_DOMAINS"] ?>
289289
</span>
290290
</div>
291291
<div class="units-table-cell compact u-text-center-desktop">
292292
<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
293-
<span class="badge">
293+
<span class="units-table-badge">
294294
<?= $data[$key]["U_DATABASES"] ?>
295295
</span>
296296
</div>
297297
<div class="units-table-cell compact u-text-center-desktop">
298298
<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
299-
<span class="badge">
299+
<span class="units-table-badge">
300300
<?= $data[$key]["U_BACKUPS"] ?>
301301
</span>
302302
</div>

0 commit comments

Comments
 (0)