diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-19 10:20:08 +0200 |
---|---|---|
committer | Rigel Kent <par@rigelk.eu> | 2020-05-01 16:41:02 +0200 |
commit | aeb1bed9835b3b092832160245080d4023c14d91 (patch) | |
tree | 366cdf113afe748ca59f1bc40ce589cac781cc3c /client/src/app/+admin/moderation/video-abuse-list | |
parent | 5fd4ca0051c7e7f3f8c47bcbde5cab0c56532e64 (diff) | |
download | PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.gz PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.zst PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.zip |
Factorize video display in table for moderation components, apply it to blacklisted videos as well
Diffstat (limited to 'client/src/app/+admin/moderation/video-abuse-list')
-rw-r--r-- | client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html | 22 | ||||
-rw-r--r-- | client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss | 71 |
2 files changed, 15 insertions, 78 deletions
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html index 67ef28408..e2c08f910 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html | |||
@@ -52,16 +52,16 @@ | |||
52 | </td> | 52 | </td> |
53 | 53 | ||
54 | <td *ngIf="!videoAbuse.video.deleted"> | 54 | <td *ngIf="!videoAbuse.video.deleted"> |
55 | <a [href]="getVideoUrl(videoAbuse)" class="video-abuse-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer"> | 55 | <a [href]="getVideoUrl(videoAbuse)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer"> |
56 | <div class="video-abuse-video"> | 56 | <div class="video-table-video"> |
57 | <div class="video-abuse-video-image"> | 57 | <div class="video-table-video-image"> |
58 | <img [src]="videoAbuse.video.thumbnailPath"> | 58 | <img [src]="videoAbuse.video.thumbnailPath"> |
59 | <span | 59 | <span |
60 | class="video-abuse-video-image-label" *ngIf="videoAbuse.count > 1" | 60 | class="video-table-video-image-label" *ngIf="videoAbuse.count > 1" |
61 | i18n-title title="This video has been reported multiple times." | 61 | i18n-title title="This video has been reported multiple times." |
62 | >{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span> | 62 | >{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span> |
63 | </div> | 63 | </div> |
64 | <div class="video-abuse-video-text"> | 64 | <div class="video-table-video-text"> |
65 | <div> | 65 | <div> |
66 | {{ videoAbuse.video.name }} | 66 | {{ videoAbuse.video.name }} |
67 | <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span> | 67 | <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span> |
@@ -74,9 +74,9 @@ | |||
74 | </td> | 74 | </td> |
75 | 75 | ||
76 | <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse"> | 76 | <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse"> |
77 | <div class="video-abuse-video" i18n-title title="Video was deleted"> | 77 | <div class="video-table-video" i18n-title title="Video was deleted"> |
78 | <div class="video-abuse-video-image"><span i18n>Deleted</span></div> | 78 | <div class="video-table-video-image"><span i18n>Deleted</span></div> |
79 | <div class="video-abuse-video-text"> | 79 | <div class="video-table-video-text"> |
80 | <div> | 80 | <div> |
81 | {{ videoAbuse.video.name }} | 81 | {{ videoAbuse.video.name }} |
82 | <span class="glyphicon glyphicon-trash"></span> | 82 | <span class="glyphicon glyphicon-trash"></span> |
@@ -123,7 +123,7 @@ | |||
123 | <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span> | 123 | <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span> |
124 | </div> | 124 | </div> |
125 | </div> | 125 | </div> |
126 | <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" i18n> | 126 | <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" i18n> |
127 | {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> | 127 | {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> |
128 | </a> | 128 | </a> |
129 | </span> | 129 | </span> |
@@ -142,14 +142,14 @@ | |||
142 | <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span> | 142 | <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span> |
143 | </div> | 143 | </div> |
144 | </div> | 144 | </div> |
145 | <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" *ngIf="!videoAbuse.video.deleted" i18n> | 145 | <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" i18n> |
146 | {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> | 146 | {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> |
147 | </a> | 147 | </a> |
148 | </span> | 148 | </span> |
149 | </div> | 149 | </div> |
150 | <div class="d-flex"> | 150 | <div class="d-flex"> |
151 | <span class="col-3 moderation-expanded-label" i18n>Updated</span> | 151 | <span class="col-3 moderation-expanded-label" i18n>Updated</span> |
152 | <time class="col-9 moderation-expanded-text video-abuse-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time> | 152 | <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time> |
153 | </div> | 153 | </div> |
154 | 154 | ||
155 | <!-- report text --> | 155 | <!-- report text --> |
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss index b5dc53b3a..a9251e2f0 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss | |||
@@ -9,78 +9,15 @@ | |||
9 | } | 9 | } |
10 | } | 10 | } |
11 | 11 | ||
12 | .video-abuse-date-updated { | 12 | .video-details-date-updated { |
13 | font-size: 90%; | 13 | font-size: 90%; |
14 | margin-top: .1rem; | 14 | margin-top: .1rem; |
15 | } | 15 | } |
16 | 16 | ||
17 | .video-abuse-links { | 17 | .video-details-links { |
18 | @include disable-default-a-behaviour; | 18 | @include disable-default-a-behaviour; |
19 | } | 19 | } |
20 | 20 | ||
21 | .video-abuse-video-link { | 21 | .video-abuse-states .glyphicon-comment { |
22 | @include disable-outline; | 22 | margin-left: 0.5rem; |
23 | position: relative; | ||
24 | top: 3px; | ||
25 | } | ||
26 | |||
27 | .video-abuse-video { | ||
28 | display: inline-flex; | ||
29 | |||
30 | .video-abuse-video-image { | ||
31 | @include miniature-thumbnail; | ||
32 | |||
33 | $image-height: 45px; | ||
34 | |||
35 | height: $image-height; | ||
36 | width: #{(16/9) * $image-height}; | ||
37 | margin-right: 0.5rem; | ||
38 | border-radius: 2px; | ||
39 | border: none; | ||
40 | background: transparent; | ||
41 | display: inline-flex; | ||
42 | justify-content: center; | ||
43 | align-items: center; | ||
44 | position: relative; | ||
45 | |||
46 | img { | ||
47 | height: 100%; | ||
48 | width: 100%; | ||
49 | border-radius: 2px; | ||
50 | } | ||
51 | |||
52 | span { | ||
53 | color: var(--inputPlaceholderColor); | ||
54 | } | ||
55 | |||
56 | .video-abuse-video-image-label { | ||
57 | @include static-thumbnail-overlay; | ||
58 | position: absolute; | ||
59 | border-radius: 3px; | ||
60 | font-size: 10px; | ||
61 | padding: 0 3px; | ||
62 | line-height: 1.3; | ||
63 | bottom: 2px; | ||
64 | right: 2px; | ||
65 | } | ||
66 | } | ||
67 | |||
68 | .video-abuse-video-text { | ||
69 | display: inline-flex; | ||
70 | flex-direction: column; | ||
71 | justify-content: center; | ||
72 | font-size: 90%; | ||
73 | color: var(--mainForegroundColor); | ||
74 | line-height: 1rem; | ||
75 | |||
76 | div .glyphicon { | ||
77 | font-size: 80%; | ||
78 | color: gray; | ||
79 | margin-left: 0.1rem; | ||
80 | } | ||
81 | |||
82 | div + div { | ||
83 | font-size: 80%; | ||
84 | } | ||
85 | } | ||
86 | } | 23 | } |