]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+video-channels/video-channels.component.scss
Fix broken views on mobile and small screens (#2671)
[github/Chocobozzz/PeerTube.git] / client / src / app / +video-channels / video-channels.component.scss
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
7 @import '_variables';
8 @import '_mixins';
9
10 .sub-menu {
11 @include sub-menu-with-actor;
12
13 .actor, .actor-info {
14 width: 100%;
15 }
16
17 .actor-info {
18 display: grid !important;
19 grid-template-columns: 1fr auto;
20 grid-template-rows: 1fr auto / 1fr auto;
21 grid-template-areas: "name buttons" "lower buttons";
22
23 @include media-breakpoint-down(lg) {
24 grid-template-areas: "name name" "lower buttons";
25 }
26 }
27
28 .actor-names {
29 grid-area: name;
30 }
31
32 .actor-name {
33 flex-grow: 1;
34
35 .copy-button {
36 border: none;
37 padding: 5px;
38 margin-top: -2px;
39 }
40 }
41 }
42
43 .right-buttons {
44 display: flex;
45 height: max-content;
46 margin-left: auto;
47 margin-top: 10px;
48
49 grid-row: buttons-start / span buttons-end;
50 grid-column: buttons-start;
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
61 a {
62 @include peertube-button-outline;
63 line-height: 1.8;
64 }
65
66 my-subscribe-button {
67 height: min-content;
68 }
69 }
70
71 @media screen and (max-width: $mobile-view) {
72 .sub-menu {
73 .actor {
74 flex-direction: column;
75
76 .actor-info .actor-names {
77 flex-direction: column;
78 align-items: normal;
79 }
80 }
81 }
82 }