aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-05 15:23:41 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 15:23:41 +0200
commit3143ae17a014576ec21b535ba9e8266ca727a152 (patch)
tree6556a402759b8177471486a77e638da65495fb51 /client/src/app
parent8dfceec44a5eec8b0190d1d5076aab0f03a0cb52 (diff)
downloadPeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.tar.gz
PeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.tar.zst
PeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.zip
Improve playlist element style
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html2
-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
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss37
6 files changed, 49 insertions, 43 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index 95d4519fa..284694b7f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -7,7 +7,7 @@
7 ></my-video-playlist-miniature> 7 ></my-video-playlist-miniature>
8 </div> 8 </div>
9 9
10 <div class="col-xs-12 col-md-7 col-xl-9"> 10 <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
11 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div> 11 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
12 12
13 <div 13 <div
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;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index c1eaf9b2b..d61a0bc3e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -16,6 +16,8 @@ $player-factor: 1.7; // 16/9
16 16
17@mixin playlist-below-player { 17@mixin playlist-below-player {
18 width: 100%; 18 width: 100%;
19 height: auto;
20 max-height: 300px;
19 border-bottom: 1px solid $separator-border-color; 21 border-bottom: 1px solid $separator-border-color;
20} 22}
21 23
@@ -51,6 +53,12 @@ $player-factor: 1.7; // 16/9
51 justify-content: center; 53 justify-content: center;
52 margin: 0 -15px; 54 margin: 0 -15px;
53 55
56 #videojs-wrapper {
57 display: flex;
58 justify-content: center;
59 flex-grow: 1;
60 }
61
54 .remote-server-down { 62 .remote-server-down {
55 color: #fff; 63 color: #fff;
56 display: flex; 64 display: flex;
@@ -73,10 +81,12 @@ $player-factor: 1.7; // 16/9
73 } 81 }
74 82
75 .playlist { 83 .playlist {
76 width: 400px; 84 min-width: 200px;
85 max-width: 470px;
77 height: 66vh; 86 height: 66vh;
78 background-color: var(--mainBackgroundColor); 87 background-color: var(--mainBackgroundColor);
79 overflow-y: auto; 88 overflow-y: auto;
89 border-bottom: 1px solid $separator-border-color;
80 90
81 .playlist-info { 91 .playlist-info {
82 padding: 5px 30px; 92 padding: 5px 30px;
@@ -492,6 +502,15 @@ my-video-comments {
492} 502}
493 503
494@media screen and (max-width: 1100px) { 504@media screen and (max-width: 1100px) {
505 #video-wrapper {
506 flex-direction: column;
507 justify-content: center;
508
509 .playlist {
510 @include playlist-below-player;
511 }
512 }
513
495 .video-bottom { 514 .video-bottom {
496 flex-direction: column; 515 flex-direction: column;
497 516
@@ -506,22 +525,6 @@ my-video-comments {
506 } 525 }
507} 526}
508 527
509@media screen and (max-width: 900px) {
510 #video-wrapper {
511 flex-direction: column;
512 justify-content: center;
513
514 #videojs-wrapper {
515 display: flex;
516 justify-content: center;
517 }
518
519 .playlist {
520 @include playlist-below-player;
521 }
522 }
523}
524
525@media screen and (max-width: 600px) { 528@media screen and (max-width: 600px) {
526 .video-bottom { 529 .video-bottom {
527 margin: 20px 0 0 0 !important; 530 margin: 20px 0 0 0 !important;