diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-26 15:53:18 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 900f7820814b95b07ef0bcac04036a95abfbe060 (patch) | |
tree | 4033df58ed2da815f5d3d26313a1c50668d49d54 /client/src/app/+accounts/accounts.component.scss | |
parent | 67264e060b6068399dae9a67abae035a73b84af1 (diff) | |
download | PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.gz PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.zst PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.zip |
Redesign account's channels page
Diffstat (limited to 'client/src/app/+accounts/accounts.component.scss')
-rw-r--r-- | client/src/app/+accounts/accounts.component.scss | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index c1cf53f3a..6a51dd038 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | @import '_miniature'; | 4 | @import '_miniature'; |
5 | 5 | ||
6 | .root { | 6 | .root { |
7 | --myGlobalPadding: 60px; | 7 | --myGlobalTopPadding: 60px; |
8 | --myImgMargin: 30px; | 8 | --myImgMargin: 30px; |
9 | --myFontSize: 16px; | 9 | --myFontSize: 16px; |
10 | --myGreyFontSize: 16px; | 10 | --myGreyFontSize: 16px; |
@@ -15,12 +15,16 @@ | |||
15 | } | 15 | } |
16 | 16 | ||
17 | .links { | 17 | .links { |
18 | @include fluid-videos-miniature-layout; | 18 | @include fluid-videos-miniature-margins; |
19 | 19 | ||
20 | display: flex; | 20 | display: flex; |
21 | justify-content: space-between; | 21 | justify-content: space-between; |
22 | align-items: center; | 22 | align-items: center; |
23 | max-width: 800px; | 23 | max-width: $max-channels-width; |
24 | |||
25 | simple-search-input { | ||
26 | margin-left: auto; | ||
27 | } | ||
24 | } | 28 | } |
25 | 29 | ||
26 | my-user-moderation-dropdown, | 30 | my-user-moderation-dropdown, |
@@ -40,13 +44,15 @@ my-user-moderation-dropdown, | |||
40 | } | 44 | } |
41 | 45 | ||
42 | .account-info { | 46 | .account-info { |
47 | @include fluid-videos-miniature-margins(false, 15px); | ||
48 | |||
43 | display: grid; | 49 | display: grid; |
44 | grid-template-columns: 1fr min-content; | 50 | grid-template-columns: 1fr min-content; |
45 | grid-template-rows: auto auto; | 51 | grid-template-rows: auto auto; |
46 | 52 | ||
47 | background-color: pvar(--submenuColor); | 53 | background-color: pvar(--submenuColor); |
48 | margin-bottom: 45px; | 54 | margin-bottom: 45px; |
49 | padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); | 55 | padding-top: var(--myGlobalTopPadding); |
50 | font-size: var(--myFontSize); | 56 | font-size: var(--myFontSize); |
51 | } | 57 | } |
52 | 58 | ||
@@ -83,11 +89,15 @@ my-user-moderation-dropdown, | |||
83 | > *:not(:last-child) { | 89 | > *:not(:last-child) { |
84 | margin-bottom: 15px; | 90 | margin-bottom: 15px; |
85 | } | 91 | } |
92 | |||
93 | > a { | ||
94 | white-space: nowrap; | ||
95 | } | ||
86 | } | 96 | } |
87 | 97 | ||
88 | @media screen and (max-width: $small-view) { | 98 | @media screen and (max-width: $small-view) { |
89 | .root { | 99 | .root { |
90 | --myGlobalPadding: 45px; | 100 | --myGlobalTopPadding: 45px; |
91 | --myChannelImgMargin: 15px; | 101 | --myChannelImgMargin: 15px; |
92 | } | 102 | } |
93 | 103 | ||
@@ -113,7 +123,7 @@ my-user-moderation-dropdown, | |||
113 | 123 | ||
114 | @media screen and (max-width: $mobile-view) { | 124 | @media screen and (max-width: $mobile-view) { |
115 | .root { | 125 | .root { |
116 | --myGlobalPadding: 15px; | 126 | --myGlobalTopPadding: 15px; |
117 | --myFontSize: 14px; | 127 | --myFontSize: 14px; |
118 | --myGreyFontSize: 13px; | 128 | --myGreyFontSize: 13px; |
119 | } | 129 | } |