tweak example container size

antvis · Nov 5, 2019 · d7d9d14 · d7d9d14
1 parent a8997e5
commit d7d9d14
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.module.less b/@antv/gatsby-theme-antv/site/components/PlayGround.module.less
@@ -7,7 +7,7 @@
   border-radius: 4px;
   display: flex;
   background: #fff;
-  min-height: @editor-height;
+  height: @editor-height;
   overflow: hidden;
 
   .preview,
@@ -20,7 +20,7 @@
     border-right: 1px solid #efefef;
     padding: 24px 16px;
     overflow: auto;
-    min-height: @editor-height;
+    height: 100%;
   }
 
   .editor {
@@ -78,4 +78,16 @@
       }
     }
   }
+
+  .exampleContainerWrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.tsx b/@antv/gatsby-theme-antv/site/components/PlayGround.tsx
@@ -89,7 +89,7 @@ const PlayGround: React.FC<PlayGroundProps> = ({
             subTitle={<pre>{error && error.message}</pre>}
           />
         ) : (
-          <div ref={playpround} />
+          <div ref={playpround} className={styles.exampleContainerWrapper} />
         )}
       </div>
       <div className={styles.editor}>

diff --git a/example/gatsby-config.js b/example/gatsby-config.js
@@ -68,6 +68,6 @@ module.exports = {
         },
       },
     ],
-    exampleContainer: '<canvas id="container" class="ok" />',
+    exampleContainer: '<div id="container" class="ok" />',
   },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,6 +68,6 @@ module.exports = { @@
             },
           },
         ],
-        exampleContainer: '<canvas id="container" class="ok" />',
+        exampleContainer: '<div id="container" class="ok" />',
       },
     };