✨ Added label to request and History. Fixes #133

assets/css/styles.scss

@@ -302,6 +302,10 @@ ol li {
   justify-content: space-between;
 }
 
+.show-on-small-screen {
+  display: flex;
+}
+
 @media (max-width: $responsiveWidth) {
   header div {
     display: flex;
@@ -327,6 +331,10 @@ ol li {
   .hide-on-small-screen {
     display: none;
   }
+
+  .show-on-small-screen {
+    display: inline-flex;
+  }
 }
 
 #installPWA {

components/history.vue

@@ -7,7 +7,7 @@
     </ul>
     <ul>
       <li @click="sort_by_label()">
-        <label for="" class="flex-wrap">Name<i class="material-icons">sort</i></label>
+        <label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
       </li>
       <li @click="sort_by_time()">
         <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
@@ -25,7 +25,7 @@
     <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
         <li>
-          <input aria-label="Label" type="text" readonly :value="entry.label" :title="entry.label">
+          <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" :title="entry.date">
@@ -38,7 +38,7 @@
           <input aria-label="URL" type="text" readonly :value="entry.url">
         </li>
         <li>
-          <input aria-label="Path" type="text" readonly :value="entry.path">
+          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path">
         </li>
         <div class="show-on-small-screen">
           <li>

pages/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-      <input @keyup.enter="requestName" id="label" name="label" type="label" v-model="label">
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -135,6 +134,11 @@
           </ul>
         </div>
       </div>
+      <ul>
+        <li>
+          <input id="label" name="label" type="text" v-model="label" placeholder="Label request">
+        </li>
+      </ul>
       <div class="flex-wrap">
         <button class="icon" id="show-modal" @click="showModal = true">
           <i class="material-icons">import_export</i>
@@ -420,7 +424,7 @@
     },
     data() {
       return {
-        label:'Enter request name',
+        label: '',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
@@ -683,10 +687,12 @@
     },
     methods: {
       handleUseHistory({
+        label,
         method,
         url,
         path
       }) {
+        this.label = label;
         this.method = method;
         this.url = url;
         this.path = path;

pages/settings.vue

@@ -81,18 +81,18 @@
         themes: [
           {
             "color": "rgb(37, 38, 40)",
-            "name": "Dark",
+            "name": "Kinda Dark",
             "class": ""
           },
           {
             "color": "#ffffff",
-            "name": "Light",
+            "name": "Clearly White",
             "vibrant": true,
             "class": "light"
           },
           {
             "color": "#000000",
-            "name": "Black",
+            "name": "Just Black",
             "class": "black"
           },
           {