diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-26 13:20:37 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 67264e060b6068399dae9a67abae035a73b84af1 (patch) | |
tree | dabb735a530c9389c941f7ff1d44fa4b5f6db03e /client/src/app/+accounts/accounts.component.scss | |
parent | 60c35932f6a14cfe83bb0e54407427cce70171ea (diff) | |
download | PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.gz PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.zst PeerTube-67264e060b6068399dae9a67abae035a73b84af1.zip |
Redesign account page
Diffstat (limited to 'client/src/app/+accounts/accounts.component.scss')
-rw-r--r-- | client/src/app/+accounts/accounts.component.scss | 176 |
1 files changed, 106 insertions, 70 deletions
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 40c6b6493..c1cf53f3a 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss | |||
@@ -1,49 +1,26 @@ | |||
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'; | 1 | @import '_variables'; |
8 | @import '_mixins'; | 2 | @import '_mixins'; |
9 | 3 | @import '_actor'; | |
10 | .sub-menu { | 4 | @import '_miniature'; |
11 | @include sub-menu-with-actor; | 5 | |
12 | 6 | .root { | |
13 | .actor { | 7 | --myGlobalPadding: 60px; |
14 | width: 100%; | 8 | --myImgMargin: 30px; |
15 | } | 9 | --myFontSize: 16px; |
10 | --myGreyFontSize: 16px; | ||
16 | } | 11 | } |
17 | 12 | ||
18 | .margin-content { | 13 | .section-label { |
19 | // margin-content is required, but child views have their own margins | 14 | @include section-label-responsive; |
20 | // that match views outside the scope of accounts, so we only align | ||
21 | // them with the margins of .sub-menu when required. | ||
22 | margin: 0; | ||
23 | } | 15 | } |
24 | 16 | ||
25 | .right-buttons { | 17 | .links { |
26 | display: flex; | 18 | @include fluid-videos-miniature-layout; |
27 | height: max-content; | ||
28 | margin-left: auto; | ||
29 | margin-top: 10px; | ||
30 | |||
31 | @include media-breakpoint-down(lg) { | ||
32 | flex-flow: column-reverse; | ||
33 | 19 | ||
34 | a { | 20 | display: flex; |
35 | margin-top: 0.25rem; | 21 | justify-content: space-between; |
36 | margin-right: 0 !important; | 22 | align-items: center; |
37 | } | 23 | max-width: 800px; |
38 | } | ||
39 | |||
40 | a { | ||
41 | @include peertube-button-outline; | ||
42 | } | ||
43 | |||
44 | my-subscribe-button { | ||
45 | min-height: 30px; | ||
46 | } | ||
47 | } | 24 | } |
48 | 25 | ||
49 | my-user-moderation-dropdown, | 26 | my-user-moderation-dropdown, |
@@ -60,39 +37,98 @@ my-user-moderation-dropdown, | |||
60 | 37 | ||
61 | .copy-button { | 38 | .copy-button { |
62 | border: none; | 39 | border: none; |
63 | padding: 5px; | 40 | } |
64 | margin-top: -2px; | 41 | |
42 | .account-info { | ||
43 | display: grid; | ||
44 | grid-template-columns: 1fr min-content; | ||
45 | grid-template-rows: auto auto; | ||
46 | |||
47 | background-color: pvar(--submenuColor); | ||
48 | margin-bottom: 45px; | ||
49 | padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); | ||
50 | font-size: var(--myFontSize); | ||
51 | } | ||
52 | |||
53 | .account-avatar-row { | ||
54 | @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize)); | ||
55 | } | ||
56 | |||
57 | .description { | ||
58 | grid-column: 1 / 3; | ||
59 | } | ||
60 | |||
61 | .created-at { | ||
62 | margin-top: 15px; | ||
63 | color: pvar(--greyForegroundColor); | ||
64 | padding-bottom: 60px; | ||
65 | } | ||
66 | |||
67 | .show-more { | ||
68 | @include show-more-description; | ||
69 | |||
70 | display: none; | ||
71 | text-align: center; | ||
72 | } | ||
73 | |||
74 | .buttons { | ||
75 | grid-column: 2; | ||
76 | grid-row: 1; | ||
77 | |||
78 | display: flex; | ||
79 | flex-wrap: wrap; | ||
80 | justify-content: flex-end; | ||
81 | align-content: flex-start; | ||
82 | |||
83 | > *:not(:last-child) { | ||
84 | margin-bottom: 15px; | ||
85 | } | ||
86 | } | ||
87 | |||
88 | @media screen and (max-width: $small-view) { | ||
89 | .root { | ||
90 | --myGlobalPadding: 45px; | ||
91 | --myChannelImgMargin: 15px; | ||
92 | } | ||
93 | |||
94 | .account-info { | ||
95 | display: block; | ||
96 | padding-bottom: 60px; | ||
97 | } | ||
98 | |||
99 | .description:not(.expanded) { | ||
100 | max-height: 70px; | ||
101 | |||
102 | @include fade-text(30px, pvar(--submenuColor)); | ||
103 | } | ||
104 | |||
105 | .show-more { | ||
106 | display: block; | ||
107 | } | ||
108 | |||
109 | .buttons { | ||
110 | justify-content: center; | ||
111 | } | ||
65 | } | 112 | } |
66 | 113 | ||
67 | @media screen and (max-width: $mobile-view) { | 114 | @media screen and (max-width: $mobile-view) { |
68 | .sub-menu { | 115 | .root { |
69 | .actor { | 116 | --myGlobalPadding: 15px; |
70 | flex-direction: column; | 117 | --myFontSize: 14px; |
71 | align-items: center; | 118 | --myGreyFontSize: 13px; |
72 | 119 | } | |
73 | img, | 120 | |
74 | .actor-info .actor-names .actor-display-name { | 121 | .account-info { |
75 | margin-right: 0; | 122 | display: block; |
76 | } | 123 | padding-bottom: 30px; |
77 | 124 | } | |
78 | .actor-info { | 125 | |
79 | .actor-names { | 126 | .links { |
80 | flex-direction: column; | 127 | margin: auto !important; |
81 | align-items: center; | 128 | width: min-content; |
82 | } | 129 | } |
83 | 130 | ||
84 | my-user-moderation-dropdown { | 131 | .show-more { |
85 | margin-left: 0; | 132 | margin-bottom: 30px; |
86 | } | ||
87 | |||
88 | .actor-followers { | ||
89 | text-align: center; | ||
90 | } | ||
91 | } | ||
92 | |||
93 | .right-buttons { | ||
94 | margin-left: 0; | ||
95 | } | ||
96 | } | ||
97 | } | 133 | } |
98 | } | 134 | } |