Skip to content

Commit 97e4cbc

Browse files
AlecRustAlecRust
authored
Migrate List Users to .units-table (hestiacp#3629)
* Tidy shortcuts modal styles * Formatting * Migrate List Users to .units-table * Refactor .toolbar-sorting-toggle HTML
1 parent b4af81e commit 97e4cbc

17 files changed

+266
-141
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,10 @@ strong {
217217

218218
.toolbar-sorting-toggle {
219219
&:hover {
220-
color: #bcbcbc;
220+
color: #aaa;
221221

222-
& b {
223-
color: #bcbcbc;
222+
& span {
223+
color: #aaa;
224224
}
225225
}
226226
}
@@ -883,13 +883,13 @@ strong {
883883
border-top: 1px solid #404040;
884884
}
885885

886-
/* Shortcuts panel
886+
/* Shortcuts modal
887887
========================================================================== */
888888

889889
.shortcuts {
890-
background: rgb(30 30 30 / 95%);
891-
border: 1px solid rgb(255 255 255 / 25%);
892-
box-shadow: 0 0 20px rgb(0 0 0 / 50%);
890+
background-color: #2c2c2c;
891+
border-color: #404040;
892+
box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
893893
}
894894

895895
.shortcuts-header {

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -627,20 +627,20 @@
627627
&:hover {
628628
color: #4b4b4b;
629629

630-
& b {
630+
& span {
631631
color: #4b4b4b;
632632
}
633633
}
634634

635635
&:active {
636636
color: #3b9de8;
637637

638-
& b {
638+
& span {
639639
color: #3b9de8;
640640
}
641641
}
642642

643-
& b {
643+
& span {
644644
padding-left: 3px;
645645
}
646646

@@ -868,11 +868,10 @@
868868
& .units-table-cell {
869869
font-weight: bold;
870870
padding: 14px 15px;
871+
}
871872

872-
/* Checkbox cell */
873-
&:nth-child(1) {
874-
line-height: 1.1;
875-
}
873+
& .fas {
874+
font-size: 1rem;
876875
}
877876
}
878877
}
@@ -973,11 +972,12 @@
973972

974973
@media (--viewport-large) {
975974
display: table-cell;
975+
vertical-align: middle;
976976
padding: 10px 15px;
977977

978978
/* Checkbox cell */
979979
&:nth-child(1) {
980-
vertical-align: bottom;
980+
line-height: 0.6;
981981
}
982982

983983
/* Row heading cell */
@@ -1965,10 +1965,10 @@
19651965
========================================================================== */
19661966

19671967
.modal {
1968-
border-radius: var(--border-radius-base);
1969-
box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
19701968
background-color: #f0efef;
19711969
border: 1px solid rgb(255 255 255 / 98%);
1970+
border-radius: var(--border-radius-base);
1971+
box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
19721972

19731973
@media (--viewport-small) {
19741974
min-width: 360px;
@@ -2000,11 +2000,11 @@
20002000
========================================================================== */
20012001

20022002
.shortcuts {
2003-
background: rgb(50 50 50 / 93%);
2003+
background-color: rgb(50 50 50 / 93%);
20042004
color: #eee;
20052005
border: 1px solid rgb(255 255 255 / 70%);
20062006
border-radius: 6px;
2007-
box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
2007+
box-shadow: 0 8px 40px 0 rgb(0 0 0 / 35%);
20082008

20092009
& li {
20102010
padding: 5px 20px;
@@ -2499,10 +2499,10 @@
24992499
font-size: 0.75rem;
25002500
box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
25012501
color: #6c6c6c;
2502+
text-align: center;
25022503
text-shadow: 0 1px #fafafa;
25032504
border: 1px solid #b8b8b8;
25042505
background-color: #eaeaea;
2505-
margin-top: -2px;
25062506
}
25072507

25082508
.l-unit--suspended .badge {

‎web/css/src/utilities.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@
1919
display: none !important;
2020
}
2121

22+
.u-hidden-visually {
23+
border: 0 !important;
24+
clip: rect(1px, 1px, 1px, 1px) !important;
25+
height: 1px !important;
26+
overflow: hidden !important;
27+
padding: 0 !important;
28+
position: absolute !important;
29+
width: 1px !important;
30+
}
31+
2232
.u-noselect {
2333
user-select: none !important;
2434
}

‎web/templates/pages/list_access_keys.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
<div class="toolbar-right">
1313
<div class="toolbar-sorting">
1414
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
15-
<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
15+
<?= _("Sort by") ?>:
16+
<span class="u-text-bold">
17+
<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
18+
</span>
1619
</button>
1720
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
1821
<li data-entity="sort-date" data-sort-as-int="1">

‎web/templates/pages/list_cron.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
<div class="toolbar-sorting">
2222
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
2323
<?= _("Sort by") ?>:
24-
<b>
24+
<span class="u-text-bold">
2525
<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Command'); } else { $label = _('Date'); } ?>
2626
<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
27-
</b>
27+
</span>
2828
</button>
2929
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
3030
<li data-entity="sort-name">

‎web/templates/pages/list_db.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@
4040
<div class="toolbar-sorting">
4141
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
4242
<?= _("Sort by") ?>:
43-
<b>
43+
<span class="u-text-bold">
4444
<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
4545
<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
46-
</b>
46+
</span>
4747
</button>
4848
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
4949
<li data-entity="sort-charset">
@@ -185,7 +185,7 @@
185185
<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
186186
<a
187187
class="data-controls js-confirm-action"
188-
href="/<?=$spnd_action?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
188+
href="/<?= $spnd_action ?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
189189
data-confirm-title="<?= $spnd_action_title ?>"
190190
data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
191191
>

‎web/templates/pages/list_dns.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<div class="toolbar-sorting">
1313
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
1414
<?= _("Sort by") ?>:
15-
<b>
15+
<span class="u-text-bold">
1616
<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
1717
<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
18-
</b>
18+
</span>
1919
</button>
2020
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
2121
<li data-entity="sort-date" data-sort-as-int="1">
@@ -179,7 +179,7 @@ class="units-table-row-action-link"
179179
<li class="units-table-row-action shortcut-s" data-key-action="js">
180180
<a
181181
class="units-table-row-action-link data-controls js-confirm-action"
182-
href="/<?=$spnd_action?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
182+
href="/<?= $spnd_action ?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
183183
title="<?= $spnd_action_title ?>"
184184
data-confirm-title="<?= $spnd_action_title ?>"
185185
data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"

‎web/templates/pages/list_dns_public.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<div class="toolbar-sorting">
1313
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
1414
<?= _("Sort by") ?>:
15-
<b>
15+
<span class="u-text-bold">
1616
<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
1717
<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
18-
</b>
18+
</span>
1919
</button>
2020
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
2121
<li data-entity="sort-date" data-sort-as-int="1">

‎web/templates/pages/list_dns_rec.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
<div class="toolbar-sorting">
1919
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
2020
<?= _("Sort by") ?>:
21-
<b>
21+
<span class="u-text-bold">
2222
<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
2323
<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
24-
</b>
24+
</span>
2525
</button>
2626
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
2727
<li data-entity="sort-date" data-sort-as-int="1">

‎web/templates/pages/list_firewall.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
<div class="toolbar-right">
2121
<div class="toolbar-sorting">
2222
<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
23-
<?= _("Sort by") ?>: <b><?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i></b>
23+
<?= _("Sort by") ?>:
24+
<span class="u-text-bold">
25+
<?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i>
26+
</span>
2427
</button>
2528
<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
2629
<li data-entity="sort-action">
@@ -121,7 +124,7 @@
121124
<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
122125
<a
123126
class="data-controls js-confirm-action"
124-
href="/<?=$spnd_action?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
127+
href="/<?= $spnd_action ?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
125128
data-confirm-title="<?= $spnd_action_title ?>"
126129
data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
127130
>

0 commit comments

Comments
 (0)