nested collapsible paragraphs

This commit is contained in:
Tim Daubenschütz 2015-09-01 14:00:06 +02:00
parent 56cdcdb5c6
commit b5b1e36109
7 changed files with 88 additions and 77 deletions

View File

@ -48,7 +48,7 @@ linters:
enabled: false
FinalNewline:
enabled: true
enabled: false
present: true
HexLength:
@ -106,7 +106,7 @@ linters:
max_properties: 10
PropertySortOrder:
enabled: true
enabled: false
ignore_unspecified: false
min_properties: 2
separate_groups: false

View File

@ -38,14 +38,14 @@ const CollapsibleParagraph = React.createClass({
if(this.props.show) {
return (
<div className="ascribe-detail-header">
<div className="ascribe-edition-collapsible-wrapper">
<div className="ascribe-collapsible-wrapper">
<div onClick={this.handleToggle}>
<span>{text} {this.props.title}</span>
</div>
<Panel
collapsible
expanded={this.state.expanded}
className="ascribe-edition-collapsible-content">
className="ascribe-collapsible-content">
{this.props.children}
</Panel>
</div>

View File

@ -27,50 +27,55 @@ let ContractSettings = React.createClass({
title={getLangText('Contract Settings')}
show={true}
defaultExpanded={this.props.defaultExpanded}>
<Form>
<Property
label="Contract file">
<ReactS3FineUploader
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: 100000,
sizeLimit: '50000000'
}}
session={{
endpoint: ApiUrls.blob_contracts,
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
cors: {
expected: true,
sendCredentials: true
}
}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
areAssetsDownloadable={true}
areAssetsEditable={true}/>
</Property>
<hr />
</Form>
<CollapsibleParagraph
title={getLangText('Create new Contract')}
show={true}
defaultExpanded={this.props.defaultExpanded}>
<Form>
<Property
label="Contract file">
<ReactS3FineUploader
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: 100000,
sizeLimit: '50000000'
}}
session={{
endpoint: ApiUrls.blob_contracts,
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
cors: {
expected: true,
sendCredentials: true
}
}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
areAssetsDownloadable={true}
areAssetsEditable={true}/>
</Property>
<hr />
</Form>
</CollapsibleParagraph>
</CollapsibleParagraph>
);
}

View File

@ -265,7 +265,7 @@ let PrizeJurySettings = React.createClass({
if (this.state.members.length > -1) {
content = (
<div style={{padding: '1em'}}>
<div>
<CollapsibleParagraph
title={getLangText('Active Jury Members')}
show={true}

View File

@ -0,0 +1,33 @@
.ascribe-collapsible-wrapper {
vertical-align: bottom;
width: 100%;
> div:first-child {
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
margin-top: 20px;
padding: 0 10px 10px 0;
width: 100%;
}
> div > span {
font-size: 1.2em;
margin-right: .5em;
}
> div > span:nth-child(2) {
font-size: .9em;
}
}
.ascribe-collapsible-content {
background: none;
border: 0;
width: 100%;
/* Shrink the size of the headline for a nested element */
.ascribe-collapsible-wrapper > div:first-child {
padding-left: 1em;
font-size: 90%;
}
}

View File

@ -3,34 +3,6 @@
margin-bottom: 1em;
}
.ascribe-edition-collapsible-wrapper {
vertical-align: bottom;
width: 100%;
> div:first-child {
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
margin-top: 20px;
padding: 0 10px 10px 0;
width: 100%;
}
> div > span {
font-size: 1.2em;
margin-right: .5em;
}
> div > span:nth-child(2) {
font-size: .9em;
}
}
.ascribe-edition-collapsible-content {
background: none;
border: 0;
width: 100%;
}
.coa-file-wrapper {
display: table;
height: 200px;

View File

@ -29,6 +29,7 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_slides_container';
@import 'ascribe_form';
@import 'ascribe_panel';
@import 'ascribe_collapsible';
@import 'whitelabel/index';