Update aopic-algorithm materials to match newest code version

intoli · Sep 21, 2018 · a6eefc6 · a6eefc6
1 parent 2efab55
commit a6eefc6
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 58 deletions.
diff --git a/articles/aopic-algorithm/src/components/AOPICPlayer.jsx b/articles/aopic-algorithm/src/components/AOPICPlayer.jsx
@@ -184,26 +184,31 @@ class AOPICPlayer extends React.Component {
             <li className={classNames({
                 'list-group-item': true,
                 active: this.state.step === -1,
+                [styles.firstStep]: true,
               })}
             >
               1. Initialize Credits
             </li>
           </ul>
-          <ul className="list-group">
+          <ul className={classNames('list-group', styles.stepList)}>
             <li className={classNames({
                 'list-group-item': true,
                 active: this.state.step === 0,
               })}
             >
               2. Pick Next Node
             </li>
+          </ul>
+          <ul className={classNames('list-group', styles.stepList)}>
             <li className={classNames({
                 'list-group-item': true,
                 active: this.state.step === 1,
               })}
             >
               3. Allocate Cash
             </li>
+          </ul>
+          <ul className={classNames('list-group', styles.stepList)}>
             <li className={classNames({
                 'list-group-item': true,
                 active: this.state.step === 2,
@@ -224,34 +229,28 @@ class AOPICPlayer extends React.Component {
                 <span className="glyphicon glyphicon-play" />
               )}
             </button>
-            <div className="btn-group btn-group-justified" style={{ flex: 2 }}>
-              <div className="btn-group" role="group">
-                <button
-                  className={classNames({
-                    btn: true,
-                    'btn-default': true,
-                    disabled: this.state.speed <= 1,
-                  })}
-                  onClick={this.handleSlowerClick}
-                  type="button"
-                >
-                  <span className="glyphicon glyphicon-minus" />
-                </button>
-              </div>
-              <div className="btn-group">
-                <button
-                  className={classNames({
-                    btn: true,
-                    'btn-default': true,
-                    disabled: this.state.speed >= maxSpeed,
-                  })}
-                  onClick={this.handleFasterClick}
-                  type="button"
-                >
-                  <span className="glyphicon glyphicon-plus" />
-                </button>
-              </div>
-            </div>
+            <button
+              className={classNames({
+                btn: true,
+                'btn-default': true,
+                disabled: this.state.speed <= 1,
+              })}
+              onClick={this.handleSlowerClick}
+              type="button"
+            >
+              <span className="glyphicon glyphicon-minus" />
+            </button>
+            <button
+              className={classNames({
+                btn: true,
+                'btn-default': true,
+                disabled: this.state.speed >= maxSpeed,
+              })}
+              onClick={this.handleFasterClick}
+              type="button"
+            >
+              <span className="glyphicon glyphicon-plus" />
+            </button>
             <button
               className={classNames({
                 btn: true,
@@ -265,34 +264,28 @@ class AOPICPlayer extends React.Component {
             </button>
           </div>
           <div className={styles.controlWrapper}>
-            <div className="btn-group btn-group-justified" style={{ flex: 2 }}>
-              <div className="btn-group" role="group">
-                <button
-                  className={classNames({
-                    btn: true,
-                    'btn-default': true,
-                    disabled: this.state.labelType === 'cash-history',
-                  })}
-                  onClick={this.makeSelectLabelType('cash-history')}
-                  type="button"
-                >
-                  Cash/History
-                </button>
-              </div>
-              <div className="btn-group">
-                <button
-                  className={classNames({
-                    btn: true,
-                    'btn-default': true,
-                    disabled: this.state.labelType === 'importance',
-                  })}
-                  onClick={this.makeSelectLabelType('importance')}
-                  type="button"
-                >
-                  Importance
-                </button>
-              </div>
-            </div>
+            <button
+              className={classNames({
+                btn: true,
+                'btn-default': true,
+                disabled: this.state.labelType === 'cash-history',
+              })}
+              onClick={this.makeSelectLabelType('cash-history')}
+              type="button"
+            >
+              Cash/History
+            </button>
+            <button
+              className={classNames({
+                btn: true,
+                'btn-default': true,
+                disabled: this.state.labelType === 'importance',
+              })}
+              onClick={this.makeSelectLabelType('importance')}
+              type="button"
+            >
+              Importance
+            </button>
           </div>
           <div className={styles.controlWrapper}>
             <button

diff --git a/articles/aopic-algorithm/src/components/styles.css b/articles/aopic-algorithm/src/components/styles.css
@@ -1,5 +1,13 @@
+.first-step {
+    margin-top: 30px;
+}
+
 .step-list {
-    margin-top: 40px;
+    margin: 10px 0;
+}
+
+.step-list li {
+    border-width: 0;
 }
 
 .control-wrapper {