aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
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
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')
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html10
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss23
-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
-rw-r--r--client/src/app/search/search.component.scss44
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
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}
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 }