diff options
author | Kimsible <1877318+kimsible@users.noreply.github.com> | 2020-12-07 16:34:07 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-07 16:34:07 +0100 |
commit | 40360c17d82b33accb34ea974c275e17880c37aa (patch) | |
tree | e0ddac1174e54897b4871daa4dca43dce121f590 /client/src/app/+login/login.component.scss | |
parent | 10f26f4203b8cef32778bf3435d8112eaea3c093 (diff) | |
download | PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.tar.gz PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.tar.zst PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.zip |
improvements to login and sign-up pages (#3357)
* New login form ui
* Move InstanceAboutAccordion to shared components
* Update closed registration alert text
* Add alert for opened registration and move them bellow login form
* Adjust flex block on signup and login views
* Replace toggle accordion with expand on links in signup and login + scrollTo
* Improve display of login alerts
* Fix missing Component suffix
* Define min-width instance-information block sign-up and login for mobile screens
* Add ability to select specific panels in instanceAboutAccorddion
* Add instance title and short-description to common instanceAboutAccordion
* Clarify title alert in login page
* Add step terms for signup
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
Diffstat (limited to 'client/src/app/+login/login.component.scss')
-rw-r--r-- | client/src/app/+login/login.component.scss | 150 |
1 files changed, 126 insertions, 24 deletions
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index 9ba09e9e4..3cc302aec 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss | |||
@@ -1,5 +1,8 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import './_bootstrap-variables'; | ||
4 | @import '~bootstrap/scss/functions'; | ||
5 | @import '~bootstrap/scss/variables'; | ||
3 | 6 | ||
4 | label { | 7 | label { |
5 | display: block; | 8 | display: block; |
@@ -57,39 +60,138 @@ input[type=submit] { | |||
57 | } | 60 | } |
58 | } | 61 | } |
59 | 62 | ||
60 | .login-form-and-externals { | 63 | .wrapper { |
61 | display: flex; | 64 | display: flex; |
65 | justify-content: space-around; | ||
62 | flex-wrap: wrap; | 66 | flex-wrap: wrap; |
63 | font-size: 15px; | ||
64 | 67 | ||
65 | form { | 68 | & > div { |
66 | margin: 0 50px 20px 0; | 69 | flex: 1 1; |
67 | } | 70 | } |
68 | 71 | ||
69 | .external-login-blocks { | 72 | .login-form-and-externals { |
70 | min-width: 200px; | 73 | display: flex; |
74 | flex-wrap: wrap; | ||
75 | font-size: 15px; | ||
76 | max-width: 450px; | ||
77 | margin-bottom: 40px; | ||
78 | margin-left: 10px; | ||
79 | margin-right: 10px; | ||
71 | 80 | ||
72 | .block-title { | 81 | form { |
73 | font-weight: $font-semibold; | 82 | margin: 0; |
83 | |||
84 | &, input { | ||
85 | width: 100%; | ||
86 | } | ||
87 | |||
88 | .additionnal-links { | ||
89 | display: block; | ||
90 | text-align: center; | ||
91 | margin-top: 20px; | ||
92 | margin-bottom: 20px; | ||
93 | |||
94 | .forgot-password-button, | ||
95 | .create-an-account { | ||
96 | padding: 4px; | ||
97 | display: inline-block; | ||
98 | |||
99 | color: var(--mainColor); | ||
100 | |||
101 | &:hover, &:active { | ||
102 | color: var(--mainHoverColor); | ||
103 | } | ||
104 | } | ||
105 | } | ||
74 | } | 106 | } |
75 | 107 | ||
76 | .external-login-block { | 108 | .external-login-blocks { |
77 | @include disable-default-a-behaviour; | 109 | min-width: 200px; |
78 | 110 | ||
79 | cursor: pointer; | 111 | .block-title { |
80 | border: 1px solid #d1d7e0; | 112 | font-weight: $font-semibold; |
81 | border-radius: 5px; | 113 | } |
82 | color: pvar(--mainForegroundColor); | 114 | |
83 | margin: 10px 10px 0 0; | 115 | .external-login-block { |
84 | display: flex; | 116 | @include disable-default-a-behaviour; |
85 | justify-content: center; | 117 | |
86 | align-items: center; | 118 | cursor: pointer; |
87 | min-height: 35px; | 119 | border: 1px solid #d1d7e0; |
88 | min-width: 100px; | 120 | border-radius: 5px; |
89 | 121 | color: pvar(--mainForegroundColor); | |
90 | &:hover { | 122 | margin: 10px 10px 0 0; |
91 | background-color: rgba(209, 215, 224, 0.5) | 123 | display: flex; |
124 | justify-content: center; | ||
125 | align-items: center; | ||
126 | min-height: 35px; | ||
127 | min-width: 100px; | ||
128 | |||
129 | &:hover { | ||
130 | background-color: rgba(209, 215, 224, 0.5) | ||
131 | } | ||
92 | } | 132 | } |
93 | } | 133 | } |
134 | |||
135 | .signup-link { | ||
136 | display: inline-block; | ||
137 | } | ||
138 | } | ||
139 | |||
140 | .instance-information { | ||
141 | max-width: 600px; | ||
142 | min-width: 350px; | ||
143 | margin-bottom: 40px; | ||
144 | margin-left: 10px; | ||
145 | margin-right: 10px; | ||
146 | } | ||
147 | |||
148 | .terms-anchor { | ||
149 | display: inline; | ||
150 | } | ||
151 | |||
152 | .terms-link { | ||
153 | display: none; | ||
154 | } | ||
155 | } | ||
156 | |||
157 | @mixin columnReverseDisplay { | ||
158 | flex-direction: column-reverse; | ||
159 | |||
160 | .login-form-and-externals, | ||
161 | .instance-information { | ||
162 | width: 100%; | ||
163 | margin-left: 0; | ||
164 | margin-right: 0; | ||
165 | max-width: 450px; | ||
166 | min-width: unset; | ||
167 | align-self: center; | ||
168 | } | ||
169 | |||
170 | .instance-information { | ||
171 | ::ng-deep .accordion { | ||
172 | display: none; | ||
173 | } | ||
174 | } | ||
175 | |||
176 | .terms-anchor { | ||
177 | display: none; | ||
178 | } | ||
179 | |||
180 | .terms-link { | ||
181 | display: inline; | ||
182 | } | ||
183 | } | ||
184 | |||
185 | @media screen and (max-width: breakpoint(md)) { | ||
186 | .wrapper { | ||
187 | @include columnReverseDisplay(); | ||
188 | } | ||
189 | } | ||
190 | |||
191 | @media screen and (max-width: breakpoint(md) + $menu-width) { | ||
192 | :host-context(.main-col:not(.expanded)) { | ||
193 | .wrapper { | ||
194 | @include columnReverseDisplay(); | ||
195 | } | ||
94 | } | 196 | } |
95 | } | 197 | } |