1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00

Add padding-bottom to ascribe-property instead of ascribe-property-wrapper

Avoids having to style all the collapsible Properties with
`padding-bottom: 0` to center labels when collapsed.
This commit is contained in:
Brett Sun 2015-12-16 19:03:01 +01:00
parent 875e98dd3b
commit bf244e2bfa
11 changed files with 15 additions and 28 deletions

View File

@ -115,8 +115,7 @@ let ConsignForm = React.createClass({
<Property <Property
name='contract_agreement' name='contract_agreement'
label={getLangText('Consign Contract')} label={getLangText('Consign Contract')}
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputContractAgreementCheckbox <InputContractAgreementCheckbox
createPublicContractAgreement={createPublicContractAgreement} createPublicContractAgreement={createPublicContractAgreement}
email={email} /> email={email} />

View File

@ -48,8 +48,7 @@ let CopyrightAssociationForm = React.createClass({
<Property <Property
name="copyright_association" name="copyright_association"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
label={getLangText('Copyright Association')} label={getLangText('Copyright Association')}>
style={{paddingBottom: 0}}>
<select defaultValue={selectedState} name="contract"> <select defaultValue={selectedState} name="contract">
<option <option
name={0} name={0}
@ -77,4 +76,4 @@ let CopyrightAssociationForm = React.createClass({
} }
}); });
export default CopyrightAssociationForm; export default CopyrightAssociationForm;

View File

@ -202,8 +202,7 @@ let LoanForm = React.createClass({
<Property <Property
name='contract_agreement' name='contract_agreement'
label={getLangText('Loan Contract')} label={getLangText('Loan Contract')}
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputContractAgreementCheckbox <InputContractAgreementCheckbox
createPublicContractAgreement={createPublicContractAgreement} createPublicContractAgreement={createPublicContractAgreement}
email={email} /> email={email} />

View File

@ -128,8 +128,7 @@ let SendContractAgreementForm = React.createClass({
<Property <Property
name='appendix' name='appendix'
checkboxLabel={getLangText('Add appendix to the contract')} checkboxLabel={getLangText('Add appendix to the contract')}
expanded={false} expanded={false}>
style={{paddingBottom: 0}}>
<span>{getLangText('Appendix')}</span> <span>{getLangText('Appendix')}</span>
{/* We're using disabled on a form here as PropertyCollapsible currently {/* We're using disabled on a form here as PropertyCollapsible currently
does not support the disabled + overrideForm functionality */} does not support the disabled + overrideForm functionality */}

View File

@ -57,7 +57,7 @@ let SignupForm = React.createClass({
if (response.user) { if (response.user) {
let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000); let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
// Refactor this to its own component // Refactor this to its own component
this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.'); this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
} else { } else {
@ -131,8 +131,7 @@ let SignupForm = React.createClass({
{this.props.children} {this.props.children}
<Property <Property
name="terms" name="terms"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>
{' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '} {' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '}

View File

@ -66,8 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
</Property> </Property>
<Property <Property
name="terms" name="terms"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>
{' ' + getLangText('I agree to the Terms of Service the art price') + ' '} {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}

View File

@ -156,7 +156,7 @@ const InputContractAgreementCheckbox = React.createClass({
return ( return (
<div <div
className="notification-contract-pdf" className="notification-contract-pdf"
style={{paddingBottom: '1em'}}> style={{paddingBottom: '0.25em'}}>
<embed <embed
className="embed-form" className="embed-form"
src={contractUrl} src={contractUrl}

View File

@ -35,7 +35,7 @@ let AccountSettings = React.createClass({
getFormDataProfile(){ getFormDataProfile(){
return {'email': this.props.currentUser.email}; return {'email': this.props.currentUser.email};
}, },
render() { render() {
let content = <AscribeSpinner color='dark-blue' size='lg'/>; let content = <AscribeSpinner color='dark-blue' size='lg'/>;
let profile = null; let profile = null;
@ -78,8 +78,7 @@ let AccountSettings = React.createClass({
getFormData={this.getFormDataProfile}> getFormData={this.getFormDataProfile}>
<Property <Property
name="hash_locally" name="hash_locally"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputCheckbox <InputCheckbox
defaultChecked={this.props.currentUser.profile.hash_locally}> defaultChecked={this.props.currentUser.profile.hash_locally}>
<span> <span>

View File

@ -379,8 +379,7 @@ const PRRegisterPieceForm = React.createClass({
className="ascribe-form-bordered"> className="ascribe-form-bordered">
<Property <Property
name="terms" name="terms"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<span> <span>
{getLangText('By submitting this form, you agree to the') + ' '} {getLangText('By submitting this form, you agree to the') + ' '}
<a <a

View File

@ -71,8 +71,7 @@ let PrizeRegisterPiece = React.createClass({
</Property> </Property>
<Property <Property
name="terms" name="terms"
className="ascribe-property-collapsible-toggle" className="ascribe-property-collapsible-toggle">
style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>
{' ' + getLangText('I agree to the Terms of Service the art price') + ' '} {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}

View File

@ -3,7 +3,6 @@ $ascribe-red-error: rgb(169, 68, 66);
.ascribe-property-wrapper { .ascribe-property-wrapper {
background-color: white; background-color: white;
border-left: 3px solid rgba(0, 0, 0, 0); border-left: 3px solid rgba(0, 0, 0, 0);
padding-bottom: 1em;
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -37,7 +36,6 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-right: 1em; margin-right: 1em;
} }
} }
> input, > input,
> textarea { > textarea {
@ -74,9 +72,7 @@ $ascribe-red-error: rgb(169, 68, 66);
border-top: 1px solid rgba(0, 0, 0, .05); border-top: 1px solid rgba(0, 0, 0, .05);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
padding-left: 1.5em; padding: 1em 1.5em;
padding-right: 1.5em;
padding-top: 1em;
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -233,4 +229,4 @@ $ascribe-red-error: rgb(169, 68, 66);
> span > span { > span > span {
margin-top: 0; margin-top: 0;
} }
} }