aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-05-01 23:24:05 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-05-01 23:24:05 +0200
commitc2a89b70ce75c4955cbdb1ced6fd20a5010a8c9b (patch)
tree9b835f17d1da4a7a4d066b8e48fc476c732759a8
parentd392608090a88a402f98f57cb60872dfd3506fd4 (diff)
downloadPeerTube-c2a89b70ce75c4955cbdb1ced6fd20a5010a8c9b.tar.gz
PeerTube-c2a89b70ce75c4955cbdb1ced6fd20a5010a8c9b.tar.zst
PeerTube-c2a89b70ce75c4955cbdb1ced6fd20a5010a8c9b.zip
Fix margin-content and miniature thumbnail width on mobile, fix media queries for tables above lg breakpoint
-rw-r--r--client/src/app/shared/forms/markdown-textarea.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss3
-rw-r--r--client/src/sass/application.scss10
-rw-r--r--client/src/sass/include/_miniature.scss6
-rw-r--r--client/src/sass/primeng-custom.scss22
5 files changed, 23 insertions, 20 deletions
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 065cd2dec..8e5739e45 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -15,7 +15,7 @@ $input-border-radius: 3px;
15 @include peertube-textarea(100%, 150px); 15 @include peertube-textarea(100%, 150px);
16 16
17 background-color: var(--textareaBackgroundColor); 17 background-color: var(--textareaBackgroundColor);
18 font-family: courier, monospace; 18 font-family: monospace;
19 font-size: 13px; 19 font-size: 13px;
20 border-bottom: none; 20 border-bottom: none;
21 border-bottom-left-radius: unset; 21 border-bottom-left-radius: unset;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index e0009ed3f..977312a83 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -551,7 +551,8 @@ my-video-comments {
551 551
552@media screen and (max-width: 600px) { 552@media screen and (max-width: 600px) {
553 .video-bottom { 553 .video-bottom {
554 margin: 20px 0 0 0 !important; 554 margin-top: 20px !important;
555 margin-bottom: 20px !important;
555 556
556 .video-info { 557 .video-info {
557 padding: 0; 558 padding: 0;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f54fecda8..62503fc02 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -344,14 +344,14 @@ table {
344} 344}
345 345
346// overflow-databale responsive rules 346// overflow-databale responsive rules
347@media screen and (max-width: #{breakpoint(xxl)}) { 347@media screen and (min-width: #{breakpoint(lg)}) {
348 .main-col { 348 .main-col {
349 &.expanded { 349 &.expanded {
350 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2); 350 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
351 } 351 }
352 352
353 &:not(.expanded) { 353 &:not(.expanded) {
354 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2); 354 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
355 } 355 }
356 } 356 }
357} 357}
@@ -363,7 +363,7 @@ table {
363 } 363 }
364 364
365 &:not(.expanded) { 365 &:not(.expanded) {
366 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2); 366 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
367 } 367 }
368 } 368 }
369} 369}
@@ -381,7 +381,7 @@ table {
381 .main-col { 381 .main-col {
382 &:not(.expanded) { 382 &:not(.expanded) {
383 .admin-sub-header { 383 .admin-sub-header {
384 @include admin-sub-header-responsive($menu-width/2 + $expanded-horizontal-margins/3); 384 @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
385 } 385 }
386 } 386 }
387 } 387 }
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 5e591cf45..c937a0f72 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -127,9 +127,9 @@ $play-overlay-width: 18px;
127 } 127 }
128 128
129 .video-thumbnail { 129 .video-thumbnail {
130 margin: 0 -15px 10px -15px; 130 margin-bottom: 10px;
131 width: 100vw; 131 width: 100%;
132 height: calc(100vw / #{$video-thumbnail-ratio}); 132 height: calc(100% / #{$video-thumbnail-ratio});
133 border-radius: 0; 133 border-radius: 0;
134 134
135 img { 135 img {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9c9a6197d..b3cd7cf51 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -283,7 +283,7 @@ p-table {
283} 283}
284 284
285// overflow data table 285// overflow data table
286@mixin overflow-datatable ($table-min-width, $horizontal-margins) { 286@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
287 p-table { 287 p-table {
288 .ui-table-wrapper { 288 .ui-table-wrapper {
289 overflow-x: auto; 289 overflow-x: auto;
@@ -294,16 +294,18 @@ p-table {
294 } 294 }
295 } 295 }
296 296
297 p-paginator .ui-paginator-bottom { 297 @if $mobile-paginator {
298 display: block; 298 p-paginator .ui-paginator-bottom {
299
300 .ui-paginator-current {
301 position: relative;
302 display: block; 299 display: block;
303 } 300
304 301 .ui-paginator-current {
305 a, .ui-paginator-pages { 302 position: relative;
306 vertical-align: middle; 303 display: block;
304 }
305
306 a, .ui-paginator-pages {
307 vertical-align: middle;
308 }
307 } 309 }
308 } 310 }
309 } 311 }