Compact UI. fixe #314

components/graphql/field.vue

@@ -13,33 +13,27 @@
 
 <style>
 .field-box {
-  padding: 1em;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 0.01em;
-  border-color: var(--fg-color);
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+  padding: 16px;
+  margin: 4px 0;
 }
+
 .field-title {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .field-deprecated {
   background-color: yellow;
   color: black;
   display: inline-block;
-  padding: 0.2em;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  margin-top: 1em;
-  border-radius: 5px;
-  font-weight: bold;
+  padding: 4px 8px;
+  margin: 4px 0;
+  border-radius: 4px;
+  font-weight: 700;
 }
 
 .field-desc {
-  opacity: 0.7;
-  margin-top: 0.5em;
+  color: var(--fg-light-color);
+  margin-top: 4px;
 }
 </style>
 

components/graphql/type.vue

@@ -16,22 +16,17 @@
 
 <style>
 .type-box {
-  padding: 1em;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 0.01em;
-  border-color: var(--fg-color);
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+  padding: 16px;
+  margin: 4px 0;
 }
 
 .type-desc {
-  opacity: 0.7;
-  margin-top: 0.5em;
+  color: var(--fg-light-color);
+  margin-top: 4px;
 }
 
 .type-title {
-  font-weight: bold;
+  font-weight: 700;
 }
 </style>
 

pages/graphql.vue

@@ -23,8 +23,6 @@
           </ul>
         </pw-section>
 
-        <br />
-
         <pw-section class="green" label="Schema" ref="schema">
           <Editor
             :value="schemaString"

pages/index.vue

@@ -309,13 +309,10 @@
           </div>
         </pw-section>
 
-        <br />
-
         <section id="options">
           <input id="tab-one" type="radio" name="options" checked="checked" />
           <label for="tab-one">Authentication</label>
           <div class="tab">
-            <br />
 
             <pw-section
               class="cyan"
@@ -402,7 +399,6 @@
           <input id="tab-two" type="radio" name="options" />
           <label for="tab-two">Headers</label>
           <div class="tab">
-            <br />
 
             <pw-section class="orange" label="Headers" ref="headers">
               <ul>
@@ -484,7 +480,6 @@
           <input id="tab-three" type="radio" name="options" />
           <label for="tab-three">Parameters</label>
           <div class="tab">
-            <br />
 
             <pw-section class="pink" label="Parameters" ref="parameters">
               <ul>
@@ -563,8 +558,6 @@
           </div>
         </section>
 
-        <br />
-
         <pw-section
           class="purple"
           id="response"

pages/settings.vue

@@ -56,8 +56,6 @@
       </ul>
     </pw-section>
 
-    <br />
-
     <pw-section class="blue" label="Proxy" ref="proxy">
       <ul>
         <li>

pages/websocket.vue

@@ -30,8 +30,6 @@
       </ul>
     </pw-section>
 
-    <br />
-
     <pw-section
       class="purple"
       label="Communication"