aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-03 14:13:24 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-04-03 14:13:28 +0200
commit947d01023d53b5b79174775abfd27823678e597b (patch)
treebab7c1ec1b8716c564a28067500e8fb3d2a37ed6 /client/src/app/+video-channels
parent51892fe0429e237bff956143630b295aa358f811 (diff)
downloadPeerTube-947d01023d53b5b79174775abfd27823678e597b.tar.gz
PeerTube-947d01023d53b5b79174775abfd27823678e597b.tar.zst
PeerTube-947d01023d53b5b79174775abfd27823678e597b.zip
Improve channel and account display on medium devices
Diffstat (limited to 'client/src/app/+video-channels')
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss19
1 files changed, 17 insertions, 2 deletions
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 @@
1// Bootstrap grid utilities require functions, variables and mixins
2@import 'node_modules/bootstrap/scss/functions';
3@import 'node_modules/bootstrap/scss/variables';
4@import 'node_modules/bootstrap/scss/mixins';
5@import 'node_modules/bootstrap/scss/grid';
6
1@import '_variables'; 7@import '_variables';
2@import '_mixins'; 8@import '_mixins';
3 9
@@ -14,7 +20,7 @@
14 grid-template-rows: 1fr auto / 1fr auto; 20 grid-template-rows: 1fr auto / 1fr auto;
15 grid-template-areas: "name buttons" "lower buttons"; 21 grid-template-areas: "name buttons" "lower buttons";
16 22
17 @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { 23 @include media-breakpoint-down(lg) {
18 grid-template-areas: "name name" "lower buttons"; 24 grid-template-areas: "name name" "lower buttons";
19 } 25 }
20 } 26 }
@@ -38,11 +44,20 @@
38 display: flex; 44 display: flex;
39 height: max-content; 45 height: max-content;
40 margin-left: auto; 46 margin-left: auto;
41 margin-top: 20px; 47 margin-top: 10px;
42 48
43 grid-row: buttons-start / span buttons-end; 49 grid-row: buttons-start / span buttons-end;
44 grid-column: buttons-start; 50 grid-column: buttons-start;
45 51
52 @include media-breakpoint-down(lg) {
53 flex-flow: column-reverse;
54
55 a {
56 margin-top: 0.25rem;
57 margin-right: 0 !important;
58 }
59 }
60
46 a { 61 a {
47 @include peertube-button-outline; 62 @include peertube-button-outline;
48 line-height: 1.8; 63 line-height: 1.8;