Skip to content

Commit 32a0355

Browse files
AlecRustAlecRust
authored
Mobile-first cron table (hestiacp#3615)
1 parent 8e53a23 commit 32a0355

File tree

5 files changed

+418
-85
lines changed

5 files changed

+418
-85
lines changed

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,89 @@ strong {
443443
}
444444
}
445445

446+
/* Units table
447+
========================================================================== */
448+
449+
.units-table-header {
450+
@media (--viewport-large) {
451+
background: #404040;
452+
box-shadow: none;
453+
text-shadow: 0 1px rgb(0 0 0 / 95%);
454+
border-color: #212121;
455+
}
456+
}
457+
458+
.units-table-row {
459+
border-color: #282828;
460+
background-color: #303030;
461+
462+
&.selected {
463+
background-color: #454545;
464+
box-shadow: none;
465+
}
466+
467+
&.disabled {
468+
color: #606060;
469+
background-color: #252525;
470+
471+
&.selected {
472+
color: #333;
473+
background-color: #454545;
474+
}
475+
}
476+
477+
&.focus {
478+
background-color: #353535;
479+
}
480+
481+
@media (--viewport-large) {
482+
&:hover {
483+
background-color: #353535;
484+
border-color: #282828;
485+
box-shadow: none;
486+
}
487+
488+
&.selected {
489+
border-left-color: #212121;
490+
border-right-color: #212121;
491+
492+
&:hover {
493+
background-color: #555;
494+
}
495+
}
496+
497+
&.disabled {
498+
&:hover {
499+
background-color: #252525;
500+
}
501+
502+
&.selected:hover {
503+
color: #333;
504+
background-color: #454545;
505+
}
506+
}
507+
}
508+
}
509+
510+
.units-table-cell {
511+
& a {
512+
color: #fafafa;
513+
514+
&:hover {
515+
color: #fafafa;
516+
}
517+
}
518+
}
519+
520+
.units-table-row-action-link {
521+
border-color: #454545;
522+
background-color: #282828;
523+
524+
@media (--viewport-large) {
525+
background-color: transparent;
526+
}
527+
}
528+
446529
/* Statistics
447530
========================================================================== */
448531

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

Lines changed: 190 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -831,6 +831,195 @@
831831
}
832832
}
833833

