aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss11
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts2
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-miniature.component.html12
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-miniature.component.scss28
4 files changed, 28 insertions, 25 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index f57fd2e1c..f8a068cbc 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -13,7 +13,7 @@
13 background-color: rgba(0, 0, 0, 0.05); 13 background-color: rgba(0, 0, 0, 0.05);
14 14
15 .more { 15 .more {
16 display: block; 16 opacity: 1;
17 } 17 }
18 } 18 }
19 19
@@ -24,11 +24,10 @@
24 a { 24 a {
25 @include disable-default-a-behaviour; 25 @include disable-default-a-behaviour;
26 26
27 min-width: 0;
28 display: flex; 27 display: flex;
28 min-width: 0;
29 align-items: center; 29 align-items: center;
30 cursor: pointer; 30 cursor: pointer;
31 flex-grow: 1;
32 31
33 .position { 32 .position {
34 font-weight: $font-semibold; 33 font-weight: $font-semibold;
@@ -55,6 +54,7 @@
55 .video-info { 54 .video-info {
56 display: flex; 55 display: flex;
57 flex-direction: column; 56 flex-direction: column;
57 align-self: flex-start;
58 min-width: 0; 58 min-width: 0;
59 59
60 a { 60 a {
@@ -69,6 +69,7 @@
69 .video-info-name { 69 .video-info-name {
70 font-size: 18px; 70 font-size: 18px;
71 font-weight: $font-semibold; 71 font-weight: $font-semibold;
72 display: inline-block;
72 73
73 @include ellipsis; 74 @include ellipsis;
74 } 75 }
@@ -83,10 +84,10 @@
83 justify-self: flex-end; 84 justify-self: flex-end;
84 margin-left: auto; 85 margin-left: auto;
85 cursor: pointer; 86 cursor: pointer;
86 display: none; 87 opacity: 0;
87 88
88 &.show { 89 &.show {
89 display: block; 90 opacity: 1;
90 } 91 }
91 92
92 .icon-more { 93 .icon-more {
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 6cc5b87b4..57990707a 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -1,4 +1,4 @@
1import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core' 1import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
2import { Video } from '@app/shared/video/video.model' 2import { Video } from '@app/shared/video/video.model'
3import { VideoPlaylistElementUpdate } from '@shared/models' 3import { VideoPlaylistElementUpdate } from '@shared/models'
4import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core' 4import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
index faf906c59..86f6664cb 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -19,14 +19,14 @@
19 {{ playlist.displayName }} 19 {{ playlist.displayName }}
20 </a> 20 </a>
21 21
22 <div class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</div> 22 <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
23 {{ playlist.videoChannelBy }}
24 </a>
23 25
24 <div class="video-info-by-date"> 26 <div class="privacy-date">
25 <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy"> 27 <span class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
26 {{ playlist.videoChannelBy }}
27 </a>
28 28
29 <div i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</div> 29 <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
30 </div> 30 </div>
31 31
32 <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div> 32 <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 94edd1177..8947e72d1 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -43,18 +43,25 @@
43 43
44 .miniature-name { 44 .miniature-name {
45 @include miniature-name; 45 @include miniature-name;
46
47 @include ellipsis-multiline(1.3em, 2);
48
49 margin: 0;
46 } 50 }
47 51
48 .video-info-by-date { 52 .by {
49 display: flex; 53 @include disable-default-a-behaviour;
50 font-size: 13px;
51 margin: 5px 0;
52 54
53 .by { 55 display: block;
54 @include disable-default-a-behaviour; 56 color: $grey-foreground-color;
57 }
55 58
56 display: block; 59 .privacy-date {
57 color: var(--mainForegroundColor); 60 margin-top: 5px;
61
62 .video-info-privacy {
63 font-size: 14px;
64 font-weight: $font-semibold;
58 65
59 &::after { 66 &::after {
60 content: '-'; 67 content: '-';
@@ -63,11 +70,6 @@
63 } 70 }
64 } 71 }
65 72
66 .video-info-privacy {
67 font-size: 13px;
68 font-weight: $font-semibold;
69 }
70
71 .video-info-description { 73 .video-info-description {
72 margin-top: 10px; 74 margin-top: 10px;
73 color: $grey-foreground-color; 75 color: $grey-foreground-color;