aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-10-19 09:44:43 +0200
committerChocobozzz <me@florianbigard.com>2021-10-20 09:25:44 +0200
commit4beda9e12adc7b1f3b178cecd6863ebf3cf431f1 (patch)
tree6244a10b286d66c6dcd7799aee630670d0493781 /client/src/sass
parent9593a78ae1368a9ad8bb11044fce6fde2892701a (diff)
downloadPeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.tar.gz
PeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.tar.zst
PeerTube-4beda9e12adc7b1f3b178cecd6863ebf3cf431f1.zip
Add ability to view my followers
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_account-channel-page.scss88
-rw-r--r--client/src/sass/include/_actor.scss104
-rw-r--r--client/src/sass/include/_mixins.scss9
3 files changed, 136 insertions, 65 deletions
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
new file mode 100644
index 000000000..b135bbb6d
--- /dev/null
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -0,0 +1,88 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4@mixin section-label-responsive {
5 color: pvar(--mainColor);
6 font-size: 12px;
7 margin-bottom: 15px;
8 font-weight: $font-bold;
9 letter-spacing: 2.5px;
10
11 @media screen and (max-width: $mobile-view) {
12 font-size: 10px;
13 letter-spacing: 2.1px;
14 margin-bottom: 5px;
15 }
16}
17
18@mixin show-more-description {
19 color: pvar(--mainColor);
20 cursor: pointer;
21 margin: 10px auto 45px;
22}
23
24@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
25 display: flex;
26 grid-column: 1;
27 margin-bottom: 30px;
28
29 .main-avatar {
30 @include actor-avatar-size(120px);
31 }
32
33 > div {
34 @include margin-left($img-margin);
35
36 min-width: 1px;
37 }
38
39 .actor-info {
40 display: flex;
41
42 > div:first-child {
43 flex-grow: 1;
44 min-width: 1px;
45 }
46 }
47
48 .actor-display-name {
49 @include peertube-word-wrap;
50
51 display: flex;
52 flex-wrap: wrap;
53 }
54
55 h1 {
56 font-size: 28px;
57 font-weight: $font-bold;
58 margin: 0;
59 }
60
61 .actor-handle {
62 @include ellipsis;
63 }
64
65 .actor-handle,
66 .actor-counters {
67 color: pvar(--greyForegroundColor);
68 font-size: $grey-font-size;
69 }
70
71 .actor-counters > *:not(:last-child)::after {
72 content: '•';
73 margin: 0 10px;
74 color: pvar(--mainColor);
75 }
76
77 @media screen and (max-width: $mobile-view) {
78 margin-bottom: 15px;
79
80 h1 {
81 font-size: 22px;
82 }
83
84 .main-avatar {
85 @include actor-avatar-size(80px);
86 }
87 }
88}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index b135bbb6d..f9e44b8ad 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,88 +1,68 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4@mixin section-label-responsive { 4@mixin actor-row ($avatar-size: 80px, $avatar-margin-right: 10px, $min-height: 130px, $separator: true) {
5 color: pvar(--mainColor); 5 @include row-blocks($min-height: $min-height, $separator: $separator);
6 font-size: 12px;
7 margin-bottom: 15px;
8 font-weight: $font-bold;
9 letter-spacing: 2.5px;
10
11 @media screen and (max-width: $mobile-view) {
12 font-size: 10px;
13 letter-spacing: 2.1px;
14 margin-bottom: 5px;
15 }
16}
17
18@mixin show-more-description {
19 color: pvar(--mainColor);
20 cursor: pointer;
21 margin: 10px auto 45px;
22}
23
24@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
25 display: flex;
26 grid-column: 1;
27 margin-bottom: 30px;
28 6
29 .main-avatar { 7 > my-actor-avatar {
30 @include actor-avatar-size(120px); 8 @include actor-avatar-size($avatar-size);
31 }
32
33 > div {
34 @include margin-left($img-margin);
35 9
36 min-width: 1px; 10 @include margin-right($avatar-margin-right);
37 } 11 }
38 12
39 .actor-info { 13 .actor-info {
40 display: flex; 14 flex-grow: 1;
41
42 > div:first-child {
43 flex-grow: 1;
44 min-width: 1px;
45 }
46 } 15 }
47 16
48 .actor-display-name { 17 .actor-names {
49 @include peertube-word-wrap; 18 @include disable-default-a-behaviour;
50 19
20 width: fit-content;
51 display: flex; 21 display: flex;
52 flex-wrap: wrap; 22 align-items: baseline;
23 color: pvar(--mainForegroundColor);
53 } 24 }
54 25
55 h1 { 26 .actor-display-name {
56 font-size: 28px; 27 font-weight: $font-semibold;
57 font-weight: $font-bold; 28 font-size: 18px;
58 margin: 0;
59 } 29 }
60 30
61 .actor-handle { 31 .actor-name {
62 @include ellipsis; 32 @include margin-left(5px);
63 }
64 33
65 .actor-handle, 34 font-size: 14px;
66 .actor-counters { 35 color: $grey-actor-name;
67 color: pvar(--greyForegroundColor);
68 font-size: $grey-font-size;
69 } 36 }
70 37
71 .actor-counters > *:not(:last-child)::after { 38 .actor-owner {
72 content: '•'; 39 @include disable-default-a-behaviour;
73 margin: 0 10px;
74 color: pvar(--mainColor);
75 }
76 40
77 @media screen and (max-width: $mobile-view) { 41 font-size: 13px;
78 margin-bottom: 15px; 42 color: pvar(--mainForegroundColor);
79 43
80 h1 { 44 span:hover {
81 font-size: 22px; 45 opacity: 0.8;
82 } 46 }
83 47
84 .main-avatar { 48 my-actor-avatar {
85 @include actor-avatar-size(80px); 49 @include margin-left(7px);
50
51 display: inline-block;
52 vertical-align: top;
53 }
54 }
55
56 @media screen and (max-width: $small-view) {
57 .actor-info {
58 padding-bottom: 10px;
59 text-align: center;
60
61 .actor-names {
62 flex-direction: column;
63 align-items: center !important;
64 margin: auto;
65 }
86 } 66 }
87 } 67 }
88} 68}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9e510771e..2f436d787 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -653,12 +653,15 @@
653 @include button-with-icon(20px, 5px, -1px); 653 @include button-with-icon(20px, 5px, -1px);
654} 654}
655 655
656@mixin row-blocks ($column-responsive: true) { 656@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
657 display: flex; 657 display: flex;
658 min-height: 130px; 658 min-height: $min-height;
659 padding-bottom: 20px; 659 padding-bottom: 20px;
660 margin-bottom: 20px; 660 margin-bottom: 20px;
661 border-bottom: 1px solid #C6C6C6; 661
662 @if $separator {
663 border-bottom: 1px solid #C6C6C6;
664 }
662 665
663 @media screen and (max-width: $small-view) { 666 @media screen and (max-width: $small-view) {
664 @if $column-responsive { 667 @if $column-responsive {