834+
/* Units table
835+
========================================================================== */
836+
837+
.units-table {
838+
font-size: 0.8rem;
839+
padding-left: 20px;
840+
padding-right: 20px;
841+
842+
@media (--viewport-large) {
843+
width: 100%;
844+
display: table;
845+
border-collapse: collapse;
846+
border-spacing: 0;
847+
padding-left: 0;
848+
padding-right: 0;
849+
}
850+
}
851+
852+
.units-table-header {
853+
display: none;
854+
855+
@media (--viewport-large) {
856+
display: table-row;
857+
border-left: 1px solid #d0d0d0;
858+
border-right: 1px solid #d0d0d0;
859+
border-bottom: 1px solid #d0d0d0;
860+
background: linear-gradient(
861+
to bottom,
862+
rgb(247 247 247 / 100%) 0%,
863+
rgb(255 255 255 / 100%) 100%
864+
);
865+
box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%),
866+
inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
867+
868+
& .units-table-cell {
869+
font-weight: bold;
870+
padding: 15px;
871+
}
872+
}
873+
}
874+
875+
.units-table-row {
876+
padding: 10px;
877+
margin-top: 10px;
878+
border: 1px solid #ddd;
879+
border-radius: 6px;
880+
881+
&.selected {
882+
background-color: #f8f8f8;
883+
box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
884+
}
885+
886+
&.disabled {
887+
color: silver;
888+
background-color: #eaeaea;
889+
890+
&.selected {
891+
color: #b2ac87;
892+
background-color: #f2eab8;
893+
}
894+
}
895+
896+
&.focus {
897+
border-left: 2px solid #5edad0;
898+
background-color: #eff5fc;
899+
}
900+
901+
@media (--viewport-large) {
902+
display: table-row;
903+
padding: 0;
904+
margin-top: 0;
905+
border-top: 0;
906+
border-left-color: transparent;
907+
border-right-color: transparent;
908+
border-bottom-color: #ddd;
909+
border-radius: 0;
910+
911+
&:last-child {
912+
border-bottom-color: transparent;
913+
}
914+
915+
&:hover {
916+
background-color: #f8f8f8;
917+
box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
918+
border-left-color: #ddd;
919+
border-right-color: #ddd;
920+
921+
& .units-table-row-actions {
922+
visibility: visible;
923+
}
924+
}
925+
926+
&.selected {
927+
border-left: 1px solid #ddd;
928+
border-right: 1px solid #ddd;
929+
930+
&:hover {
931+
background-color: #fff5ce;
932+
}
933+
}
934+
935+
&.disabled {
936+
&:hover {
937+
background-color: #eaeaea;
938+
}
939+
940+
&.selected:hover {
941+
color: #b2ac87;
942+
background-color: #f2eab8;
943+
}
944+
}
945+
}
946+
}
947+
948+
.units-table-cell {
949+
&:nth-child(2) {
950+
font-size: 0.9rem;
951+
}
952+
953+
& a {
954+
color: #353535;
955+
956+
&:hover {
957+
color: #4c8bbe;
958+
}
959+
}
960+
961+
@media (--viewport-large) {
962+
display: table-cell;
963+
padding: 10px 15px;
964+
965+
&:nth-child(2) {
966+
font-size: 0.8rem;
967+
}
968+
969+
&:not(:nth-child(2)) {
970+
text-align: center;
971+
}
972+
}
973+
}
974+
975+
.units-table-row-actions {
976+
display: flex;
977+
padding-top: 5px;
978+
padding-bottom: 5px;
979+
980+
@media (--viewport-large) {
981+
visibility: hidden;
982+
padding: 0;
983+
}
984+
}
985+
986+
.units-table-row-action {
987+
margin-right: 10px;
988+
989+
&:last-child {
990+
margin-right: 0;
991+
}
992+
993+
@media (--viewport-large) {
994+
margin-right: 0;
995+
}
996+
}
997+
998+
.units-table-row-action-link {
999+
background-color: #f5f5f5;
1000+
border: 1px solid #ddd;
1001+
border-radius: var(--border-radius-base);
1002+
display: flex;
1003+
align-items: center;
1004+
padding-right: 10px;
1005+
1006+
& .fas {
1007+
padding: 5px 5px 5px 10px;
1008+
font-size: 0.9rem;
1009+
}
1010+
1011+
@media (--viewport-large) {
1012+
background-color: transparent;
1013+
border: 0;
1014+
padding-right: 0;
1015+
1016+
& .fas {
1017+
color: silver;
1018+
padding: 4px;
1019+
}
1020+
}
1021+
}
1022+
8341023
/* Cards
8351024
========================================================================== */
8361025

@@ -910,10 +1099,10 @@
9101099
border-left: 1px solid #d0d0d0;
9111100
border-right: 1px solid #d0d0d0;
9121101
border-bottom: 1px solid #d0d0d0;
1102+
border-radius: 0 0 6px 6px;
9131103
text-shadow: 0 1px rgb(255 255 255 / 100%);
9141104
box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%),
9151105
inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
916-
border-radius: 0 0 6px 6px;
9171106
min-height: 28px;
9181107
padding: 4px 0 4px 15px;
9191108
color: #707070;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,27 @@ strong {
8282
box-shadow: none;
8383
}
8484

85+
/* Units table
86+
========================================================================== */
87+
88+
.units-table-row {
89+
@media (--viewport-large) {
90+
&:hover {
91+
box-shadow: none;
92+
}
93+
}
94+
}
95+
96+
.units-table-cell {
97+
& a {
98+
color: #5f7eb3;
99+
100+
&:hover {
101+
color: #5f7eb3;
102+
}
103+
}
104+
}
105+
85106
/* Statistics
86107
========================================================================== */
87108

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,23 @@ strong {
233233
box-shadow: none;
234234
}
235235

236+
/* Units table
237+
========================================================================== */
238+
239+
.units-table-row {
240+
@media (--viewport-large) {
241+
&:hover {
242+
box-shadow: none;
243+
}
244+
}
245+
}
246+
247+
.units-table-cell {
248+
& a:hover {
249+
color: #ff6701;
250+
}
251+
}
252+
236253
/* Statistics
237254
========================================================================== */
238255

0 commit comments

Comments
 (0)