From d94b8ecf7dddb82b84302854c5fb761f90a82e39 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Oct 2021 11:35:09 +0200 Subject: [PATCH] Improve admin tables responsive --- .../video-block-list.component.html | 14 +++---- .../video-block-list.component.scss | 1 + .../video-comment-list.component.scss | 8 ++++ .../+admin/system/jobs/jobs.component.html | 1 + .../+admin/system/jobs/jobs.component.scss | 22 ++++++----- .../users/user-list/user-list.component.html | 2 +- .../users/user-list/user-list.component.scss | 10 +++++ .../abuse-details.component.html | 32 +++++++-------- .../shared/shared-moderation/moderation.scss | 27 +++++++++++++ client/src/sass/include/_mixins.scss | 1 + client/src/sass/include/_variables.scss | 2 + client/src/sass/primeng-custom.scss | 39 ++++++++++++++++++- 12 files changed, 124 insertions(+), 35 deletions(-) diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html index 3a8df1f07..7efa87dd0 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html @@ -41,7 +41,7 @@ @@ -52,11 +52,13 @@
+
{{ videoBlock.video.name }}
+
by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }}
@@ -82,14 +84,12 @@
- -
- Block reason: - +
+ Block reason: +
- -
+
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss index f52ca44ab..6152d9651 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss @@ -1,4 +1,5 @@ @use '_mixins' as *; +@use '_variables' as *; my-global-icon { width: 24px; diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss index 921732124..3cf7b8db6 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss @@ -1,7 +1,9 @@ @use '_mixins' as *; +@use '_variables' as *; my-feed { @include margin-left(5px); + display: inline-block; width: 15px; } @@ -42,3 +44,9 @@ my-global-icon { } } } + +@media screen and (max-width: $primeng-breakpoint) { + .video { + align-items: flex-start !important; + } +} diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html index 021e4f8d0..5701172cb 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.html +++ b/client/src/app/+admin/system/jobs/jobs.component.html @@ -107,6 +107,7 @@ No jobs found. No {{ jobType }} jobs found. + No {{ jobState }} jobs found. No {{ jobType }} jobs found that are {{ jobState }}. diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 5e0075a27..4d564f4b7 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss @@ -5,18 +5,20 @@ min-width: 120px; } -.job-id { - max-width: 30vw !important; -} +@media screen and (min-width: $primeng-breakpoint) { + .job-id { + max-width: 30vw !important; + } -.job-type, -.job-state, -.job-priority { - width: 150px !important; -} + .job-type, + .job-state, + .job-priority { + width: 150px !important; + } -.job-date { - width: 170px !important; + .job-date { + width: 170px !important; + } } .admin-sub-header { diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 5b4f35c77..c82f3c06f 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -74,7 +74,7 @@ - + diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 4f6c60f8f..e425306b5 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -53,3 +53,13 @@ my-global-icon { width: auto; max-width: 100%; } + +@media screen and (max-width: $primeng-breakpoint) { + .progress { + width: 100%; + } + + .empty-cell { + padding: 0; + } +} diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html index ca68de4b1..2f0bc5ae5 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html @@ -1,12 +1,12 @@
-
+
- Reporter + Reporter - + @@ -25,8 +25,8 @@
- Reportee - + Reportee + @@ -45,22 +45,22 @@
- Updated - + Updated +
- + Report #{{ abuse.id }} - +
- - + @@ -70,21 +70,21 @@
- Reported part - + Reported part + {{ startAt }} - {{ endAt }}
- Note - + Note +
-
+
The video was deleted
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss index badf9ce4c..815e2791f 100644 --- a/client/src/app/shared/shared-moderation/moderation.scss +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -5,12 +5,18 @@ .moderation-expanded { font-size: 90%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; .moderation-expanded-label { + @include margin-right(5px); + font-weight: $font-semibold; display: inline-block; vertical-align: top; text-align: end; + min-width: 100px; } .moderation-expanded-text { @@ -21,6 +27,17 @@ margin-bottom: 0 !important; } } + + .right { + width: 50%; + max-width: 500px; + } + + @media screen and (max-width: $primeng-breakpoint) { + .right { + width: 100%; + } + } } .screenratio { @@ -125,3 +142,13 @@ my-action-dropdown.show { } } } + +my-abuse-details { + width: 100%; +} + +@media screen and (max-width: $primeng-breakpoint) { + .abuse-messages { + justify-content: flex-start !important; + } +} 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 @@ span { position: absolute; color: $grey-foreground-color; + @if $small { top: -1px; } 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; $video-watch-player-factor: math.div(16, 9); $video-watch-info-margin-left: 44px; +$primeng-breakpoint: 960px; + /*** map theme ***/ // 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 { max-width: 100%; table { - min-width: breakpoint(lg); + width: 100%; } } @@ -979,3 +979,40 @@ p-toast { font-weight: 600; } } + +@media screen and (max-width: $primeng-breakpoint) { + p-table { + td { + padding: 3px 0; + + &.expand-cell { + padding: 5px; + } + } + + .p-datatable-tbody { + + td:last-child { + padding-bottom: 15px; + margin-bottom: 15px; + border-bottom: 1px solid $separator-border-color !important; + } + } + } +} + +@media screen and (max-width: $mobile-view) { + p-table { + .p-datatable-header { + .caption { + flex-wrap: wrap; + + > div { + width: 100%; + padding: 0 !important; + margin-bottom: 5px; + } + } + } + } +}