Merge remote-tracking branch 'upstream/master'

.editorconfig

@@ -3,7 +3,7 @@
 root = true
 
 [*]
-indent_size = 2
+indent_size = 1
 indent_style = space
 charset = utf-8
 end_of_line = lf

assets/css/styles.scss

@@ -359,3 +359,21 @@ fieldset#history {
     width: 100%;
   }
 }
+
+#action {
+  #hidden-message {
+    display: none;
+  }
+
+  &.show {
+    display: flex;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+
+    #hidden-message {
+      display: block;
+      margin-left: 4px;
+    }
+  }
+}

components/history.vue

@@ -6,7 +6,7 @@
         <input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
       </li>
     </ul>
-    <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
+    <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
       <ul v-for="entry in filteredHistory" :key="entry.millis" class="entry">
         <li>
           <label :for="'time#' + entry.millis">Time</label>
@@ -67,12 +67,11 @@
   </pw-section>
 </template>
 <script>
-  import VirtualList from 'vue-virtual-scroll-list'
-  import section from "./section";
-  import {
-    findStatusGroup
-  } from "../pages/index";
-  const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+		import VirtualList from 'vue-virtual-scroll-list'
+		import section from "./section";
+		import {findStatusGroup} from "../pages/index";
+
+		const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
   export default {
     components: {
       'pw-section': section,
@@ -143,4 +142,10 @@
     }
   }
 
+  @media (max-width: 720px) {
+    .virtual-list.filled {
+      min-height: 430px;
+    }
+  }
+
 </style>

pages/index.vue

@@ -24,7 +24,7 @@
         </li>
         <li>
           <label for="action" class="hide-on-small-screen">&nbsp;</label>
-          <button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
+          <button id="action" name="action" @click="sendRequest" :disabled="!isValidURL" ref="sendButton">Send <span id="hidden-message">Again</span></button>
         </li>
       </ul>
     </pw-section>
@@ -192,10 +192,10 @@
 </template>
 
 <script>
-  import history from "../components/history";
-  import section from "../components/section";
+		import history from "../components/history";
+		import section from "../components/section";
 
-  const statusCategories = [{
+		const statusCategories = [{
       name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
       className: 'info-response'
@@ -530,10 +530,24 @@
         for (const key in queries) {
           if (this[key]) this[key] = queries[key];
         }
+      },
+      observeRequestButton() {
+        const requestElement = this.$refs.request.$el;
+        const sendButton = this.$refs.sendButton;
+        const observer = new IntersectionObserver((entries, observer) => {
+          entries.forEach(entry => {
+           sendButton.className = entry.isIntersecting ? '' : 'show';
+          });
+        }, { threshold: 1 });
+
+        observer.observe(requestElement);
       }
     },
     created() {
       if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
+    },
+    mounted() {
+        this.observeRequestButton();
     }
   }