diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-01 11:10:27 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-01 16:54:49 +0200 |
commit | 0f7407d926cf7774f8f730dba08327569c11680c (patch) | |
tree | 6b44be72187390514d9068b78851b48b1a9b7244 /client/src/app/+my-library/my-video-playlists | |
parent | 33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff) | |
download | PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.gz PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.zst PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.zip |
Refactor video miniature
Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
Diffstat (limited to 'client/src/app/+my-library/my-video-playlists')
4 files changed, 69 insertions, 58 deletions
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html index a97b2b4fb..e7e3c17b3 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div class="row"> | 1 | <div class="root"> |
2 | 2 | ||
3 | <div class="playlist-info col-xs-12 col-md-5 col-xl-3"> | 3 | <div class="playlist-info"> |
4 | <my-video-playlist-miniature | 4 | <my-video-playlist-miniature |
5 | *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" | 5 | *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" |
6 | [displayDescription]="true" [displayPrivacy]="true" | 6 | [displayDescription]="true" [displayPrivacy]="true" |
@@ -20,7 +20,7 @@ | |||
20 | 20 | ||
21 | </div> | 21 | </div> |
22 | 22 | ||
23 | <div class="playlist-elements col-xs-12 col-md-7 col-xl-9"> | 23 | <div class="playlist-elements"> |
24 | <div class="no-results" *ngIf="pagination.totalItems === 0"> | 24 | <div class="no-results" *ngIf="pagination.totalItems === 0"> |
25 | <div i18n>No videos in this playlist.</div> | 25 | <div i18n>No videos in this playlist.</div> |
26 | 26 | ||
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss index 87a836a46..0c68dedf6 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss | |||
@@ -2,17 +2,21 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | .root { | ||
6 | display: grid; | ||
7 | grid-template-columns: auto 1fr; | ||
8 | } | ||
9 | |||
5 | .playlist-info { | 10 | .playlist-info { |
11 | grid-column: 1; | ||
6 | background-color: pvar(--submenuBackgroundColor); | 12 | background-color: pvar(--submenuBackgroundColor); |
7 | margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); | 13 | margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); |
8 | margin-top: -$sub-menu-margin-bottom; | 14 | margin-top: -$sub-menu-margin-bottom; |
9 | 15 | ||
10 | padding: 10px; | 16 | padding: 15px; |
11 | 17 | ||
12 | display: flex; | 18 | display: flex; |
13 | flex-direction: column; | 19 | flex-direction: column; |
14 | justify-content: flex-start; | ||
15 | align-items: center; | ||
16 | 20 | ||
17 | /* fix ellipsis dots background color */ | 21 | /* fix ellipsis dots background color */ |
18 | ::ng-deep .miniature-name::after { | 22 | ::ng-deep .miniature-name::after { |
@@ -59,15 +63,35 @@ | |||
59 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | 63 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); |
60 | } | 64 | } |
61 | 65 | ||
62 | @media screen and (max-width: $small-view) { | 66 | .playlist-elements { |
67 | grid-column: 2; | ||
68 | } | ||
69 | |||
70 | my-video-playlist-miniature { | ||
71 | width: $video-thumbnail-width; | ||
72 | } | ||
73 | |||
74 | @include on-small-main-col { | ||
75 | my-video-playlist-miniature { | ||
76 | width: $video-thumbnail-medium-width; | ||
77 | } | ||
78 | } | ||
79 | |||
80 | @include on-mobile-main-col { | ||
81 | .root { | ||
82 | display: block; | ||
83 | } | ||
84 | |||
63 | .playlist-info { | 85 | .playlist-info { |
64 | width: 100vw; | 86 | width: calc(100% + (2 * var(--horizontalMarginContent))); |
65 | padding-top: 20px; | 87 | padding-top: 20px; |
66 | margin-bottom: 10px; | 88 | margin-bottom: 10px; |
67 | } | 89 | } |
68 | 90 | ||
69 | .playlist-elements { | 91 | my-video-playlist-miniature, |
70 | padding: 0 !important; | 92 | .playlist-buttons { |
93 | margin-left: auto; | ||
94 | margin-right: auto; | ||
71 | } | 95 | } |
72 | 96 | ||
73 | ::ng-deep my-video-playlist-element-miniature { | 97 | ::ng-deep my-video-playlist-element-miniature { |
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html index afcf6a084..b88ea3db7 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html | |||
@@ -1,8 +1,6 @@ | |||
1 | <h1> | 1 | <h1> |
2 | <span> | 2 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> |
3 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> | 3 | <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> |
4 | <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> | ||
5 | </span> | ||
6 | </h1> | 4 | </h1> |
7 | 5 | ||
8 | <div class="video-playlists-header d-flex justify-content-between"> | 6 | <div class="video-playlists-header d-flex justify-content-between"> |
@@ -21,10 +19,10 @@ | |||
21 | 19 | ||
22 | <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> | 20 | <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> |
23 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> | 21 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> |
24 | <div class="miniature-wrapper"> | 22 | <my-video-playlist-miniature |
25 | <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true" | 23 | [playlist]="playlist" [toManage]="true" [displayChannel]="true" |
26 | ></my-video-playlist-miniature> | 24 | [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true" |
27 | </div> | 25 | ></my-video-playlist-miniature> |
28 | 26 | ||
29 | <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> | 27 | <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> |
30 | <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button> | 28 | <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button> |
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss index 2b7c88246..94187efd4 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss | |||
@@ -1,6 +1,10 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | h1 { | ||
5 | display: flex; | ||
6 | } | ||
7 | |||
4 | .create-button { | 8 | .create-button { |
5 | @include create-button; | 9 | @include create-button; |
6 | } | 10 | } |
@@ -9,64 +13,45 @@ input[type=text] { | |||
9 | @include peertube-input-text(300px); | 13 | @include peertube-input-text(300px); |
10 | } | 14 | } |
11 | 15 | ||
12 | ::ng-deep .action-button { | ||
13 | &.action-button-delete { | ||
14 | margin-right: 10px; | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .video-playlist { | 16 | .video-playlist { |
19 | @include row-blocks; | 17 | @include row-blocks($column-responsive: false); |
20 | 18 | } | |
21 | .miniature-wrapper { | ||
22 | flex-grow: 1; | ||
23 | |||
24 | ::ng-deep .miniature { | ||
25 | display: flex; | ||
26 | |||
27 | .miniature-info { | ||
28 | margin-left: 10px; | ||
29 | width: auto; | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | 19 | ||
34 | .video-playlist-buttons { | 20 | .video-playlist-buttons { |
35 | min-width: 190px; | 21 | display: flex; |
36 | height: max-content; | 22 | margin-left: 10px; |
37 | } | 23 | align-self: flex-end; |
38 | } | 24 | } |
39 | 25 | ||
40 | .video-playlists-header { | 26 | .video-playlists-header { |
41 | margin-bottom: 30px; | 27 | margin-bottom: 30px; |
42 | } | 28 | } |
43 | 29 | ||
44 | @media screen and (max-width: $small-view) { | 30 | my-video-playlist-miniature { |
31 | display: block; | ||
32 | flex-grow: 1; | ||
33 | } | ||
34 | |||
35 | my-delete-button { | ||
36 | margin-right: 10px; | ||
37 | } | ||
38 | |||
39 | @include on-small-main-col { | ||
45 | .video-playlists-header { | 40 | .video-playlists-header { |
46 | text-align: center; | 41 | text-align: center; |
47 | } | 42 | } |
48 | 43 | ||
49 | .video-playlist { | 44 | .video-playlist { |
50 | 45 | flex-wrap: wrap; | |
51 | .video-playlist-buttons { | ||
52 | margin-top: 10px; | ||
53 | } | ||
54 | } | 46 | } |
55 | 47 | ||
56 | my-video-playlist-miniature ::ng-deep .miniature { | 48 | .video-playlist-buttons { |
57 | flex-direction: column; | 49 | margin-top: 10px; |
58 | 50 | margin-left: auto; | |
59 | .miniature-info { | ||
60 | margin-left: 0 !important; | ||
61 | } | ||
62 | |||
63 | .miniature-name { | ||
64 | max-width: $video-thumbnail-width; | ||
65 | } | ||
66 | } | 51 | } |
67 | } | 52 | } |
68 | 53 | ||
69 | @media screen and (max-width: $mobile-view) { | 54 | @include on-mobile-main-col { |
70 | .video-playlists-header { | 55 | .video-playlists-header { |
71 | flex-direction: column; | 56 | flex-direction: column; |
72 | 57 | ||
@@ -75,4 +60,8 @@ input[type=text] { | |||
75 | margin-bottom: 12px; | 60 | margin-bottom: 12px; |
76 | } | 61 | } |
77 | } | 62 | } |
63 | |||
64 | .action-button { | ||
65 | margin-left: 0; | ||
66 | } | ||
78 | } | 67 | } |