aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/app/shared
parentdbb76162b9cf2d048505e4d6170b694388f68e75 (diff)
downloadPeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.gz
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.tar.zst
PeerTube-d94b8ecf7dddb82b84302854c5fb761f90a82e39.zip
Improve admin tables responsive
Diffstat (limited to 'client/src/app/shared')
-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
2 files changed, 43 insertions, 16 deletions
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}