aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-04-27 08:59:19 +0200
committerGitHub <noreply@github.com>2020-04-27 08:59:19 +0200
commit9181bc0c802bb84aeae9f07b08b59dcd90f486bc (patch)
tree1431d008886f2d4f62fa35fcbe39e1de57408550
parent2dd530129fc8b1898fb67dccf3f44ccc36dc28c9 (diff)
downloadPeerTube-9181bc0c802bb84aeae9f07b08b59dcd90f486bc.tar.gz
PeerTube-9181bc0c802bb84aeae9f07b08b59dcd90f486bc.tar.zst
PeerTube-9181bc0c802bb84aeae9f07b08b59dcd90f486bc.zip
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>
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss29
1 files changed, 28 insertions, 1 deletions
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 9adeaebb0..1316e09e4 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -4,6 +4,7 @@
4$border-width: 3px; 4$border-width: 3px;
5$border-type: solid; 5$border-type: solid;
6$border-color: #EAEAEA; 6$border-color: #EAEAEA;
7$nav-link-height: 40px;
7 8
8.margin-content { 9.margin-content {
9 padding-top: 50px; 10 padding-top: 50px;
@@ -25,7 +26,7 @@ $border-color: #EAEAEA;
25 @include disable-default-a-behaviour; 26 @include disable-default-a-behaviour;
26 27
27 margin-bottom: -$border-width; 28 margin-bottom: -$border-width;
28 height: 40px !important; 29 height: $nav-link-height !important;
29 padding: 0 30px !important; 30 padding: 0 30px !important;
30 font-size: 15px; 31 font-size: 15px;
31 32
@@ -60,3 +61,29 @@ $border-color: #EAEAEA;
60 border: 3px dashed var(--mainColor); 61 border: 3px dashed var(--mainColor);
61 } 62 }
62} 63}
64
65@mixin nav-scroll {
66 ::ng-deep .video-add-nav {
67 height: #{$nav-link-height + $border-width * 2};
68 overflow-x: auto;
69 white-space: nowrap;
70 flex-wrap: unset;
71
72 /* Hide active tab style to not have a moving tab effect */
73 a.nav-link.active {
74 border: none;
75 background-color: var(--mainBackgroundColor) !important;
76 }
77 }
78}
79
80/* Make .video-add-nav tabs scrollable on small devices */
81@media screen and (max-width: $small-view) {
82 @include nav-scroll();
83}
84
85@media screen and (max-width: #{$small-view + $menu-width}) {
86 :host-context(.main-col:not(.expanded)) {
87 @include nav-scroll();
88 }
89}