interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/forms/markdown-textarea.component.scss
View File

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

3
client/src/app/videos/+video-watch/video-watch.component.scss
View File

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

10
client/src/sass/application.scss
View File

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

6
client/src/sass/include/_miniature.scss
View File

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

20
client/src/sass/primeng-custom.scss
View File

@ -283,7 +283,7 @@ p-table {
} }
// overflow data 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 { p-table {
.ui-table-wrapper { .ui-table-wrapper {
overflow-x: auto; overflow-x: auto;
@ -294,16 +294,18 @@ p-table {
} }
} }
p-paginator .ui-paginator-bottom { @if $mobile-paginator {
display: block; p-paginator .ui-paginator-bottom {
.ui-paginator-current {
position: relative;
display: block; display: block;
}
a, .ui-paginator-pages { .ui-paginator-current {
vertical-align: middle; position: relative;
display: block;
}
a, .ui-paginator-pages {
vertical-align: middle;
}
} }
} }
} }