aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+accounts
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-01 11:10:27 +0200
committerChocobozzz <me@florianbigard.com>2021-04-01 16:54:49 +0200
commit0f7407d926cf7774f8f730dba08327569c11680c (patch)
tree6b44be72187390514d9068b78851b48b1a9b7244 /client/src/app/+accounts
parent33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff)
downloadPeerTube-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/+accounts')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html1
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss6
-rw-r--r--client/src/app/+accounts/accounts.component.scss4
3 files changed, 7 insertions, 4 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 19a4b3c9c..96780e938 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -39,6 +39,7 @@
39 <my-video-miniature 39 <my-video-miniature
40 *ngFor="let video of getVideosOf(videoChannel)" 40 *ngFor="let video of getVideosOf(videoChannel)"
41 [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions" 41 [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
42 thumbnailSize="medium"
42 ></my-video-miniature> 43 ></my-video-miniature>
43 44
44 <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel"> 45 <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 8f1e9deb5..7e88802f3 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -3,7 +3,7 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5.margin-content { 5.margin-content {
6 @include fluid-videos-miniature-margins; 6 @include grid-videos-miniature-margins;
7} 7}
8 8
9.channel { 9.channel {
@@ -93,6 +93,8 @@ my-subscribe-button {
93 93
94 my-video-miniature { 94 my-video-miniature {
95 margin-right: 15px; 95 margin-right: 15px;
96 min-width: $video-thumbnail-medium-width;
97 max-width: $video-thumbnail-medium-width;
96 } 98 }
97 99
98 .no-results { 100 .no-results {
@@ -105,7 +107,7 @@ my-subscribe-button {
105 position: absolute; 107 position: absolute;
106 right: 0; 108 right: 0;
107 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); 109 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
108 padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px; 110 padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
109 z-index: z(miniature) + 1; 111 z-index: z(miniature) + 1;
110 112
111 a { 113 a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index d7213df1d..a836e84ce 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,7 +15,7 @@
15} 15}
16 16
17.links { 17.links {
18 @include fluid-videos-miniature-margins; 18 @include grid-videos-miniature-margins;
19 19
20 display: flex; 20 display: flex;
21 justify-content: space-between; 21 justify-content: space-between;
@@ -44,7 +44,7 @@ my-user-moderation-dropdown,
44} 44}
45 45
46.account-info { 46.account-info {
47 @include fluid-videos-miniature-margins(false, 15px); 47 @include grid-videos-miniature-margins(false, 15px);
48 48
49 display: grid; 49 display: grid;
50 grid-template-columns: 1fr min-content; 50 grid-template-columns: 1fr min-content;