From 9f0512e81ec756b1fdcfee796798916c87cc2392 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 10 Nov 2019 21:49:26 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Responsive=20History=20section?=
 =?UTF-8?q?=20for=20mobile=20devices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/styles.scss |  5 +++++
 components/history.vue | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 220f9aa08..e88b8fee8 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -597,6 +597,11 @@ ol {
   margin: 4px 0 4px;
   padding: 0;
   list-style-type: none;
+
+  ul,
+  ol {
+    margin: 0;
+  }
 }
 
 ul li,
diff --git a/components/history.vue b/components/history.vue
index 8c322d746..8db25ae28 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -5,16 +5,16 @@
         <input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
       </li>
     </ul>
-    <ul v-if="history.length !== 0">
+    <ul v-if="history.length !== 0" class="labels">
       <div class="show-on-small-screen">
         <li>
           <button class="icon">
-            <i class="material-icons">details</i>
+            <i class="material-icons">star_half</i>
           </button>
         </li>
         <li>
           <button class="icon">
-            <i class="material-icons">change_history</i>
+            <i class="material-icons">history</i>
           </button>
         </li>
       </div>
@@ -89,22 +89,26 @@
             </button>
           </li>
         </div>
-        <li>
-          <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
-        </li>
-        <li>
-          <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
-        </li>
+        <div class="show-on-small-screen">
+          <li>
+            <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
+          </li>
+          <li>
+            <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
+          </li>
+        </div>
         <li class="method-list-item">
           <input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
           <span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
         </li>
-        <li>
-          <input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
-        </li>
-        <li>
-          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
-        </li>
+        <div class="show-on-small-screen">
+          <li>
+            <input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
+          </li>
+          <li>
+            <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
+          </li>
+        </div>
         <transition name="smooth">
           <div v-if="show" class="show-on-small-screen">
             <li>
@@ -194,6 +198,14 @@
     .virtual-list.filled {
       min-height: 320px;
     }
+
+    .labels {
+      display: none;
+    }
+
+    .entry {
+      border-bottom: 1px solid var(--brd-color);
+    }
   }
 
 </style>