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

Make video-add-nav tabs scrollable on small devices (#2677) 

* Make video-add-nav tabs scrollable on small devices

* Handle video-add-nav scroll with menu

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
This commit is contained in:
Kim 2020-04-27 08:59:19 +02:00 committed by GitHub
parent 2dd530129f
commit 9181bc0c80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/app/videos/+video-edit/video-add.component.scss
View File

@ -4,6 +4,7 @@
$border-width: 3px; $border-width: 3px;
$border-type: solid; $border-type: solid;
$border-color: #EAEAEA; $border-color: #EAEAEA;
$nav-link-height: 40px;
.margin-content { .margin-content {
padding-top: 50px; padding-top: 50px;
@ -25,7 +26,7 @@ $border-color: #EAEAEA;
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
margin-bottom: -$border-width; margin-bottom: -$border-width;
height: 40px !important; height: $nav-link-height !important;
padding: 0 30px !important; padding: 0 30px !important;
font-size: 15px; font-size: 15px;
@ -60,3 +61,29 @@ $border-color: #EAEAEA;
border: 3px dashed var(--mainColor); border: 3px dashed var(--mainColor);
} }
} }
@mixin nav-scroll {
::ng-deep .video-add-nav {
height: #{$nav-link-height + $border-width * 2};
overflow-x: auto;
white-space: nowrap;
flex-wrap: unset;
/* Hide active tab style to not have a moving tab effect */
a.nav-link.active {
border: none;
background-color: var(--mainBackgroundColor) !important;
}
}
}
/* Make .video-add-nav tabs scrollable on small devices */
@media screen and (max-width: $small-view) {
@include nav-scroll();
}
@media screen and (max-width: #{$small-view + $menu-width}) {
:host-context(.main-col:not(.expanded)) {
@include nav-scroll();
}
}