From 947d01023d53b5b79174775abfd27823678e597b Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 3 Apr 2020 14:13:24 +0200 Subject: Improve channel and account display on medium devices --- .../app/+video-channels/video-channels.component.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'client/src/app/+video-channels') diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 6470629f8..a8e823b40 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -1,3 +1,9 @@ +// Bootstrap grid utilities require functions, variables and mixins +@import 'node_modules/bootstrap/scss/functions'; +@import 'node_modules/bootstrap/scss/variables'; +@import 'node_modules/bootstrap/scss/mixins'; +@import 'node_modules/bootstrap/scss/grid'; + @import '_variables'; @import '_mixins'; @@ -14,7 +20,7 @@ grid-template-rows: 1fr auto / 1fr auto; grid-template-areas: "name buttons" "lower buttons"; - @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { + @include media-breakpoint-down(lg) { grid-template-areas: "name name" "lower buttons"; } } @@ -38,11 +44,20 @@ display: flex; height: max-content; margin-left: auto; - margin-top: 20px; + margin-top: 10px; grid-row: buttons-start / span buttons-end; grid-column: buttons-start; + @include media-breakpoint-down(lg) { + flex-flow: column-reverse; + + a { + margin-top: 0.25rem; + margin-right: 0 !important; + } + } + a { @include peertube-button-outline; line-height: 1.8; -- cgit v1.2.3