nested collapsible paragraphs

.scss-lint.yml

@@ -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

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -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>

js/components/ascribe_settings/contract_settings.js

@@ -27,6 +27,10 @@ let ContractSettings = React.createClass({
                 title={getLangText('Contract Settings')}
                 show={true}
                 defaultExpanded={this.props.defaultExpanded}>
+                <CollapsibleParagraph
+                    title={getLangText('Create new Contract')}
+                    show={true}
+                    defaultExpanded={this.props.defaultExpanded}>
                     <Form>
                         <Property
                             label="Contract file">
@@ -72,6 +76,7 @@ let ContractSettings = React.createClass({
                         <hr />
                     </Form>
                 </CollapsibleParagraph>
+            </CollapsibleParagraph>
         );
     }
 });

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -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}

sass/ascribe_collapsible.scss

@@ -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%;
+    }
+}

sass/ascribe_edition.scss

@@ -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;

sass/main.scss

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