✨ Moved History and Collection sections to right side bar

assets/css/styles.scss

@@ -135,6 +135,9 @@ footer {
   position: sticky;
   top: 0;
   align-self: flex-start;
+}
+
+.nav-first {
   z-index: 1;
 }
 
@@ -633,22 +636,6 @@ ol li {
   background-color: var(--err-color);
 }
 
-fieldset#history {
-  .method-list-item {
-    position: relative;
-
-    span {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      font-family: 'Roboto Mono', monospace;
-      background-color: var(--bg-color);
-      padding: 4px 8px;
-      border-radius: 8px;
-    }
-  }
-}
-
 .align-left {
   text-align: left;
 }
@@ -697,7 +684,7 @@ fieldset#history {
     position: fixed;
     top: 12px;
     right: 12px;
-    z-index: 1;
+    z-index: 2;
 
     #hidden-message {
       display: block;
@@ -711,14 +698,14 @@ section {
   flex-wrap: wrap;
 }
 
-div.tab {
+.tab {
   width: 100%;
   order: 1;
 }
 
 input[type="file"],
 input[type="radio"],
-div.tab {
+.tab {
   display: none;
 }
 
@@ -739,7 +726,7 @@ input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked + label + div.tab {
+input[type="radio"]:checked + label + .tab {
   display: block;
 }
 
@@ -772,7 +759,7 @@ input[type="radio"]:checked + label + div.tab {
   display: flex;
   width: 25%;
   order: 2;
-  height: calc(100vh - 80px)
+  height: calc(100vh - 80px);
 }
 
 @media (max-width: $responsiveWidth) {
@@ -824,4 +811,8 @@ input[type="radio"]:checked + label + div.tab {
     position: relative;
     width: 100%;
   }
+
+  .inner-left {
+    margin-right: 0;
+  }
 }

components/collections/index.vue

@@ -50,9 +50,8 @@ TODO:
         </button>
       </div>
       <div>
-        <button class="icon" @click="displayModalImportExport(true)">
+        <button class="icon" @click="displayModalImportExport(true)" v-tooltip="'Import / Export'">
           <i class="material-icons">import_export</i>
-          <span>Import / Export</span>
         </button>
         <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
@@ -66,25 +65,36 @@ TODO:
       </div>
     </div>
 
-    <ul>
-      <li v-for="(collection, index) in collections" :key="collection.name">
-        <collection
-          v-bind:collection-index="index"
-          v-bind:collection="collection"
-          v-on:edit-collection="editCollection(collection, index)"
-          v-on:add-folder="addFolder(collection, index)"
-          v-on:edit-folder="editFolder($event)"
-          v-on:edit-request="editRequest($event)"
-        ></collection>
-      </li>
-      <li v-if="collections.length === 0">
-        <label>Collections are empty</label>
-      </li>
-    </ul>
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: collections.length }"
+      :size="152"
+      :remain="Math.min(5, collections.length)"
+    >
+      <ul>
+        <li v-for="(collection, index) in collections" :key="collection.name">
+          <collection
+            v-bind:collection-index="index"
+            v-bind:collection="collection"
+            v-on:edit-collection="editCollection(collection, index)"
+            v-on:add-folder="addFolder(collection, index)"
+            v-on:edit-folder="editFolder($event)"
+            v-on:edit-request="editRequest($event)"
+          ></collection>
+        </li>
+        <li v-if="collections.length === 0">
+          <label>Collections are empty</label>
+        </li>
+      </ul>
+    </virtual-list>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.virtual-list {
+  max-height: calc(100vh - 220px);
+}
+
 ul {
   display: flex;
   flex-direction: column;
@@ -102,7 +112,8 @@ export default {
     editCollection: () => import("./editCollection"),
     editFolder: () => import("./editFolder"),
     editRequest: () => import("./editRequest"),
-    importExportCollections: () => import("./importExportCollections")
+    importExportCollections: () => import("./importExportCollections"),
+    VirtualList: () => import("vue-virtual-scroll-list")
   },
   data() {
     return {

components/history.vue

@@ -1,74 +1,74 @@
 <template>
   <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
-      <li id="filter-history">
-        <input
-          aria-label="Search"
-          type="text"
-          placeholder="search history"
-          v-model="filterText"
-        />
-      </li>
-    </ul>
-    <ul v-if="history.length !== 0" class="labels">
       <div class="show-on-large-screen">
-        <li>
-          <button class="icon" @click="sort_by_label()">
-            <i class="material-icons">label</i>
-          </button>
-        </li>
-        <li>
-          <button class="icon" @click="sort_by_time()">
-            <i class="material-icons">access_time</i>
-          </button>
-        </li>
-        <li>
-          <button class="icon" @click="sort_by_status_code()">
-            <i class="material-icons">assistant</i>
-          </button>
-        </li>
-        <li>
-          <button class="icon" @click="sort_by_url()">
-            <i class="material-icons">language</i>
-          </button>
-        </li>
-        <li>
-          <button class="icon" @click="sort_by_path()">
-            <i class="material-icons">http</i>
-          </button>
-        </li>
-        <transition name="smooth" v-if="show">
-          <li>
-            <ul>
-              <li>
-                <button class="icon" @click="sort_by_duration()">
-                  <i class="material-icons">timer</i>
-                </button>
-              </li>
-              <li>
-                <button class="icon">
-                  <i class="material-icons">code</i>
-                </button>
-              </li>
-            </ul>
-          </li>
-        </transition>
-        <li>
-          <button
-            class="icon"
-            @click="toggleCollapse()"
-            v-tooltip="{ content: !show ? 'Show more' : 'Hide more' }"
-          >
-            <i class="material-icons" v-if="!show">first_page</i>
-            <i class="material-icons" v-else>last_page</i>
-          </button>
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="text"
+            placeholder="search history"
+            v-model="filterText"
+          />
         </li>
+        <v-popover>
+            <button class="tooltip-target icon" v-tooltip="'More'">
+              <i class="material-icons">more_vert</i>
+            </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="sort_by_label()" v-close-popover>
+                <i class="material-icons">label</i>
+                <span>Sort by label</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_time()" v-close-popover>
+                <i class="material-icons">access_time</i>
+                <span>Sort by time</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_status_code()" v-close-popover>
+                <i class="material-icons">assistant</i>
+                <span>Sort by status</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_url()" v-close-popover>
+                <i class="material-icons">language</i>
+                <span>Sort by url</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_path()" v-close-popover>
+                <i class="material-icons">timeline</i>
+                <span>Sort by path</span>
+              </button>
+            </div>
+            <div v-if="showMore">
+              <button class="icon" @click="sort_by_duration()" v-close-popover>
+                <i class="material-icons">timer</i>
+                <span>Sort by duration</span>
+              </button>
+            </div>
+            <div>
+              <button
+                class="icon"
+                @click="toggleCollapse()"
+              >
+                <i class="material-icons" v-if="!showMore">first_page</i>
+                <i class="material-icons" v-else>last_page</i>
+                <span>{{ !showMore ? 'Show more' : 'Hide more' }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
       </div>
     </ul>
     <virtual-list
       class="virtual-list"
       :class="{ filled: filteredHistory.length }"
-      :size="56"
+      :size="185"
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
@@ -84,6 +84,16 @@
               <i class="material-icons" v-else>star_border</i>
             </button>
           </li>
+          <li>
+            <input
+              aria-label="Label"
+              type="text"
+              readonly
+              :value="entry.label"
+              placeholder="No label"
+            />
+          </li>
+<!--
           <li>
             <button
               class="icon"
@@ -97,26 +107,42 @@
               <i class="material-icons" v-else>code</i>
             </button>
           </li>
+-->
+          <v-popover>
+            <li>
+              <button class="tooltip-target icon" v-tooltip="'More'">
+                <i class="material-icons">more_vert</i>
+              </button>
+            </li>
+            <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  :id="'use-button#' + index"
+                  @click="useHistory(entry)"
+                  aria-label="Edit"
+                  v-close-popover
+                >
+                  <i class="material-icons">edit</i>
+                  <span>Use</span>
+                </button>
+              </div>
+               <div>
+                <button
+                  class="icon"
+                  :id="'delete-button#' + index"
+                  @click="deleteHistory(entry)"
+                  aria-label="Delete"
+                  v-close-popover
+                >
+                  <i class="material-icons">delete</i>
+                  <span>Delete</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
         </div>
         <div class="show-on-large-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>
           <li class="method-list-item">
             <input
               aria-label="Method"
@@ -155,7 +181,16 @@
           </li>
         </div>
         <transition name="smooth">
-          <div v-if="show" class="show-on-large-screen">
+          <div v-if="showMore" class="show-on-large-screen">
+            <li>
+              <input
+                aria-label="Time"
+                type="text"
+                readonly
+                :value="entry.time"
+                v-tooltip="entry.date"
+              />
+            </li>
             <li>
               <input
                 aria-label="Duration"
@@ -176,37 +211,6 @@
             </li>
           </div>
         </transition>
-        <v-popover>
-          <button class="tooltip-target icon" v-tooltip="'More'">
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button
-                v-tooltip="'Edit entry'"
-                class="icon"
-                :id="'use-button#' + index"
-                @click="useHistory(entry)"
-                aria-label="Edit"
-              >
-                <i class="material-icons">edit</i>
-                <span>Use</span>
-              </button>
-            </div>
-             <div>
-              <button
-                v-tooltip="'Delete entry'"
-                class="icon"
-                :id="'delete-button#' + index"
-                @click="deleteHistory(entry)"
-                aria-label="Delete"
-              >
-                <i class="material-icons">delete</i>
-                <span>Delete</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
       </ul>
     </virtual-list>
     <ul
@@ -260,7 +264,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  min-height: 90px;
+  max-height: calc(100vh - 284px);
 
   [readonly] {
     cursor: default;
@@ -298,6 +302,25 @@ ol li {
   display: flex;
 }
 
+.method-list-item {
+  position: relative;
+
+  span {
+    position: absolute;
+    top: 10px;
+    right: 8px;
+    font-family: 'Roboto Mono', monospace;
+    background-color: var(--bg-color);
+    padding: 2px 8px;
+    border-radius: 8px;
+  }
+}
+
+.entry {
+  border-bottom: 1px solid var(--brd-color);
+  padding: 16px 0;
+}
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
@@ -306,10 +329,6 @@ ol li {
   .labels {
     display: none;
   }
-
-  .entry {
-    border-bottom: 1px solid var(--brd-color);
-  }
 }
 </style>
 
@@ -318,6 +337,7 @@ import { findStatusGroup } from "../pages/index";
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property));
+
 export default {
   components: {
     "pw-section": () => import("./section"),
@@ -337,7 +357,7 @@ export default {
       reverse_sort_status_code: false,
       reverse_sort_url: false,
       reverse_sort_path: false,
-      show: false
+      showMore: false
     };
   },
   computed: {
@@ -478,7 +498,7 @@ export default {
       this.reverse_sort_duration = !this.reverse_sort_duration;
     },
     toggleCollapse() {
-      this.show = !this.show;
+      this.showMore = !this.showMore;
     },
     toggleStar(index) {
       this.history[index]["star"] = !this.history[index]["star"];

pages/index.vue

@@ -636,8 +636,6 @@
             </li>
           </ul>
         </pw-section>
-
-        <br />
       </div>
 
       <aside class="sticky-inner inner-right">