Merge branch 'master' into fix/raw-input

assets/css/styles.scss

@@ -1,17 +1,3 @@
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.2s;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  opacity: 0;
-}
-
 $responsiveWidth: 768px;
 
 ::selection {
@@ -93,6 +79,20 @@ footer {
   }
 }
 
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  opacity: 0;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -111,31 +111,6 @@ footer {
   flex: 1;
 }
 
-.slide-in {
-  position: relative;
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    left: -16px;
-  }
-
-  100% {
-    opacity: 1;
-    left: 0px;
-  }
-}
-
-.logo {
-  font-size: 22px;
-
-  &:hover {
-    color: var(--ac-color);
-  }
-}
-
 .nav-first,
 .sticky-inner {
   display: flex;
@@ -161,7 +136,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  height: 100%;
 }
 
 .nav-second {
@@ -251,10 +225,6 @@ nav.secondary-nav {
   }
 }
 
-.footer {
-  flex-flow: column nowrap;
-}
-
 h1,
 h2,
 h3,
@@ -484,6 +454,60 @@ fieldset {
   border-radius: 16px;
   background-color: var(--bg-dark-color);
   transition: all 0.2s ease-in-out;
+
+  legend {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    color: var(--fg-color);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    * {
+      vertical-align: middle;
+    }
+
+    i {
+      margin-left: 8px;
+    }
+  }
+
+  &.blue legend {
+    color: #57b5f9;
+  }
+
+  &.gray legend {
+    color: #bcc2cd;
+  }
+
+  &.green legend {
+    color: #50fa7b;
+  }
+
+  &.cyan legend {
+    color: #8be9fd;
+  }
+
+  &.purple legend {
+    color: #bd93f9;
+  }
+
+  &.orange legend {
+    color: #ffb86c;
+  }
+
+  &.pink legend {
+    color: #ff79c6;
+  }
+
+  &.red legend {
+    color: #ff5555;
+  }
+
+  &.yellow legend {
+    color: #f1fa8c;
+  }
 }
 
 fieldset:target,
@@ -497,60 +521,6 @@ section:target {
   }
 }
 
-legend {
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-color);
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  * {
-    vertical-align: middle;
-  }
-
-  i {
-    margin-left: 8px;
-  }
-}
-
-fieldset.blue legend {
-  color: #57b5f9;
-}
-
-fieldset.gray legend {
-  color: #bcc2cd;
-}
-
-fieldset.green legend {
-  color: #50fa7b;
-}
-
-fieldset.cyan legend {
-  color: #8be9fd;
-}
-
-fieldset.purple legend {
-  color: #bd93f9;
-}
-
-fieldset.orange legend {
-  color: #ffb86c;
-}
-
-fieldset.pink legend {
-  color: #ff79c6;
-}
-
-fieldset.red legend {
-  color: #ff5555;
-}
-
-fieldset.yellow legend {
-  color: #f1fa8c;
-}
-
 input[type="file"],
 input[type="radio"],
 .hide-on-large-screen,

components/layout/footer.vue

@@ -60,6 +60,10 @@
 </template>
 
 <style scoped lang="scss">
+.footer {
+  flex-flow: column nowrap;
+}
+
 .footer-link {
   margin: 8px 16px;
   color: var(--fg-light-color);

components/layout/header.vue

@@ -257,6 +257,33 @@
   </header>
 </template>
 
+<style scoped lang="scss">
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    left: -16px;
+  }
+
+  100% {
+    opacity: 1;
+    left: 0px;
+  }
+}
+
+.slide-in {
+  position: relative;
+  animation: slideIn 0.2s forwards ease-in-out;
+}
+
+.logo {
+  font-size: 22px;
+
+  &:hover {
+    color: var(--ac-color);
+  }
+}
+</style>
+
 <script>
 import intializePwa from "../../assets/js/pwa"
 import { hasExtensionInstalled } from "../../functions/strategies/ExtensionStrategy"

pages/index.vue

@@ -1448,6 +1448,7 @@ export default {
       const getDefaultParams = contentType => {
         switch (contentType) {
           case "application/json":
+          case "application/vnd.api+json":
           case "application/hal+json":
             return "{}"
           case "application/xml":
@@ -1472,7 +1473,8 @@ export default {
       } else {
         if (
           this.responseType === "application/json" ||
-          this.responseType === "application/hal+json"
+          this.responseType === "application/hal+json" ||
+          this.responseType === "application/vnd.api+json"
         ) {
           this.responseBodyText = JSON.stringify(this.response.body, null, 2)
           this.responseBodyType = "json"
@@ -1541,6 +1543,7 @@ export default {
      */
     validContentTypes: () => [
       "application/json",
+      "application/vnd.api+json",
       "application/hal+json",
       "application/xml",
       "application/x-www-form-urlencoded",