making devtool rsponsive and only showing operation name as null when there isnt one

Author: neyser zana

build/webpack-bundle.js

@@ -75,12 +75,6 @@ h2{
   white-space: pre-wrap;
 }  
 
-.graphQLTab {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
 button{
   font-size: 10px;
   text-transform: uppercase;
@@ -143,11 +137,12 @@ button:hover{
 @media screen and (max-width: 600px) {
   .reactTab {
     display: grid;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: 4fr 3fr 4fr;
     grid-template-columns: 1fr;
     grid-template-areas:
-      'sp-box'
       'diff'
+      'sp-box'
       'tree';
+    max-height: 1200px;
   }
 }

build/webpack-bundle.js.map

@@ -1,4 +1,12 @@
+.graphQLTab{
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  grid-template-areas:
+    'log-container graphql'
+}
+
 #graphql-container {
+  grid-area: graphql;
   margin-right: 0px;
   min-height: 600px;
 }
@@ -13,7 +21,7 @@
 }
 
 #graphql-res {
-  background-color: white;;
+  background-color: white;
   box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
   0 5px 15px 0 rgba(0,0,0,0.08);
   padding: 10px 25px;
@@ -39,4 +47,86 @@
   font-weight: 500;
   letter-spacing: 0.8px;
   line-height: 15px;
-}
+}
+
+/* *for log in the graphql tab */
+#log-container{
+  grid-area: log-container;
+  max-height: 400px;
+  height: 400px;
+  margin-bottom: 30px;
+} 
+
+#log-header{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+
+#logs{
+  overflow-y: scroll;
+  max-height: 95%;
+}
+.log{
+  overflow-x: scroll;
+  padding: 15px;
+  margin: 15px;
+  background-color: rgba(255, 255, 255);
+  /* transition: box-shadow .1s; */
+  cursor: pointer;
+  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
+  0 5px 15px 0 rgba(0,0,0,0.08);
+  margin-bottom: 15px;
+}
+
+.log-p{
+  margin: 5px 0px;
+}
+
+.log-span{
+  font-size: 1.2em;
+  font-weight: 500;
+  letter-spacing: 0.50px;
+  margin: 5px 0px;
+}
+
+/* *for responsive use */
+@media screen and (max-width: 760px) {
+  .graphQLTab{
+    padding: 10px;
+    display: grid;
+    grid-template-rows: 3fr 7fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'log-container'
+      'graphql';
+    max-height: 1200px;
+    overflow-y: scroll;
+  }
+  #log-container{
+    width: 100%;
+    max-height: 400px;
+    height: 400px;
+    margin: 0 auto 30px auto;
+  } 
+}
+
+/* * Large devices (desktops, 992px and up) */
+@media (min-width: 992px) { 
+  .graphQLTab{
+    padding: 10px;
+    display: grid;
+    grid-template-columns: 2fr 8fr;
+    grid-template-areas:
+      'log-container graphql';
+    max-height: 1200px;
+    overflow-y: scroll;
+  }
+  #graphql-container {
+    display: flex;
+  }
+  #graphql-res {
+    width: 40%;
+    margin-right: 10px;
+  }
+}

public/app.css

@@ -3,6 +3,7 @@
   max-height: 500px;
   overflow-y: scroll;
   padding: 10px; 
+  margin-bottom: 15px;
 }
 
 #state-header{

public/graphql.css

@@ -9,7 +9,7 @@ const Log = props => {
         <b>Request:</b> {props.logId}
       </p>
       <p className='log-p'>
-        <b>Operation Name:</b> {props.operationName}
+        <b>Operation Name:</b> {props.operationName === null ? 'Null' : props.operationName}
         {/* {props.operationName !== null ? (<b>Operation Name:</b>props.operationName) : null} */}
       </p>
       <p className='log-p'>

public/log-container.css

@@ -1,6 +1,5 @@
 import React from 'react';
 import Log from './../components/Log/Log.jsx';
-import styles from '../../public/log-container.css';
 
 const LogContainer = props => {
   let logs = props.logs.map((log, i) => {

public/stateContainer.css

@@ -204,7 +204,7 @@ class App extends Component {
               <div id='window-nav'>
                 <img id='logo' src='./hexagonFAT.png' alt='devtool logo' />
                 <button className='window-btn active' id='graphqlbtn' data-btn='Graphql' onClick={(e) => { this.handleWindowChange(e.target); }}>GraphQL</button>
-                <button className='window-btn' id='reactbtn' data-btn='React' onClick={(e) => { this.handleWindowChange(e.target); }}>Component Tree</button>
+                <button className='window-btn' id='reactbtn' data-btn='React' onClick={(e) => { this.handleWindowChange(e.target); }}>React</button>
               </div>
 
               {/* This checks what window the user has click on.