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

nested collapsible paragraphs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.scss-lint.yml
View File

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

4
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

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

93
js/components/ascribe_settings/contract_settings.js
View File

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

2
js/components/whitelabel/prize/components/prize_settings_container.js
View File

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

33
sass/ascribe_collapsible.scss Normal file
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%;
}
}

28
sass/ascribe_edition.scss
View File

@ -3,34 +3,6 @@
margin-bottom: 1em; 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 { .coa-file-wrapper {
display: table; display: table;
height: 200px; height: 200px;

1
sass/main.scss
View File

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