Update Sandbox UI/UX (#5205)

I updated the Sandbox UI for a better user experience. Now users do not have to scroll down to view the data they requested. The form is on the left and the response is on the right. Co-authored-by: Jay <jasonsaayman@gmail.com>
axios · Oct 30, 2022 · 6a548bf · 6a548bf
1 parent 179a0c8
commit 6a548bf
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/sandbox/client.html b/sandbox/client.html
@@ -1,19 +1,39 @@
 <!doctype html>
 <html>
 <head>
-  <title>axios</title>
+  <title>AXIOS | Sandbox</title>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
   <style type="text/css">
     pre {
       min-height: 39px;
       overflow: auto;
     }
+    .header{
+      display: flex;
+      flex-direction: row;
+    }
+    .box{
+     display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 25px;
+    }
+    @media screen and (max-width: 1000px) {
+      .box {
+        grid-template-columns: 1fr;
+      }
+    }
+
   </style>
 </head>
 <body class="container">
-  <h1>axios</h1>
-
-  <div class="well">
+<div class="header">
+  <img src="https://axios-http.com/assets/logo.svg" alt="axios" width="130" height="60">
+
+  <h1> &nbsp;| Sandbox</h1>
+</div>
+
+  <div class="box">
+    <div class="well">
     <h3>Input</h3>
     <form role="form" onsubmit="return false;">
       <div class="form-group">
@@ -47,7 +67,8 @@ <h3>Input</h3>
     </form>
   </div>
 
-  <div class="well">
+  <div class="response">
+    <div class="well">
     <h3>Request</h3>
     <pre id="request">No Data</pre>
   </div>
@@ -61,6 +82,8 @@ <h3>Response</h3>
     <h3>Error</h3>
     <pre id="error">None</pre>
   </div>
+</div>
+  </div>
 
   <script src="/axios.js"></script>
   <script>