Skip to content

Commit 689753e

Browse files
AlecRustAlecRust
authored
UI improvements (hestiacp#3715)
* Bump Node deps * Improve layout of List Access/Error Log * Tidy * Modernize some .toolbar-sorting-menu CSS * Improve clarity of active sort in Vestia theme * Refactor away .form-title * Fix top bar usage color regression in Dark theme * Remove unnecessary style rule * Show heading on list views on mobile * Allow badges to expand with content
1 parent 226b377 commit 689753e

78 files changed

Lines changed: 350 additions & 305 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@typescript-eslint/eslint-plugin": "^5.60.0",
3131
"@typescript-eslint/parser": "^5.60.0",
3232
"cssnano": "^6.0.1",
33-
"esbuild": "^0.18.6",
33+
"esbuild": "^0.18.8",
3434
"eslint": "^8.43.0",
3535
"eslint-config-prettier": "^8.8.0",
3636
"eslint-plugin-editorconfig": "^4.0.3",
@@ -47,7 +47,7 @@
4747
"prettier-plugin-nginx": "^1.0.3",
4848
"prettier-plugin-sh": "^0.12.8",
4949
"prettier-plugin-sql": "^0.14.0",
50-
"stylelint": "^15.8.0",
50+
"stylelint": "^15.9.0",
5151
"stylelint-config-standard": "^33.0.0",
5252
"typescript": "^5.1.3",
5353
"vitepress": "1.0.0-beta.3",

‎web/css/src/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ h2,
5656
.u-text-H2,
5757
h3,
5858
.u-text-H3 {
59+
color: var(--color-text-heading);
5960
font-weight: 500;
6061
margin: 0;
6162
}

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--color-text: #cdcdcd;
1111
--color-text-link: #4fabe9;
1212
--color-text-link-hover: #ff3478;
13+
--color-text-heading: #e8e8e8;
1314
--color-background: #282828;
1415
--alert-border-color: #212121;
1516

@@ -40,6 +41,14 @@
4041
color: #909090;
4142
}
4243

44+
.top-bar-usage-item {
45+
color: #cacaca;
46+
47+
& .fas {
48+
color: #909090;
49+
}
50+
}
51+
4352
.top-bar-notifications-panel {
4453
background-color: rgb(50 50 50 / 99%);
4554
border: 1px solid #404040;
@@ -263,14 +272,14 @@
263272
}
264273

265274
&.active {
266-
background-color: #454545 !important;
267275
color: #fff;
268276
background: linear-gradient(
269277
to bottom,
270278
rgb(15 15 15 / 60%) 0%,
271279
rgb(45 45 45 / 75%) 30%,
272280
rgb(60 60 60 / 100%) 95%
273281
);
282+
background-color: #454545;
274283
text-shadow: 0 1px rgb(0 0 0 / 80%);
275284
}
276285
}
@@ -328,10 +337,6 @@
328337
color: #707070;
329338
}
330339

331-
.server-summary-title {
332-
color: #fafafa;
333-
}
334-
335340
/* Panel component
336341
========================================================================== */
337342

@@ -462,10 +467,6 @@
462467
/* Forms
463468
========================================================================== */
464469

465-
.form-title {
466-
color: #e8e8e8;
467-
}
468-
469470
.form-label,
470471
.form-check label {
471472
color: #d4d4d4;
@@ -552,7 +553,6 @@
552553
}
553554

554555
.section-title {
555-
color: #d4d4d4;
556556
border-bottom-color: #484848;
557557
}
558558

@@ -779,10 +779,6 @@
779779
}
780780
}
781781

782-
.server-console-output {
783-
background-color: #282828;
784-
}
785-
786782
/* App footer
787783
========================================================================== */
788784

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

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--color-text: #7c7c7c;
1515
--color-text-link: #326b9b;
1616
--color-text-link-hover: #c36;
17+
--color-text-heading: #4b4b4b;
1718
--color-background: #fff;
1819
--border-radius-base: 4px;
1920

@@ -674,6 +675,7 @@
674675
box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
675676

676677
& li {
678+
display: flex;
677679
border-bottom: 1px solid #ddd;
678680
color: #2e2e2e;
679681
cursor: pointer;
@@ -684,20 +686,17 @@
684686
}
685687

686688
& span {
689+
display: flex;
690+
align-items: center;
691+
justify-content: space-between;
692+
687693
&.name {
688-
display: inline-block;
689694
padding: 11px;
690695
width: 141px;
691696
font-weight: 500;
692-
693-
& .fas.fa-arrow-down-a-z {
694-
float: right;
695-
margin-top: 2px;
696-
}
697697
}
698698

699699
&.up {
700-
display: inline-block;
701700
padding: 11px 14px;
702701
width: 44px;
703702
}
@@ -1310,14 +1309,6 @@
13101309
}
13111310
}
13121311

