Hide parent type name when doc explorer is narrow

As suggested by @leebyron here: #244 (comment)
graphql · Dec 10, 2016 · 4623030 · 4623030
1 parent e005447
commit 4623030
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/css/doc-explorer.css b/css/doc-explorer.css
@@ -37,6 +37,10 @@
   white-space: nowrap;
 }
 
+.doc-explorer-narrow .doc-explorer-back {
+  width: 0;
+}
+
 .graphiql-container .doc-explorer-back:before {
   border-left: 2px solid #3B5998;
   border-top: 2px solid #3B5998;

diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
@@ -278,6 +278,10 @@ export class GraphiQL extends React.Component {
       display: this.state.docExplorerOpen ? 'block' : 'none',
       width: this.state.docExplorerWidth,
     };
+    const docExplorerWrapClasses = [
+      'docExplorerWrap',
+      this.state.docExplorerWidth < 200 ? 'doc-explorer-narrow' : '',
+    ].join(' ');
 
     const variableOpen = this.state.variableEditorOpen;
     const variableStyle = {
@@ -357,7 +361,7 @@ export class GraphiQL extends React.Component {
             </div>
           </div>
         </div>
-        <div className="docExplorerWrap" style={docWrapStyle}>
+        <div className={docExplorerWrapClasses} style={docWrapStyle}>
           <div
             className="docExplorerResizer"
             onMouseDown={this.handleDocsResizeStart}