diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-05-11 11:16:21 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-11 11:16:21 +0200 |
commit | 8a3183e50dab38ea79b9557840dce546aa1958ca (patch) | |
tree | 83c137b82c1190cd4113efacd9cb2010193bc649 /client/src/app | |
parent | 8544d8f561f6cd630973da041f36e46500fe95b7 (diff) | |
download | PeerTube-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')
5 files changed, 111 insertions, 14 deletions
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html index 03d45227e..4cf08ab66 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html | |||
@@ -19,14 +19,14 @@ | |||
19 | 19 | ||
20 | <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> | 20 | <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> |
21 | 21 | ||
22 | <div class="video-channel-buttons"> | ||
23 | <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button> | ||
24 | <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button> | ||
25 | </div> | ||
26 | |||
22 | <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> | 27 | <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> |
23 | <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart> | 28 | <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart> |
24 | </div> | 29 | </div> |
25 | </div> | 30 | </div> |
26 | |||
27 | <div class="video-channel-buttons"> | ||
28 | <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button> | ||
29 | <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button> | ||
30 | </div> | ||
31 | </div> | 31 | </div> |
32 | </div> | 32 | </div> |
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index e1acf6cd6..144c2440b 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss | |||
@@ -50,6 +50,7 @@ | |||
50 | } | 50 | } |
51 | 51 | ||
52 | .video-channel-buttons { | 52 | .video-channel-buttons { |
53 | margin-top: 10px; | ||
53 | min-width: 190px; | 54 | min-width: 190px; |
54 | } | 55 | } |
55 | } | 56 | } |
@@ -80,6 +81,10 @@ | |||
80 | flex-direction: column; | 81 | flex-direction: column; |
81 | align-items: center !important; | 82 | align-items: center !important; |
82 | margin: auto; | 83 | margin: auto; |
84 | |||
85 | .video-channel-name { | ||
86 | margin-left: 0px !important; | ||
87 | } | ||
83 | } | 88 | } |
84 | } | 89 | } |
85 | 90 | ||
@@ -88,7 +93,23 @@ | |||
88 | } | 93 | } |
89 | 94 | ||
90 | .video-channel-buttons { | 95 | .video-channel-buttons { |
91 | margin-top: 10px; | 96 | align-self: center; |
97 | } | ||
98 | } | ||
99 | } | ||
100 | |||
101 | @media screen and (min-width: breakpoint(lg)) { | ||
102 | :host-context(.main-col:not(.expanded)) { | ||
103 | .video-channel-buttons { | ||
104 | float: right; | ||
105 | } | ||
106 | } | ||
107 | } | ||
108 | |||
109 | @media screen and (min-width: $small-view) { | ||
110 | :host-context(.expanded) { | ||
111 | .video-channel-buttons { | ||
112 | float: right; | ||
92 | } | 113 | } |
93 | } | 114 | } |
94 | } | 115 | } |
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 | |||
53 | my-delete-button, | 64 | my-delete-button, |
54 | my-edit-button { | 65 | my-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 | } | ||
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 641647e2e..78749cf20 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss | |||
@@ -81,6 +81,48 @@ | |||
81 | } | 81 | } |
82 | } | 82 | } |
83 | 83 | ||
84 | @media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) { | ||
85 | .video-channel-info .video-channel-names { | ||
86 | flex-direction: column !important; | ||
87 | |||
88 | .video-channel-name { | ||
89 | @include ellipsis; // Ellipsis and max-width on channel-name to not break screen | ||
90 | |||
91 | max-width: 250px; | ||
92 | margin-left: 0 !important; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | :host-context(.main-col:not(.expanded)) { | ||
97 | // Override the min-width: 500px to not break screen | ||
98 | ::ng-deep .video-miniature-information { | ||
99 | min-width: 300px !important; | ||
100 | } | ||
101 | } | ||
102 | } | ||
103 | |||
104 | @media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) { | ||
105 | :host-context(.main-col:not(.expanded)) { | ||
106 | .video-channel-info .video-channel-names { | ||
107 | .video-channel-name { | ||
108 | max-width: 160px; | ||
109 | } | ||
110 | } | ||
111 | |||
112 | // Override the min-width: 500px to not break screen | ||
113 | ::ng-deep .video-miniature-information { | ||
114 | min-width: 223px !important; | ||
115 | } | ||
116 | } | ||
117 | |||
118 | :host-context(.expanded) { | ||
119 | // Override the min-width: 500px to not break screen | ||
120 | ::ng-deep .video-miniature-information { | ||
121 | min-width: 300px !important; | ||
122 | } | ||
123 | } | ||
124 | } | ||
125 | |||
84 | @media screen and (max-width: $small-view) { | 126 | @media screen and (max-width: $small-view) { |
85 | .search-result { | 127 | .search-result { |
86 | .entry.video-channel, | 128 | .entry.video-channel, |
@@ -90,7 +132,7 @@ | |||
90 | justify-content: center; | 132 | justify-content: center; |
91 | align-items: center; | 133 | align-items: center; |
92 | text-align: center; | 134 | text-align: center; |
93 | 135 | ||
94 | img { | 136 | img { |
95 | margin: 0; | 137 | margin: 0; |
96 | } | 138 | } |