Move clickable labels example up to be more prominent and make markup a bit more semantic

Author: jakezatecky

examples/src/index.html

@@ -53,18 +53,6 @@ <h2>Pessimistic Toggle Example</h2>
       </p>
       <div id="pessimistic-toggle-example"></div>
 
-      <h2>Hide Checkboxes Example</h2>
-      <p>
-        Checkboxes can be hidden on a node-level by setting <code>showCheckbox: false</code> for any given node. They
-        can also be more broadly hidden by the passing the <code>onlyLeafCheckboxes</code> property, which will force
-        checkboxes to render only on leaf nodes.
-      </p>
-      <div id="hidden-checkboxes-example"></div>
-
-      <h2>Large Data Example</h2>
-      <p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
-      <div id="large-data-example"></div>
-
       <h2>Clickable Labels Example</h2>
       <p>
         By default, clicking on the node label toggles the checkbox value. By providing an <code>onClick</code> property
@@ -77,6 +65,18 @@ <h2>Clickable Labels Example</h2>
       </p>
       <div id="clickable-labels-example"></div>
 
+      <h2>Hide Checkboxes Example</h2>
+      <p>
+        Checkboxes can be hidden on a node-level by setting <code>showCheckbox: false</code> for any given node. They
+        can also be more broadly hidden by the passing the <code>onlyLeafCheckboxes</code> property, which will force
+        checkboxes to render only on leaf nodes.
+      </p>
+      <div id="hidden-checkboxes-example"></div>
+
+      <h2>Large Data Example</h2>
+      <p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
+      <div id="large-data-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.

examples/src/js/ClickableLabelsExample.js

@@ -117,24 +117,21 @@ class ClickExample extends React.Component {
 
     render() {
         const { checked, expanded, clicked } = this.state;
-
-        const notClickedText = 'Not Clicked';
+        const notClickedText = '(none)';
 
         return (
-            <div className="row">
-                <div style={{ width: '50%', display: 'inline-block', verticalAlign: 'top' }}>
-                    <CheckboxTree
-                        checked={checked}
-                        expanded={expanded}
-                        nodes={nodes}
-                        expandOnClick
-                        onCheck={this.onCheck}
-                        onClick={this.onClick}
-                        onExpand={this.onExpand}
-                    />
-                </div>
-                <div style={{ width: '50%', display: 'inline-block', verticalAlign: 'top' }}>
-                    <b>Clicked Node</b>: {clicked.value || notClickedText} <br />
+            <div className="clickable-labels">
+                <CheckboxTree
+                    checked={checked}
+                    expanded={expanded}
+                    nodes={nodes}
+                    expandOnClick
+                    onCheck={this.onCheck}
+                    onClick={this.onClick}
+                    onExpand={this.onExpand}
+                />
+                <div className="clickable-labels-info">
+                    <strong>Clicked Node</strong>: {clicked.value || notClickedText}
                 </div>
             </div>
         );

examples/src/scss/style.scss

@@ -11,3 +11,11 @@ $rct-border-color: #ccc;
   color: $rct-color;
   font-family: 'Roboto', sans-serif;
 }
+
+.clickable-labels {
+  display: flex;
+
+  > * {
+    width: 50%;
+  }
+}