aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/my-account-videos
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-05-11 11:16:21 +0200
committerGitHub <noreply@github.com>2020-05-11 11:16:21 +0200
commit8a3183e50dab38ea79b9557840dce546aa1958ca (patch)
tree83c137b82c1190cd4113efacd9cb2010193bc649 /client/src/app/+my-account/my-account-videos
parent8544d8f561f6cd630973da041f36e46500fe95b7 (diff)
downloadPeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.tar.gz
PeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.tar.zst
PeerTube-8a3183e50dab38ea79b9557840dce546aa1958ca.zip
Fix non-fixed header and menu when overflow-x body on touchscreens (#2711)
* Make my-account-videos responsive on small screens * Make my-account-channels responsive for small screens * Make search result responsive on small screen Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/+my-account/my-account-videos')
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html16
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss32
2 files changed, 41 insertions, 7 deletions
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index b07b9c1a6..55cbfda95 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -23,15 +23,17 @@
23 </ng-template> 23 </ng-template>
24 24
25 <ng-template ptTemplate="rowButtons" let-video> 25 <ng-template ptTemplate="rowButtons" let-video>
26 <my-delete-button (click)="deleteVideo(video)"></my-delete-button> 26 <div class="action-button">
27 <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
27 28
28 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> 29 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
29 30
30 <my-button i18n-label label="Change ownership" 31 <my-button i18n-label label="Change ownership"
31 className="action-button-change-ownership grey-button" 32 className="action-button-change-ownership grey-button"
32 icon="im-with-her" 33 icon="im-with-her"
33 (click)="changeOwnership($event, video)" 34 (click)="changeOwnership($event, video)"
34 ></my-button> 35 ></my-button>
36 </div>
35 </ng-template> 37 </ng-template>
36</my-videos-selection> 38</my-videos-selection>
37 39
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 40bae7668..a3422c239 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -29,6 +29,10 @@
29} 29}
30 30
31::ng-deep { 31::ng-deep {
32 .video {
33 flex-wrap: wrap;
34 }
35
32 .action-button span { 36 .action-button span {
33 white-space: nowrap; 37 white-space: nowrap;
34 } 38 }
@@ -50,6 +54,13 @@
50 } 54 }
51} 55}
52 56
57.action-button {
58 display: flex;
59 margin-left: 55px;
60 margin-top: 10px;
61 align-self: flex-end;
62}
63
53my-delete-button, 64my-delete-button,
54my-edit-button { 65my-edit-button {
55 margin-right: 10px; 66 margin-right: 10px;
@@ -60,6 +71,12 @@ my-edit-button {
60 flex-direction: column; 71 flex-direction: column;
61 } 72 }
62 73
74 .action-button {
75 flex-direction: column;
76 align-self: center;
77 margin-left: 0px;
78 }
79
63 ::ng-deep { 80 ::ng-deep {
64 .video-miniature { 81 .video-miniature {
65 align-items: center; 82 align-items: center;
@@ -98,3 +115,18 @@ my-edit-button {
98 } 115 }
99 } 116 }
100} 117}
118
119// Adapt my-video-miniature on small screens with menu
120@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
121 :host-context(.main-col:not(.expanded)) {
122 ::ng-deep {
123 .video-miniature {
124 flex-direction: column;
125
126 .video-miniature-name {
127 max-width: 223px;
128 }
129 }
130 }
131 }
132}