Modify the demo preview styles.

jaywcjlove · Jun 11, 2018 · ccdd371 · ccdd371
1 parent 0828574
commit ccdd371
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/theme/default/lib/markdown/InlineCode.js b/theme/default/lib/markdown/InlineCode.js
@@ -24,14 +24,23 @@ export default class Canvas extends PureComponent {
         </code>
       </pre>
     );
+    const isPreview = /^(html|htm)$/.test(this.props.language);
+
     if (/^__dome__/.test(this.props.value)) {
       return (
         <div className={styles.demo}>
-          <div className={styles.demoBody} id={this.playerId}>
-            {/^(html|htm)$/.test(this.props.language) && <div dangerouslySetInnerHTML={{ __html: code }} />}
-          </div>
+          {isPreview && (
+            <div className={styles.demoBody} id={this.playerId}>
+              <div dangerouslySetInnerHTML={{ __html: code }} />
+            </div>
+          )}
           {PreCode(this.state.height)}
-          <div className={styles.demoControl} onClick={this.onClick.bind(this)}>
+          <div
+            className={classNames(styles.demoControl, {
+              [styles.isPreview]: !isPreview && this.state.height !== 0,
+            })}
+            onClick={this.onClick.bind(this)}
+          >
             {this.state.height === 0 ? '显示' : '隐藏'}代码
           </div>
         </div>

diff --git a/theme/default/lib/markdown/InlineCode.less b/theme/default/lib/markdown/InlineCode.less
@@ -13,10 +13,16 @@
       padding: 10px;
     }
   }
+  .demoBody + pre.highlight + .demoControl {
+    border-top: 1px solid #d5d5d5;
+  }
+  .isPreview {
+    border-top: 1px solid #d5d5d5;
+  }
   .demoControl {
     padding: 3px 8px;
-    cursor: pointer;
+    line-height: 20px;
     background-color: rgba(0,0,0,.03);
-    border-top: 1px solid #d5d5d5;
+    cursor: pointer;
   }
 }