mirror of
https://github.com/ascribe/onion.git
synced 2024-12-21 17:03:14 +01:00
nested collapsible paragraphs
This commit is contained in:
parent
56cdcdb5c6
commit
b5b1e36109
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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}
|
||||
|
33
sass/ascribe_collapsible.scss
Normal file
33
sass/ascribe_collapsible.scss
Normal 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%;
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
@ -29,6 +29,7 @@ $BASE_URL: '<%= BASE_URL %>';
|
||||
@import 'ascribe_slides_container';
|
||||
@import 'ascribe_form';
|
||||
@import 'ascribe_panel';
|
||||
@import 'ascribe_collapsible';
|
||||
|
||||
@import 'whitelabel/index';
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user