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/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -249,6 +249,11 @@
  --upper-primary-sticky-fold: 4.125rem;
  --upper-secondary-sticky-fold: 6.125rem;
  --upper-tertiary-sticky-fold: 8.188rem;
+  --upper-mobile-primary-sticky-fold: 6.625rem;
+  --upper-mobile-secondary-sticky-fold: 8.625rem;
+  --upper-mobile-tertiary-sticky-fold: 10.625rem;
+  --upper-mobile-raw-sticky-fold: 10.675rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
  --lower-primary-sticky-fold: 3rem;
  --lower-secondary-sticky-fold: 5rem;
  --sidebar-primary-sticky-fold: 2rem;
@@ -261,6 +266,11 @@
  --upper-primary-sticky-fold: 4.375rem;
  --upper-secondary-sticky-fold: 6.625rem;
  --upper-tertiary-sticky-fold: 8.813rem;
+  --upper-mobile-primary-sticky-fold: 7.125rem;
+  --upper-mobile-secondary-sticky-fold: 9.375rem;
+  --upper-mobile-tertiary-sticky-fold: 10.875rem;
+  --upper-mobile-raw-sticky-fold: 11.695rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 8.925rem;
  --lower-primary-sticky-fold: 3.25rem;
  --lower-secondary-sticky-fold: 5.5rem;
  --sidebar-primary-sticky-fold: 2.25rem;
@@ -273,6 +283,11 @@
  --upper-primary-sticky-fold: 4.625rem;
  --upper-secondary-sticky-fold: 7.125rem;
  --upper-tertiary-sticky-fold: 9.5rem;
+  --upper-mobile-primary-sticky-fold: 7.625rem;
+  --upper-mobile-secondary-sticky-fold: 10.125rem;
+  --upper-mobile-tertiary-sticky-fold: 11.375rem;
+  --upper-mobile-raw-sticky-fold: 12.695rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 9.7rem;
  --lower-primary-sticky-fold: 3.5rem;
  --lower-secondary-sticky-fold: 6rem;
  --sidebar-primary-sticky-fold: 2.5rem;
--- 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") }}
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -4,7 +4,10 @@
      <Pane v-if="!ZEN_MODE" style="height: auto">
        <AppHeader />
      </Pane>
-      <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
+      <Pane
+        :class="spacerClass"
+        class="flex flex-1 hide-scrollbar !overflow-auto md:mb-0"
+      >
        <Splitpanes
          class="no-splitter"
          :dbl-click-splitter="false"
@@ -12,7 +15,7 @@
        >
          <Pane
            style="width: auto; height: auto"
-            class="hide-scrollbar !overflow-auto flex flex-col"
+            class="hide-scrollbar !overflow-auto hidden md:flex md:flex-col"
          >
            <AppSidenav />
          </Pane>
@@ -31,7 +34,15 @@
          </Pane>
        </Splitpanes>
      </Pane>
-      <Pane style="height: auto">
+
+      <Pane
+        style="height: auto"
+        class="hide-scrollbar !overflow-auto flex flex-col md:hidden block fixed inset-x-0 bottom-0 z-10"
+      >
+        <AppSidenav />
+        <AppFooter />
+      </Pane>
+      <Pane style="height: auto" class="hidden md:inline-block">
        <AppFooter />
      </Pane>
    </Splitpanes>
@@ -41,6 +52,7 @@
 <script lang="ts">
 import {
  defineComponent,
+  computed,
  onBeforeMount,
  useContext,
  useRouter,
@@ -108,6 +120,12 @@ function updateThemes() {
  const bgColor = useSetting("BG_COLOR")
  const fontSize = useSetting("FONT_SIZE")

+  const spacerClass = computed(() => {
+    if (fontSize.value === "small") return "spacer-small"
+    if (fontSize.value === "large") return "spacer-large"
+    return "spacer-medium"
+  })
+
  // Initially apply
  onBeforeMount(() => {
    document.documentElement.setAttribute("data-accent", themeColor.value)
@@ -123,6 +141,10 @@ function updateThemes() {
  watch(fontSize, () =>
    document.documentElement.setAttribute("data-font-size", fontSize.value)
  )
+
+  return {
+    spacerClass,
+  }
 }

 function defineJumpActions() {
@@ -170,7 +192,7 @@ export default defineComponent({

    defineJumpActions()

-    updateThemes()
+    const { spacerClass } = updateThemes()

    setupSentry()

@@ -179,6 +201,7 @@ export default defineComponent({

    return {
      mdAndLarger,
+      spacerClass,
      ZEN_MODE: useSetting("ZEN_MODE"),
    }
  },
@@ -236,3 +259,31 @@ export default defineComponent({
  },
 })
 </script>
+
+<style scoped>
+.spacer-small {
+  margin-bottom: 6.1rem;
+}
+
+.spacer-medium {
+  margin-bottom: 6.9rem;
+}
+
+.spacer-large {
+  margin-bottom: 7.8rem;
+}
+
+@media screen and (min-width: 768px) {
+  .spacer-small {
+    margin-bottom: 0rem;
+  }
+
+  .spacer-medium {
+    margin-bottom: 0rem;
+  }
+
+  .spacer-large {
+    margin-bottom: 0rem;
+  }
+}
+</style>
--- a/packages/hoppscotch-app/windi.config.js
+++ b/packages/hoppscotch-app/windi.config.js
@@ -10,6 +10,14 @@ export default defineConfig({
        upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
        upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
        upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
+        upperMobileSecondaryStickyFold:
+          "var(--upper-mobile-secondary-sticky-fold)",
+        upperMobileTertiaryStickyFold:
+          "var(--upper-mobile-tertiary-sticky-fold)",
+        upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)",
+        upperMobileRawTertiaryStickyFold:
+          "var(--upper-mobile-raw-tertiary-sticky-fold)",
        lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
        lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
        sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",