sforkowany z mirror/soapbox
Homepage style improvements
rodzic
73e2649530
commit
55c958c7ad
|
@ -33,7 +33,7 @@ class AboutPage extends ImmutablePureComponent {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className='content'>
|
<div className='content'>
|
||||||
<div className='box-widget'>
|
<div className='about-page'>
|
||||||
<div
|
<div
|
||||||
className='rich-formatting'
|
className='rich-formatting'
|
||||||
dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}
|
dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}
|
||||||
|
|
|
@ -73,66 +73,64 @@ class RegistrationForm extends ImmutablePureComponent {
|
||||||
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
|
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='box-widget'>
|
<SimpleForm onSubmit={this.onSubmit}>
|
||||||
<SimpleForm onSubmit={this.onSubmit}>
|
<fieldset disabled={isLoading}>
|
||||||
<fieldset disabled={isLoading}>
|
<div className='simple_form__overlay-area'>
|
||||||
<div className='simple_form__overlay-area'>
|
<p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
|
||||||
<p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
|
<div className='fields-group'>
|
||||||
<div className='fields-group'>
|
<TextInput
|
||||||
<TextInput
|
placeholder='Username'
|
||||||
placeholder='Username'
|
name='username'
|
||||||
name='username'
|
autoComplete='off'
|
||||||
autoComplete='off'
|
|
||||||
onChange={this.onInputChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<SimpleInput
|
|
||||||
placeholder='E-mail address'
|
|
||||||
name='email'
|
|
||||||
type='email'
|
|
||||||
autoComplete='off'
|
|
||||||
onChange={this.onInputChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<SimpleInput
|
|
||||||
placeholder='Password'
|
|
||||||
name='password'
|
|
||||||
type='password'
|
|
||||||
autoComplete='off'
|
|
||||||
onChange={this.onInputChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<SimpleInput
|
|
||||||
placeholder='Confirm password'
|
|
||||||
name='confirm'
|
|
||||||
type='password'
|
|
||||||
autoComplete='off'
|
|
||||||
onChange={this.onInputChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<CaptchaField
|
|
||||||
onFetch={this.onFetchCaptcha}
|
|
||||||
onFetchFail={this.onFetchCaptchaFail}
|
|
||||||
onChange={this.onInputChange}
|
onChange={this.onInputChange}
|
||||||
idempotencyKey={this.state.captchaIdempotencyKey}
|
required
|
||||||
|
/>
|
||||||
|
<SimpleInput
|
||||||
|
placeholder='E-mail address'
|
||||||
|
name='email'
|
||||||
|
type='email'
|
||||||
|
autoComplete='off'
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<SimpleInput
|
||||||
|
placeholder='Password'
|
||||||
|
name='password'
|
||||||
|
type='password'
|
||||||
|
autoComplete='off'
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<SimpleInput
|
||||||
|
placeholder='Confirm password'
|
||||||
|
name='confirm'
|
||||||
|
type='password'
|
||||||
|
autoComplete='off'
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
<div className='fields-group'>
|
|
||||||
<Checkbox
|
|
||||||
label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
|
|
||||||
name='agreement'
|
|
||||||
onChange={this.onCheckboxChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<input type='hidden' name='locale' value='en_US' />
|
|
||||||
<div className='actions'>
|
|
||||||
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
<CaptchaField
|
||||||
</SimpleForm>
|
onFetch={this.onFetchCaptcha}
|
||||||
</div>
|
onFetchFail={this.onFetchCaptchaFail}
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
idempotencyKey={this.state.captchaIdempotencyKey}
|
||||||
|
/>
|
||||||
|
<div className='fields-group'>
|
||||||
|
<Checkbox
|
||||||
|
label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
|
||||||
|
name='agreement'
|
||||||
|
onChange={this.onCheckboxChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input type='hidden' name='locale' value='en_US' />
|
||||||
|
<div className='actions'>
|
||||||
|
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</SimpleForm>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -729,6 +729,13 @@ $small-breakpoint: 960px;
|
||||||
&--right {
|
&--right {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
width: 395px;
|
width: 395px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.simple_form {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: var(--brand-color-faint);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 767px) and (max-width: 1024px) {
|
@media (min-width: 767px) and (max-width: 1024px) {
|
||||||
|
@ -1005,3 +1012,7 @@ $small-breakpoint: 960px;
|
||||||
.public-layout pre.canary {
|
.public-layout pre.canary {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-page {
|
||||||
|
background: var(--brand-color-faint);
|
||||||
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background-color: $ui-primary-color;
|
background-color: var(--brand-color-med);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -203,6 +203,8 @@
|
||||||
.content {
|
.content {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 40px 0;
|
margin: 40px 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
@media screen and (max-width: 767px) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
@ -270,10 +272,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: 160px;
|
left: 160px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--brand-color-med);
|
background-color: var(--brand-color-med);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
background-color: lighten($ui-base-color, 5%);
|
color: #fff;
|
||||||
border-top: darken($ui-base-color, 10%);
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 1024px) {
|
||||||
padding: 40px 20px;
|
padding: 40px 20px;
|
||||||
|
@ -48,14 +48,9 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: var(--primary-text-color);
|
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
color: var(--primary-text-color-faint);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -67,7 +62,7 @@
|
||||||
li {
|
li {
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: lighten($ui-base-color, 34%);
|
color: #fff;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
|
@ -409,17 +409,10 @@ code {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover,
|
||||||
background-color: lighten($ui-highlight-color, 5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: darken($ui-highlight-color, 5%);
|
background-color: var(--brand-color-hicontrast);
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled:hover {
|
|
||||||
background-color: $ui-primary-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.negative {
|
&.negative {
|
||||||
|
|
Ładowanie…
Reference in New Issue