aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-10-20 11:35:09 +0200
committerChocobozzz <me@florianbigard.com>2021-10-20 11:35:09 +0200
commitd94b8ecf7dddb82b84302854c5fb761f90a82e39 (patch)
tree567d4f8e3159ae4217ebf9653aae15e0d2192535 /client/src/sass
parentdbb76162b9cf2d048505e4d6170b694388f68e75 (diff)
downloadPeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.gz
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.zst
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.zip
Improve admin tables responsive
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_mixins.scss1
-rw-r--r--client/src/sass/include/_variables.scss2
-rw-r--r--client/src/sass/primeng-custom.scss39
3 files changed, 41 insertions, 1 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2f436d787..4d7a19ddf 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -701,6 +701,7 @@
701 span { 701 span {
702 position: absolute; 702 position: absolute;
703 color: $grey-foreground-color; 703 color: $grey-foreground-color;
704
704 @if $small { 705 @if $small {
705 top: -1px; 706 top: -1px;
706 } 707 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e0a4c7d3f..f973b3257 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -98,6 +98,8 @@ $focus-box-shadow-form: 0 0 0 .2rem;
98$video-watch-player-factor: math.div(16, 9); 98$video-watch-player-factor: math.div(16, 9);
99$video-watch-info-margin-left: 44px; 99$video-watch-info-margin-left: 44px;
100 100
101$primeng-breakpoint: 960px;
102
101/*** map theme ***/ 103/*** map theme ***/
102 104
103// pass variables into a sass map, 105// pass variables into a sass map,
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 1f50eea54..7aba69e4a 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -768,7 +768,7 @@ p-table {
768 max-width: 100%; 768 max-width: 100%;
769 769
770 table { 770 table {
771 min-width: breakpoint(lg); 771 width: 100%;
772 } 772 }
773 } 773 }
774 774
@@ -979,3 +979,40 @@ p-toast {
979 font-weight: 600; 979 font-weight: 600;
980 } 980 }
981} 981}
982
983@media screen and (max-width: $primeng-breakpoint) {
984 p-table {
985 td {
986 padding: 3px 0;
987
988 &.expand-cell {
989 padding: 5px;
990 }
991 }
992
993 .p-datatable-tbody {
994
995 td:last-child {
996 padding-bottom: 15px;
997 margin-bottom: 15px;
998 border-bottom: 1px solid $separator-border-color !important;
999 }
1000 }
1001 }
1002}
1003
1004@media screen and (max-width: $mobile-view) {
1005 p-table {
1006 .p-datatable-header {
1007 .caption {
1008 flex-wrap: wrap;
1009
1010 > div {
1011 width: 100%;
1012 padding: 0 !important;
1013 margin-bottom: 5px;
1014 }
1015 }
1016 }
1017 }
1018}