Fix margin-content and miniature thumbnail width on mobile, fix media queries for tables above lg breakpoint
This commit is contained in:
parent
d392608090
commit
c2a89b70ce
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue