aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-05-01 10:45:07 +0200
committerGitHub <noreply@github.com>2020-05-01 10:45:07 +0200
commit165ee2929bc76fc7f9985ae81cc33736820c7865 (patch)
treeaf89ec858c1a2177c36eef3bc12726eab2722ff1 /client/src
parent7a03209d28f3f31d706dee08ae487d2ca1926893 (diff)
downloadPeerTube-165ee2929bc76fc7f9985ae81cc33736820c7865.tar.gz
PeerTube-165ee2929bc76fc7f9985ae81cc33736820c7865.tar.zst
PeerTube-165ee2929bc76fc7f9985ae81cc33736820c7865.zip
Fix tables width, paginators, button on mobile / touchscreens (#2695)
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+my-account/my-account.component.scss2
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html2
-rw-r--r--client/src/sass/application.scss38
-rw-r--r--client/src/sass/bootstrap.scss2
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss4
-rw-r--r--client/src/sass/primeng-custom.scss45
6 files changed, 81 insertions, 12 deletions
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index d452a2b21..fd47aec86 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,5 +1,3 @@
1
2
3.row { 1.row {
4 flex-direction: column; 2 flex-direction: column;
5 width: 100%; 3 width: 100%;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 14cfe9a22..0efc01d38 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,4 +1,4 @@
1<div class="dropdown-root" ngbDropdown [placement]="placement" *ngIf="areActionsDisplayed(actions, entry)"> 1<div class="dropdown-root" ngbDropdown [placement]="placement" container="body" *ngIf="areActionsDisplayed(actions, entry)">
2 <div 2 <div
3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }" 3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
4 ngbDropdownToggle role="button" 4 ngbDropdownToggle role="button"
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ab0bf0a08..f54fecda8 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -267,7 +267,7 @@ table {
267 top: #{-($header-height + 20px)}; 267 top: #{-($header-height + 20px)};
268} 268}
269 269
270@media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) { 270@media screen and (max-width: #{breakpoint(xxl)}) {
271 .main-col { 271 .main-col {
272 &.expanded { 272 &.expanded {
273 .margin-content { 273 .margin-content {
@@ -278,7 +278,7 @@ table {
278 } 278 }
279} 279}
280 280
281@media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { 281@media screen and (max-width: #{breakpoint(lg)}) {
282 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ 282 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
283 .main-col { 283 .main-col {
284 &, &.expanded { 284 &, &.expanded {
@@ -343,6 +343,40 @@ table {
343 } 343 }
344} 344}
345 345
346// overflow-databale responsive rules
347@media screen and (max-width: #{breakpoint(xxl)}) {
348 .main-col {
349 &.expanded {
350 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2);
351 }
352
353 &:not(.expanded) {
354 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
355 }
356 }
357}
358
359@media screen and (max-width: #{breakpoint(lg)}) {
360 .main-col {
361 &.expanded {
362 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
363 }
364
365 &:not(.expanded) {
366 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
367 }
368 }
369}
370
371@media screen and (max-width: $small-view) {
372 .main-col {
373 &:not(.expanded),
374 &.expanded {
375 @include overflow-datatable(breakpoint(lg), 15px);
376 }
377 }
378}
379
346@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) { 380@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
347 .main-col { 381 .main-col {
348 &:not(.expanded) { 382 &:not(.expanded) {
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index eee3db8fc..377c85070 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -66,7 +66,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
66} 66}
67 67
68 68
69@media screen and (min-width: #{map-get($grid-breakpoints, md)}) { 69@media screen and (min-width: #{breakpoint(md)}) {
70 .modal:before { 70 .modal:before {
71 vertical-align: middle; 71 vertical-align: middle;
72 content: " "; 72 content: " ";
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index d536eac86..6aa5c2474 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -17,6 +17,10 @@ $grid-breakpoints: (
17 xxl: 1600px 17 xxl: 1600px
18); 18);
19 19
20@function breakpoint($label) {
21 @return map-get($grid-breakpoints, $label);
22}
23
20$container-max-widths: ( 24$container-max-widths: (
21 sm: 420px, 25 sm: 420px,
22 md: 720px, 26 md: 720px,
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 8444f9357..b8e685aba 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -80,7 +80,7 @@ p-table {
80 my-edit-button, 80 my-edit-button,
81 my-delete-button, 81 my-delete-button,
82 my-button { 82 my-button {
83 display: block !important; 83 display: inline-block !important;
84 } 84 }
85 } 85 }
86 } 86 }
@@ -160,14 +160,20 @@ p-table {
160 my-delete-button, 160 my-delete-button,
161 my-button { 161 my-button {
162 display: none !important; 162 display: none !important;
163 margin-left: 5px;
163 164
164 &.show { 165 &.show {
165 display: block !important; 166 display: inline-block !important;
166 } 167 }
167 }
168 168
169 my-edit-button + my-delete-button { 169 // keep displaying on touchscreen
170 margin-left: 5px; 170 @media not all and (hover: hover) and (pointer: fine) {
171 display: inline-block !important;
172 }
173
174 :first-child {
175 margin-left: 0
176 }
171 } 177 }
172 } 178 }
173 179
@@ -241,7 +247,7 @@ p-table {
241 &.focus-within, 247 &.focus-within,
242 &:focus { 248 &:focus {
243 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 249 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
244 } 250 }
245 } 251 }
246 252
247 a { 253 a {
@@ -266,6 +272,33 @@ p-table {
266 } 272 }
267} 273}
268 274
275// overflow data table
276@mixin overflow-datatable ($table-min-width, $horizontal-margins) {
277 p-table {
278 .ui-table-wrapper {
279 overflow-x: auto;
280 max-width: calc(100vw - #{$horizontal-margins * 2});
281
282 table {
283 min-width: $table-min-width;
284 }
285 }
286
287 p-paginator .ui-paginator-bottom {
288 display: block;
289
290 .ui-paginator-current {
291 position: relative;
292 display: block;
293 }
294
295 a, .ui-paginator-pages {
296 vertical-align: middle;
297 }
298 }
299 }
300}
301
269// multiselect customizations 302// multiselect customizations
270p-multiselect { 303p-multiselect {
271 .ui-multiselect { 304 .ui-multiselect {