Skip to content

Commit

Permalink
chore: improve mobile responsiveness on environment selector (hoppsco…
Browse files Browse the repository at this point in the history
  • Loading branch information
liyasthomas authored Jun 2, 2023
1 parent 05e32ef commit abc7b4b
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@
class="bg-transparent border-b border-dividerLight select-wrapper"
>
<HoppButtonSecondary
v-if="selectedEnv.type !== 'NO_ENV_SELECTED'"
:label="selectedEnv.name"
class="flex-1 !justify-start pr-8 rounded-none"
/>
<HoppButtonSecondary
v-else
:label="`${t('environment.select')}`"
:icon="IconLayers"
:label="
mdAndLarger
? selectedEnv.type !== 'NO_ENV_SELECTED'
? selectedEnv.name
: `${t('environment.select')}`
: ''
"
class="flex-1 !justify-start pr-8 rounded-none"
/>
</span>
Expand Down Expand Up @@ -58,6 +59,7 @@
<HoppSmartItem
v-for="(gen, index) in myEnvironments"
:key="`gen-${index}`"
:icon="IconLayers"
:label="gen.name"
:info-icon="index === selectedEnv.index ? IconCheck : undefined"
:active-info-icon="index === selectedEnv.index"
Expand Down Expand Up @@ -99,6 +101,7 @@
<HoppSmartItem
v-for="(gen, index) in teamEnvironmentList"
:key="`gen-team-${index}`"
:icon="IconLayers"
:label="gen.environment.name"
:info-icon="
gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
Expand Down Expand Up @@ -148,6 +151,7 @@
<script lang="ts" setup>
import { computed, ref, watch } from "vue"
import IconCheck from "~icons/lucide/check"
import IconLayers from "~icons/lucide/layers"
import { TippyComponent } from "vue-tippy"
import { useI18n } from "~/composables/i18n"
import { GQLError } from "~/helpers/backend/GQLClient"
Expand All @@ -160,6 +164,10 @@ import {
import { workspaceStatus$ } from "~/newstore/workspace"
import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
import { useColorMode } from "@composables/theming"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
const t = useI18n()
Expand Down
9 changes: 6 additions & 3 deletions packages/hoppscotch-ui/src/components/smart/Windows.vue
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
</div>
</div>

<div v-if="hasActions" class="w-64">
<div v-if="hasActions" :class="mdAndLarger ? 'w-64' : 'w-16'">
<slot name="actions" />
</div>

Expand All @@ -115,7 +115,7 @@
}"
:style="[
`--thumb-width: ${scrollThumb.width}px`,
`width: calc(100% - ${hasActions ? '19rem' : '3rem'})`,
`width: calc(100% - ${hasActions ? mdAndLarger ? '19rem' : '7rem' : '3rem'})`,
]"
id="myRange"
/>
Expand Down Expand Up @@ -144,7 +144,7 @@ import {
nextTick,
useSlots,
} from "vue"
import { useElementSize } from "@vueuse/core"
import { breakpointsTailwind, useBreakpoints, useElementSize } from "@vueuse/core"
import type { Slot } from "vue"
import draggable from "vuedraggable-es"
import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
Expand All @@ -167,6 +167,9 @@ export type TabProvider = {
removeTabEntry: (tabID: string) => void
}
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
const props = withDefaults(
Expand Down

0 comments on commit abc7b4b

Please sign in to comment.