🎨 Moved History & Collection section to sticky right nav (initial upload).

assets/css/styles.scss

@@ -78,7 +78,7 @@ a {
 
 header,
 footer {
-  &>div {
+  & > div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -127,7 +127,8 @@ footer {
   color: var(--ac-color);
 }
 
-.nav-first {
+.nav-first,
+.sticky-inner {
   display: flex;
   order: 1;
   flex-flow: column;
@@ -521,7 +522,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  &+label {
+  & + label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -540,7 +541,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked+label:before {
+  &:checked + label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -600,6 +601,10 @@ ol li {
   display: none;
 }
 
+.show-on-large-screen {
+  display: inline-flex;
+}
+
 #installPWA {
   display: none;
 }
@@ -717,7 +722,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"]+label {
+input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -730,11 +735,11 @@ input[type="radio"]+label {
   }
 }
 
-input[type="radio"]:checked+label {
+input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked+label+div.tab {
+input[type="radio"]:checked + label + div.tab {
   display: block;
 }
 
@@ -751,7 +756,28 @@ input[type="radio"]:checked+label+div.tab {
   color: inherit !important;
 }
 
+.page-columns {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+}
+
+.inner-left {
+  display: flex;
+  order: 1;
+}
+
+.inner-right {
+  display: flex;
+  width: 25%;
+  order: 2;
+}
+
 @media (max-width: $responsiveWidth) {
+  .content {
+    flex-flow: column;
+  }
+
   .columns {
     flex-flow: column;
   }
@@ -791,4 +817,9 @@ input[type="radio"]:checked+label+div.tab {
   .show-on-small-screen {
     display: inline-flex;
   }
+
+  .sticky-inner {
+    position: relative;
+    width: 100%;
+  }
 }

components/history.vue

@@ -11,7 +11,7 @@
       </li>
     </ul>
     <ul v-if="history.length !== 0" class="labels">
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button class="icon">
             <i class="material-icons">star_half</i>
@@ -64,7 +64,7 @@
           </ul>
         </li>
       </transition>
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button
             class="icon"
@@ -93,7 +93,7 @@
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               class="icon"
@@ -119,7 +119,7 @@
             </button>
           </li>
         </div>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="Label"
@@ -155,7 +155,7 @@
             >{{ entry.status }}</span
           >
         </li>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="URL"
@@ -176,7 +176,7 @@
           </li>
         </div>
         <transition name="smooth">
-          <div v-if="show" class="show-on-small-screen">
+          <div v-if="show" class="show-on-large-screen">
             <li>
               <input
                 aria-label="Duration"
@@ -197,7 +197,7 @@
             </li>
           </div>
         </transition>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               v-tooltip="'Delete entry'"
@@ -302,6 +302,16 @@ label {
   color: #f8e81c !important;
 }
 
+ul,
+ol {
+  flex-direction: column;
+}
+
+ul li,
+ol li {
+  display: flex;
+}
+  
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;

pages/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="page">
+    <div class="content">
+      <div class="page-columns inner-left">
         <pw-section
           v-if="showPreRequestScript"
           class="orange"
@@ -307,7 +309,7 @@
         <br />
 
         <section id="options">
-      <input id="tab-one" type="radio" name="grp" checked="checked" />
+          <input id="tab-one" type="radio" name="options" checked="checked" />
           <label for="tab-one">Authentication</label>
           <div class="tab">
             <br />
@@ -386,7 +388,7 @@
               </div>
             </pw-section>
           </div>
-      <input id="tab-two" type="radio" name="grp" />
+          <input id="tab-two" type="radio" name="options" />
           <label for="tab-two">Headers</label>
           <div class="tab">
             <br />
@@ -468,7 +470,7 @@
               </ul>
             </pw-section>
           </div>
-      <input id="tab-three" type="radio" name="grp" />
+          <input id="tab-three" type="radio" name="options" />
           <label for="tab-three">Parameters</label>
           <div class="tab">
             <br />
@@ -636,14 +638,24 @@
         </pw-section>
 
         <br />
+      </div>
 
+      <aside class="sticky-inner inner-right">
+        <section>
+          <input id="collection-tab" type="radio" name="side" checked="checked" />
+          <label for="collection-tab">Collections</label>
+          <div class="tab">
             <pw-section class="yellow" label="Collections" ref="collections">
           <collections />
           </pw-section>
-
+          </div>
-    <br />
+          <input id="history-tab" type="radio" name="side" />
-
+          <label for="history-tab">History</label>
+          <div class="tab">
             <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+          </div>
+        </section>
+      </aside>
 
       <save-request-as
         v-bind:show="showRequestModal"
@@ -745,6 +757,7 @@
       <div slot="footer"></div>
     </pw-modal>
     </div>
+  </div>
 </template>
 <script>
 import section from "../components/section";