aboutsummaryrefslogtreecommitdiffhomepage
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
parentdbb76162b9cf2d048505e4d6170b694388f68e75 (diff)
downloadPeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.gz
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.zst
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.zip
Improve admin tables responsive
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.html14
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss1
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss8
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.html1
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss22
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html2
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss10
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html32
-rw-r--r--client/src/app/shared/shared-moderation/moderation.scss27
-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
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 @@
41 41
42 <td class="action-cell"> 42 <td class="action-cell">
43 <my-action-dropdown 43 <my-action-dropdown
44 [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body" 44 [ngClass]="{ 'show': expanded }" placement="bottom-right auto" container="body"
45 i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock" 45 i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock"
46 ></my-action-dropdown> 46 ></my-action-dropdown>
47 </td> 47 </td>
@@ -52,11 +52,13 @@
52 <div class="table-video-image"> 52 <div class="table-video-image">
53 <img [src]="videoBlock.video.thumbnailPath"> 53 <img [src]="videoBlock.video.thumbnailPath">
54 </div> 54 </div>
55
55 <div class="table-video-text"> 56 <div class="table-video-text">
56 <div> 57 <div>
57 <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type === 2" iconName="robot"></my-global-icon> 58 <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type === 2" iconName="robot"></my-global-icon>
58 {{ videoBlock.video.name }} 59 {{ videoBlock.video.name }}
59 </div> 60 </div>
61
60 <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div> 62 <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div>
61 </div> 63 </div>
62 </div> 64 </div>
@@ -82,14 +84,12 @@
82 <td class="expand-cell" colspan="6"> 84 <td class="expand-cell" colspan="6">
83 <div class="d-flex moderation-expanded"> 85 <div class="d-flex moderation-expanded">
84 86
85 <!-- block right part (block details) --> 87 <div class="left">
86 <div class="col-8"> 88 <span class="moderation-expanded-label" i18n>Block reason:</span>
87 <span class="col-3 moderation-expanded-label" i18n>Block reason:</span> 89 <span class="moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
88 <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
89 </div> 90 </div>
90 91
91 <!-- block right part (video embed) --> 92 <div class="right">
92 <div class="col-4">
93 <div class="screenratio"> 93 <div class="screenratio">
94 <div [innerHTML]="videoBlock.embedHtml"></div> 94 <div [innerHTML]="videoBlock.embedHtml"></div>
95 </div> 95 </div>
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 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2@use '_variables' as *;
2 3
3my-global-icon { 4my-global-icon {
4 width: 24px; 5 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 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2@use '_variables' as *;
2 3
3my-feed { 4my-feed {
4 @include margin-left(5px); 5 @include margin-left(5px);
6
5 display: inline-block; 7 display: inline-block;
6 width: 15px; 8 width: 15px;
7} 9}
@@ -42,3 +44,9 @@ my-global-icon {
42 } 44 }
43 } 45 }
44} 46}
47
48@media screen and (max-width: $primeng-breakpoint) {
49 .video {
50 align-items: flex-start !important;
51 }
52}
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 @@
107 <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container> 107 <ng-container *ngIf="jobType === 'all'" i18n>No jobs found.</ng-container>
108 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container> 108 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found.</ng-container>
109 </ng-container> 109 </ng-container>
110
110 <ng-container *ngIf="jobState !== 'all'"> 111 <ng-container *ngIf="jobState !== 'all'">
111 <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container> 112 <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
112 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container> 113 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
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 @@
5 min-width: 120px; 5 min-width: 120px;
6} 6}
7 7
8.job-id { 8@media screen and (min-width: $primeng-breakpoint) {
9 max-width: 30vw !important; 9 .job-id {
10} 10 max-width: 30vw !important;
11 }
11 12
12.job-type, 13 .job-type,
13.job-state, 14 .job-state,
14.job-priority { 15 .job-priority {
15 width: 150px !important; 16 width: 150px !important;
16} 17 }
17 18
18.job-date { 19 .job-date {
19 width: 170px !important; 20 width: 170px !important;
21 }
20} 22}
21 23
22.admin-sub-header { 24.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 @@
74 <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox> 74 <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
75 </td> 75 </td>
76 76
77 <td class="expand-cell"> 77 <td class="expand-cell" [ngClass]="{ 'empty-cell': !user.blockedReason }">
78 <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user"> 78 <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user">
79 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> 79 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
80 </span> 80 </span>
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 {
53 width: auto; 53 width: auto;
54 max-width: 100%; 54 max-width: 100%;
55} 55}
56
57@media screen and (max-width: $primeng-breakpoint) {
58 .progress {
59 width: 100%;
60 }
61
62 .empty-cell {
63 padding: 0;
64 }
65}
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 @@
1<div class="d-flex moderation-expanded"> 1<div class="d-flex moderation-expanded">
2 <!-- report left part (report details) --> 2 <!-- report left part (report details) -->
3 <div class="col-8"> 3 <div class="left">
4 4
5 <!-- report metadata --> 5 <!-- report metadata -->
6 <div class="d-flex" *ngIf="isAdminView && abuse.reporterAccount"> 6 <div class="d-flex" *ngIf="isAdminView && abuse.reporterAccount">
7 <span class="col-3 moderation-expanded-label" i18n>Reporter</span> 7 <span class="moderation-expanded-label" i18n>Reporter</span>
8 8
9 <span class="col-9 moderation-expanded-text"> 9 <span class="moderation-expanded-text">
10 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 10 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
11 class="chip" 11 class="chip"
12 > 12 >
@@ -25,8 +25,8 @@
25 </div> 25 </div>
26 26
27 <div class="d-flex" *ngIf="abuse.flaggedAccount"> 27 <div class="d-flex" *ngIf="abuse.flaggedAccount">
28 <span class="col-3 moderation-expanded-label" i18n>Reportee</span> 28 <span class="moderation-expanded-label" i18n>Reportee</span>
29 <span class="col-9 moderation-expanded-text"> 29 <span class="moderation-expanded-text">
30 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 30 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
31 class="chip" 31 class="chip"
32 > 32 >
@@ -45,22 +45,22 @@
45 </div> 45 </div>
46 46
47 <div class="d-flex" *ngIf="abuse.updatedAt"> 47 <div class="d-flex" *ngIf="abuse.updatedAt">
48 <span class="col-3 moderation-expanded-label" i18n>Updated</span> 48 <span class="moderation-expanded-label" i18n>Updated</span>
49 <time class="col-9 moderation-expanded-text abuse-details-date-updated">{{ abuse.updatedAt | date: 'medium' }}</time> 49 <time class="moderation-expanded-text abuse-details-date-updated">{{ abuse.updatedAt | date: 'medium' }}</time>
50 </div> 50 </div>
51 51
52 <!-- report text --> 52 <!-- report text -->
53 <div class="mt-3 d-flex"> 53 <div class="mt-3 d-flex">
54 <span class="col-3 moderation-expanded-label"> 54 <span class="moderation-expanded-label">
55 <ng-container i18n>Report</ng-container> 55 <ng-container i18n>Report</ng-container>
56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ml-1 text-muted">#{{ abuse.id }}</a> 56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ml-1 text-muted">#{{ abuse.id }}</a>
57 </span> 57 </span>
58 <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span> 58 <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
59 </div> 59 </div>
60 60
61 <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex"> 61 <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
62 <span class="col-3"></span> 62 <span class="></span>
63 <span class="col-9"> 63 <span class=">
64 <a *ngFor="let reason of getPredefinedReasons()" [routerLink]="[ '.' ]" 64 <a *ngFor="let reason of getPredefinedReasons()" [routerLink]="[ '.' ]"
65 [queryParams]="{ 'search': 'tag:' + reason.id }" class="chip rectangular bg-secondary text-light" 65 [queryParams]="{ 'search': 'tag:' + reason.id }" class="chip rectangular bg-secondary text-light"
66 > 66 >
@@ -70,21 +70,21 @@
70 </div> 70 </div>
71 71
72 <div *ngIf="abuse.video?.startAt" class="mt-2 d-flex"> 72 <div *ngIf="abuse.video?.startAt" class="mt-2 d-flex">
73 <span class="col-3 moderation-expanded-label" i18n>Reported part</span> 73 <span class="moderation-expanded-label" i18n>Reported part</span>
74 <span class="col-9"> 74 <span>
75 {{ startAt }}<ng-container *ngIf="abuse.video.endAt"> - {{ endAt }}</ng-container> 75 {{ startAt }}<ng-container *ngIf="abuse.video.endAt"> - {{ endAt }}</ng-container>
76 </span> 76 </span>
77 </div> 77 </div>
78 78
79 <div class="mt-3 d-flex" *ngIf="isAdminView && abuse.moderationComment"> 79 <div class="mt-3 d-flex" *ngIf="isAdminView && abuse.moderationComment">
80 <span class="col-3 moderation-expanded-label" i18n>Note</span> 80 <span class="moderation-expanded-label" i18n>Note</span>
81 <span class="col-9 moderation-expanded-text d-block" [innerHTML]="abuse.moderationCommentHtml"></span> 81 <span class="moderation-expanded-text d-block" [innerHTML]="abuse.moderationCommentHtml"></span>
82 </div> 82 </div>
83 83
84 </div> 84 </div>
85 85
86 <!-- report right part (video/comment details) --> 86 <!-- report right part (video/comment details) -->
87 <div class="col-4"> 87 <div class="right">
88 <div *ngIf="abuse.video" class="screenratio"> 88 <div *ngIf="abuse.video" class="screenratio">
89 <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div> 89 <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
90 <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div> 90 <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div>
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 @@
5 5
6.moderation-expanded { 6.moderation-expanded {
7 font-size: 90%; 7 font-size: 90%;
8 display: flex;
9 flex-wrap: wrap;
10 justify-content: space-between;
8 11
9 .moderation-expanded-label { 12 .moderation-expanded-label {
13 @include margin-right(5px);
14
10 font-weight: $font-semibold; 15 font-weight: $font-semibold;
11 display: inline-block; 16 display: inline-block;
12 vertical-align: top; 17 vertical-align: top;
13 text-align: end; 18 text-align: end;
19 min-width: 100px;
14 } 20 }
15 21
16 .moderation-expanded-text { 22 .moderation-expanded-text {
@@ -21,6 +27,17 @@
21 margin-bottom: 0 !important; 27 margin-bottom: 0 !important;
22 } 28 }
23 } 29 }
30
31 .right {
32 width: 50%;
33 max-width: 500px;
34 }
35
36 @media screen and (max-width: $primeng-breakpoint) {
37 .right {
38 width: 100%;
39 }
40 }
24} 41}
25 42
26.screenratio { 43.screenratio {
@@ -125,3 +142,13 @@ my-action-dropdown.show {
125 } 142 }
126 } 143 }
127} 144}
145
146my-abuse-details {
147 width: 100%;
148}
149
150@media screen and (max-width: $primeng-breakpoint) {
151 .abuse-messages {
152 justify-content: flex-start !important;
153 }
154}
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}