aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html8
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss95
-rw-r--r--client/src/sass/include/_mixins.scss4
3 files changed, 55 insertions, 52 deletions
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index a2bdfa31a..2ed0c93d6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,9 +1,7 @@
1<h1> 1<h1>
2 <span> 2 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
3 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 3 <ng-container i18n>My channels</ng-container>
4 <ng-container i18n>My channels</ng-container> 4 <span class="badge badge-secondary">{{ totalItems }}</span>
5 <span class="badge badge-secondary">{{ totalItems }}</span>
6 </span>
7</h1> 5</h1>
8 6
9<div class="video-channels-header d-flex justify-content-between"> 7<div class="video-channels-header d-flex justify-content-between">
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index bb5394094..191c5169d 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4h1 my-global-icon {
5 position: relative;
6 top: -2px;
7}
8
4.create-button { 9.create-button {
5 @include create-button; 10 @include create-button;
6} 11}
@@ -9,10 +14,8 @@ input[type=text] {
9 @include peertube-input-text(300px); 14 @include peertube-input-text(300px);
10} 15}
11 16
12::ng-deep .action-button { 17my-edit-button {
13 &.action-button-edit { 18 margin-right: 10px;
14 margin-right: 10px;
15 }
16} 19}
17 20
18.video-channel { 21.video-channel {
@@ -25,35 +28,35 @@ input[type=text] {
25 28
26 margin-right: 10px; 29 margin-right: 10px;
27 } 30 }
31}
28 32
29 .video-channel-info { 33.video-channel-info {
30 flex-grow: 1; 34 flex-grow: 1;
31 35}
32 a.video-channel-names {
33 @include disable-default-a-behaviour;
34
35 width: fit-content;
36 display: flex;
37 align-items: baseline;
38 color: pvar(--mainForegroundColor);
39
40 .video-channel-display-name {
41 font-weight: $font-semibold;
42 font-size: 18px;
43 }
44
45 .video-channel-name {
46 font-size: 14px;
47 color: $grey-actor-name;
48 margin-left: 5px;
49 }
50 }
51 }
52 36
53 .video-channel-buttons { 37.video-channel-names {
54 margin-top: 10px; 38 @include disable-default-a-behaviour;
55 min-width: 190px; 39
56 } 40 width: fit-content;
41 display: flex;
42 align-items: baseline;
43 color: pvar(--mainForegroundColor);
44}
45
46.video-channel-display-name {
47 font-weight: $font-semibold;
48 font-size: 18px;
49}
50
51.video-channel-name {
52 font-size: 14px;
53 color: $grey-actor-name;
54 margin-left: 5px;
55}
56
57.video-channel-buttons {
58 margin-top: 10px;
59 min-width: 190px;
57} 60}
58 61
59::ng-deep .chartjs-render-monitor { 62::ng-deep .chartjs-render-monitor {
@@ -73,21 +76,6 @@ input[type=text] {
73 .video-channel { 76 .video-channel {
74 padding-bottom: 10px; 77 padding-bottom: 10px;
75 78
76 .video-channel-info {
77 padding-bottom: 10px;
78 text-align: center;
79
80 .video-channel-names {
81 flex-direction: column;
82 align-items: center !important;
83 margin: auto;
84
85 .video-channel-name {
86 margin-left: 0 !important;
87 }
88 }
89 }
90
91 img { 79 img {
92 margin-right: 0; 80 margin-right: 0;
93 } 81 }
@@ -96,6 +84,21 @@ input[type=text] {
96 align-self: center; 84 align-self: center;
97 } 85 }
98 } 86 }
87
88 .video-channel-info {
89 padding-bottom: 10px;
90 text-align: center;
91 }
92
93 .video-channel-names {
94 flex-direction: column;
95 align-items: center !important;
96 margin: auto;
97 }
98
99 .video-channel-name {
100 margin-left: 0 !important;
101 }
99} 102}
100 103
101@media screen and (max-width: $mobile-view) { 104@media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 718e36f2c..f2f4628f7 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -897,15 +897,17 @@
897 padding-bottom: 15px; 897 padding-bottom: 15px;
898 margin-bottom: $sub-menu-margin-bottom; 898 margin-bottom: $sub-menu-margin-bottom;
899 899
900 > span > my-global-icon,
900 > my-global-icon { 901 > my-global-icon {
901 margin-right: 10px; 902 margin-right: 10px;
902 vertical-align: bottom;
903 width: 24px; 903 width: 24px;
904 height: 24px; 904 height: 24px;
905 vertical-align: top;
905 } 906 }
906 907
907 .badge { 908 .badge {
908 margin-left: 7px; 909 margin-left: 7px;
910 vertical-align: top;
909 } 911 }
910 } 912 }
911} 913}