Fix margin-content and miniature thumbnail width on mobile, fix media queries for tables above lg breakpoint

This commit is contained in:
Rigel Kent 2020-05-01 23:24:05 +02:00
parent d392608090
commit c2a89b70ce
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
5 changed files with 23 additions and 20 deletions

View File

@ -15,7 +15,7 @@ $input-border-radius: 3px;
@include peertube-textarea(100%, 150px);
background-color: var(--textareaBackgroundColor);
font-family: courier, monospace;
font-family: monospace;
font-size: 13px;
border-bottom: none;
border-bottom-left-radius: unset;

View File

@ -551,7 +551,8 @@ my-video-comments {
@media screen and (max-width: 600px) {
.video-bottom {
margin: 20px 0 0 0 !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
.video-info {
padding: 0;

View File

@ -344,14 +344,14 @@ table {
}
// overflow-databale responsive rules
@media screen and (max-width: #{breakpoint(xxl)}) {
@media screen and (min-width: #{breakpoint(lg)}) {
.main-col {
&.expanded {
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2);
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
@include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
}
}
}
@ -363,7 +363,7 @@ table {
}
&:not(.expanded) {
@include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
@include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
}
}
}
@ -381,7 +381,7 @@ table {
.main-col {
&:not(.expanded) {
.admin-sub-header {
@include admin-sub-header-responsive($menu-width/2 + $expanded-horizontal-margins/3);
@include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
}
}
}

View File

@ -127,9 +127,9 @@ $play-overlay-width: 18px;
}
.video-thumbnail {
margin: 0 -15px 10px -15px;
width: 100vw;
height: calc(100vw / #{$video-thumbnail-ratio});
margin-bottom: 10px;
width: 100%;
height: calc(100% / #{$video-thumbnail-ratio});
border-radius: 0;
img {

View File

@ -283,7 +283,7 @@ p-table {
}
// overflow data table
@mixin overflow-datatable ($table-min-width, $horizontal-margins) {
@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
p-table {
.ui-table-wrapper {
overflow-x: auto;
@ -294,16 +294,18 @@ p-table {
}
}
p-paginator .ui-paginator-bottom {
display: block;
.ui-paginator-current {
position: relative;
@if $mobile-paginator {
p-paginator .ui-paginator-bottom {
display: block;
}
a, .ui-paginator-pages {
vertical-align: middle;
.ui-paginator-current {
position: relative;
display: block;
}
a, .ui-paginator-pages {
vertical-align: middle;
}
}
}
}