1313-
.form-title {
1314-
color: #4b4b4b;
1315-
font-size: 1.4rem;
1316-
font-weight: 500;
1317-
padding-bottom: 30px;
1318-
letter-spacing: -0.01em;
1319-
}
1320-
13211312
.form-label {
13221313
margin-bottom: 5px;
13231314
display: inline-block;
@@ -1607,7 +1598,6 @@
16071598

16081599
.section-title {
16091600
display: flex;
1610-
color: #4b4b4b;
16111601
cursor: pointer;
16121602
justify-content: space-between;
16131603
align-items: center;
@@ -1690,7 +1680,6 @@
16901680
.shortcuts-title {
16911681
text-transform: uppercase;
16921682
color: #ff3478;
1693-
letter-spacing: -0.01em;
16941683
font-weight: 600;
16951684
}
16961685

@@ -1904,7 +1893,6 @@
19041893
}
19051894

19061895
.server-summary-title {
1907-
color: #414141;
19081896
margin-bottom: 10px;
19091897

19101898
@media (--viewport-medium) {
@@ -2061,7 +2049,7 @@
20612049
margin-bottom: 30px;
20622050

20632051
@media (--viewport-small) {
2064-
color: #4b4b4b;
2052+
color: var(--color-text-heading);
20652053
}
20662054
}
20672055

@@ -2117,6 +2105,7 @@
21172105
font-family: var(--font-family-monospace);
21182106
font-size: 0.92rem;
21192107
line-height: 1.15;
2108+
padding-bottom: 20px;
21202109
}
21212110

21222111
/* Badge component
@@ -2125,14 +2114,14 @@
21252114
.badge {
21262115
display: inline-block;
21272116
min-width: 26px;
2128-
min-height: 24px;
21292117
line-height: 24px;
2130-
border-radius: 50%;
2118+
border-radius: 13px;
21312119
font-weight: 700;
21322120
font-size: 0.75rem;
21332121
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
21342122
color: #6c6c6c;
2135-
text-align: center;
2123+
padding-left: 4px;
2124+
padding-right: 4px;
21362125
text-shadow: 0 1px #fafafa;
21372126
border: 1px solid #b8b8b8;
21382127
background-color: #eaeaea;
@@ -2287,11 +2276,6 @@
22872276
}
22882277
}
22892278

2290-
.server-console-output {
2291-
background-color: #fff;
2292-
padding: 10px 0 20px 20px;
2293-
}
2294-
22952279
/* App footer
22962280
========================================================================== */
22972281

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
--alert-text-shadow: none;
1818
}
1919

20+
h1 {
21+
font-weight: 600;
22+
}
23+
2024
/* Top bar
2125
========================================================================== */
2226

@@ -130,7 +134,7 @@
130134
&.active {
131135
background: none;
132136
font-weight: bold;
133-
color: #444;
137+
color: #ff6701;
134138
}
135139
}
136140
}
@@ -328,10 +332,6 @@
328332
/* Forms
329333
========================================================================== */
330334

331-
.form-title {
332-
font-weight: 600;
333-
}
334-
335335
.form-control,
336336
.form-select {
337337
box-shadow: none;

‎web/css/src/utilities.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@
115115
padding-left: 30px !important;
116116
}
117117

118+
.u-pr30 {
119+
padding-right: 30px !important;
120+
}
121+
118122
.u-pos-relative {
119123
position: relative !important;
120124
}

‎web/templates/footer.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class="button button-secondary button-circle button-floating button-floating-sho
6464
</div>
6565
<a
6666
href="#top"
67-
class="button button-secondary button-circle button-floating button-floating-top "
67+
class="button button-secondary button-circle button-floating button-floating-top"
6868
title="<?= _("Top") ?>"
6969
>
7070
<i class="fas fa-arrow-up"></i>

‎web/templates/pages/add_access_key.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<input type="hidden" name="ok" value="Add">
2222

2323
<div class="form-container">
24-
<h1 class="form-title"><?= _("Add Access Key") ?></h1>
24+
<h1 class="u-mb20"><?= _("Add Access Key") ?></h1>
2525
<?php show_alert_message($_SESSION); ?>
2626
<p class="u-mb10"><?= _("Permissions") ?></p>
2727
<?php foreach ($apis as $api_name => $api_data) { ?>

‎web/templates/pages/add_cron.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<input type="hidden" name="ok" value="Add">
2323

2424
<div class="form-container form-container-wide">
25-
<h1 class="form-title"><?= _("Add Cron Job") ?></h1>
25+
<h1 class="u-mb20"><?= _("Add Cron Job") ?></h1>
2626
<?php show_alert_message($_SESSION); ?>
2727
<div class="u-mb20">
2828
<label for="v_cmd" class="form-label"><?= _("Command") ?></label>

0 commit comments

Comments
 (0)