From 5c9b8addf328db40073cee75547395c4941c6416 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 23 Aug 2019 10:49:35 +0530
Subject: [PATCH] :sparkles: On clicking use button from history, view will
 scroll to request section, moved history section below response section

---
 index.html | 64 +++++++++++++++++++++++++++---------------------------
 script.js  |  3 +++
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index b5759560b..235c8986c 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
         <h3>API request builder</h3>
       </div>
     </header>
-    <fieldset class="request">
+    <fieldset class="request" ref="request">
       <legend v-on:click="collapse">Request ↕</legend>
       <div class="collapsible">
         <ul>
@@ -104,37 +104,6 @@
         </ul>
       </div>
     </fieldset>
-    <fieldset class="history hidden">
-      <legend v-on:click="collapse">History ↕</legend>
-      <div class="collapsible">
-        <ul v-for="entry in history">
-          <li>
-            <label for="time">Time</label>
-            <input name="time" type="text" readonly :value="entry.time">
-          </li>
-          <li>
-            <label for="name">Method</label>
-            <input name="name" type="text" readonly :value="entry.method">
-          </li>
-          <li>
-            <label for="name">URL</label>
-            <input name="name" type="text" readonly :value="entry.url">
-          </li>
-          <li>
-            <label for="name">Path</label>
-            <input name="name" type="text" readonly :value="entry.path">
-          </li>
-          <li>
-            <label for="delete">&nbsp;</label>
-            <button name="delete" @click="deleteHistory(entry)">Delete</button>
-          </li>
-          <li>
-            <label for="use">&nbsp;</label>
-            <button name="use" @click="useHistory(entry)">Use</button>
-          </li>
-        </ul>
-      </div>
-    </fieldset>
     <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
       <legend v-on:click="collapse">Request Body ↕</legend>
       <div class="collapsible">
@@ -253,6 +222,37 @@
         </ul>
       </div>
     </fieldset>
+    <fieldset class="history">
+      <legend v-on:click="collapse">History ↕</legend>
+      <div class="collapsible">
+        <ul v-for="entry in history">
+          <li>
+            <label for="time">Time</label>
+            <input name="time" type="text" readonly :value="entry.time">
+          </li>
+          <li>
+            <label for="name">Method</label>
+            <input name="name" type="text" readonly :value="entry.method">
+          </li>
+          <li>
+            <label for="name">URL</label>
+            <input name="name" type="text" readonly :value="entry.url">
+          </li>
+          <li>
+            <label for="name">Path</label>
+            <input name="name" type="text" readonly :value="entry.path">
+          </li>
+          <li>
+            <label for="delete">&nbsp;</label>
+            <button name="delete" @click="deleteHistory(entry)">Delete</button>
+          </li>
+          <li>
+            <label for="use">&nbsp;</label>
+            <button name="use" @click="useHistory(entry)">Use</button>
+          </li>
+        </ul>
+      </div>
+    </fieldset>
     <footer>
       <a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
       <button id="installPWA" onclick="installPWA()">
diff --git a/script.js b/script.js
index ea38ac3f1..7b82d9f90 100644
--- a/script.js
+++ b/script.js
@@ -87,6 +87,9 @@ const app = new Vue({
       this.method = method
       this.url = url
       this.path = path
+      this.$refs.request.scrollIntoView({
+        behavior: 'smooth'
+      })
     },
     collapse({
       target