refactor: improve the mobile layout. (#2153)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
2022-03-21 07:45:10 +05:30
parent 376303dd5d
commit d4540a56b9
16 changed files with 118 additions and 56 deletions
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-primary">
    <div class="flex justify-between">
      <div class="flex">
        <ButtonSecondary
@@ -166,7 +166,7 @@
          v-tippy="{ theme: 'tooltip' }"
          :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
          svg="columns"
-          class="transform"
+          class="transform hidden sm:inline"
          :class="{ 'rotate-90': !COLUMN_LAYOUT }"
          @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
        />
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -71,6 +71,7 @@ const primaryNavigation = [
  @apply flex flex-col flex-1;
  @apply items-center;
  @apply justify-center;
+  @apply bg-primary;
  @apply hover:(bg-primaryDark text-secondaryDark);
  @apply focus-visible:text-secondaryDark;

--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -1,12 +1,12 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
-          {{ $t("authorization.type") }}
-        </label>
+        <label class="font-semibold text-secondaryLight">{{
+          $t("authorization.type")
+        }}</label>
        <tippy
          ref="authTypeOptions"
          interactive
@@ -107,14 +107,13 @@
          @change="setExclude('auth', !$event)"
        >
          {{ $t("authorization.include_in_url") }}
-        </SmartCheckbox> -->
+        </SmartCheckbox>-->
        <SmartCheckbox
          :on="authActive"
          class="px-2"
          @change="authActive = !authActive"
+          >{{ $t("state.enabled") }}</SmartCheckbox
        >
-          {{ $t("state.enabled") }}
-        </SmartCheckbox>
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          to="https://docs.hoppscotch.io/features/authorization"
@@ -140,9 +139,7 @@
        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
        :alt="`${$t('empty.authorization')}`"
      />
-      <span class="pb-4 text-center">
-        {{ $t("empty.authorization") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.authorization") }}</span>
      <ButtonSecondary
        outline
        :label="$t('app.documentation')"
@@ -188,9 +185,9 @@
            <SmartEnvInput v-model="apiValue" placeholder="Value" />
          </div>
          <div class="flex items-center border-b border-dividerLight">
-            <label class="ml-4 text-secondaryLight">
-              {{ $t("authorization.pass_key_by") }}
-            </label>
+            <label class="ml-4 text-secondaryLight">{{
+              $t("authorization.pass_key_by")
+            }}</label>
            <tippy
              ref="addToOptions"
              interactive
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <span class="flex items-center">
        <label class="font-semibold text-secondaryLight">
@@ -66,9 +66,7 @@
        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
        :alt="`${$t('empty.body')}`"
      />
-      <span class="pb-4 text-center">
-        {{ $t("empty.body") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
      <ButtonSecondary
        outline
        :label="`${$t('app.documentation')}`"
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
    >
      <label class="font-semibold text-secondaryLight">
        {{ $t("request.body") }}
@@ -50,9 +50,8 @@
          <SmartFileChip
            v-for="(file, fileIndex) in param.value"
            :key="`param-${index}-file-${fileIndex}`"
+            >{{ file.name }}</SmartFileChip
          >
-            {{ file.name }}
-          </SmartFileChip>
        </div>
      </div>
      <span v-else class="flex flex-1">
@@ -130,9 +129,7 @@
        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
        :alt="`${$t('empty.body')}`"
      />
-      <span class="pb-4 text-center">
-        {{ $t("empty.body") }}
-      </span>
+      <span class="pb-4 text-center">{{ $t("empty.body") }}</span>
      <ButtonSecondary
        :label="`${$t('add.new')}`"
        filled
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
-        {{ t("request.header_list") }}
-      </label>
+      <label class="font-semibold text-secondaryLight">{{
+        t("request.header_list")
+      }}</label>
      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
@@ -127,9 +127,7 @@
          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
          :alt="`${t('empty.headers')}`"
        />
-        <span class="pb-4 text-center">
-          {{ t("empty.headers") }}
-        </span>
+        <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
        <ButtonSecondary
          filled
          :label="`${t('add.new')}`"
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <label class="font-semibold text-secondaryLight">
        {{ t("request.parameter_list") }}
@@ -115,9 +115,7 @@
          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
          :alt="`${t('empty.parameters')}`"
        />
-        <span class="pb-4 text-center">
-          {{ t("empty.parameters") }}
-        </span>
+        <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
        <ButtonSecondary
          :label="`${t('add.new')}`"
          svg="plus"
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
-        {{ t("preRequest.javascript_code") }}
-      </label>
+      <label class="font-semibold text-secondaryLight">{{
+        t("preRequest.javascript_code")
+      }}</label>
      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
    >
      <label class="font-semibold text-secondaryLight">
        {{ t("request.raw_body") }}
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar"
  >
    <div
      class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"
@@ -48,7 +48,8 @@
        />
      </div>
    </div>
-    <div class="flex">
+
+    <div class="flex mt-2 sm:mt-0">
      <ButtonPrimary
        id="send"
        class="flex-1 rounded-r-none min-w-20"
@@ -117,8 +118,8 @@
        </tippy>
      </span>
      <ButtonSecondary
-        class="ml-2 rounded rounded-r-none"
-        :label="mdAndLarger && COLUMN_LAYOUT ? `${t('request.save')}` : ''"
+        class="flex-1 ml-2 rounded rounded-r-none"
+        :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
        filled
        svg="save"
        @click.native="saveRequest()"
@@ -207,7 +208,6 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import {
  updateRESTResponse,
  restEndpoint$,
@@ -542,7 +542,4 @@ const isCustomMethod = computed(() => {
 const requestName = useRESTRequestName()

 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const mdAndLarger = breakpoints.greater("md")
 </script>
--- a/packages/hoppscotch-app/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/http/RequestOptions.vue
@@ -1,5 +1,7 @@
 <template>
-  <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+  <SmartTabs
+    styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+  >
    <SmartTab
      :id="'params'"
      :label="`${$t('tab.parameters')}`"
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <label class="font-semibold text-secondaryLight">
        {{ t("test.javascript_code") }}
--- a/packages/hoppscotch-app/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileRawStickyFold sm:top-upperMobileRawTertiaryStickyFold"
    >
      <label class="font-semibold text-secondaryLight">
        {{ t("request.body") }}