Skip to content

Commit 0e9cc65

Browse files
victorcg88victorcg88
committed
feat: implement horizontal layout for predictive suggestions
1 parent 194cdb4 commit 0e9cc65

File tree

5 files changed

+144
-77
lines changed

5 files changed

+144
-77
lines changed

‎src/components/predictive-layer/full-width-predictive.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<MaxDesktopWidthItem>
1313
<DesktopSearchboxAlign>
1414
<div class="x-layout-item">
15-
<div class="x-h-full x-py-16 x-pl-[17px]">
15+
<div class="x-h-full x-py-16">
1616
<div class="x-block">
1717
<BaseKeyboardNavigation
1818
class="x-flex x-items-start x-gap-24"
@@ -30,9 +30,11 @@
3030
>
3131
<div class="x-col-span-4 x-grid x-grid-cols-4 x-gap-32">
3232
<div v-if="showHistoryQueries" class="x-flex x-flex-col x-gap-4">
33-
<h1 v-if="!x.query.searchBox" class="x-title4 x-title4-sm x-uppercase">
34-
{{ $t('historyQueries.title') }}
35-
</h1>
33+
<div class="x-flex x-min-h-32 x-items-center">
34+
<h1 v-if="!x.query.searchBox" class="x-title4 x-title4-sm x-uppercase">
35+
{{ $t('historyQueries.title') }}
36+
</h1>
37+
</div>
3638

3739
<HistoryQueries
3840
:animation="suggestionsAnimation"

‎src/components/predictive-layer/predictive-history-queries.vue‎

Lines changed: 51 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="x-flex x-flex-col x-gap-4">
3-
<div v-if="!x.query.searchBox" class="x-flex x-items-center">
3+
<div v-if="!x.query.searchBox" class="x-flex x-min-h-32 x-items-center">
44
<h1 class="x-title4 x-title4-sm x-flex-1 x-uppercase">
55
{{ $t('historyQueries.title') }}
66
</h1>
@@ -10,48 +10,62 @@
1010
</ClearHistoryQueries>
1111
</div>
1212

13-
<HistoryQueries
14-
:animation="suggestionsAnimation"
15-
:max-items-to-render="x.query.searchBox ? 2 : 4"
16-
suggestion-item-class="x-w-full"
17-
class="-x-mr-2 x-flex x-flex-col x-gap-8 desktop:x-gap-4"
13+
<component
14+
:is="horizontalLayout ? SlidingPanel : 'div'"
15+
:show-buttons="false"
16+
:reset-on-content-change="false"
17+
button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
1818
>
19-
<template #suggestion="{ suggestion }">
20-
<HistoryQuery
21-
class="x-suggestion-group-lg desktop:x-suggestion-group-md hover:x-no-underline"
22-
:suggestion="suggestion"
23-
suggestion-class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
24-
>
25-
<template #default="{ query }">
26-
<HistoryIcon class="x-icon-lg desktop:x-icon-md" />
27-
<div class="x-group x-flex x-flex-col x-gap-2">
28-
<Highlight
29-
:text="suggestion.query"
30-
:highlight="query"
31-
class="group-hover:x-underline"
32-
/>
33-
<HistoryQueryFilters
34-
class="x-w-192 desktop:x-w-128"
35-
:filters-list="suggestion.selectedFilters"
36-
/>
37-
</div>
38-
</template>
19+
<HistoryQueries
20+
:animation="suggestionsAnimation"
21+
:max-items-to-render="horizontalLayout ? 5 : 2"
22+
class="x-gap-8 desktop:x-gap-4"
23+
:class="{ 'x-suggestions--horizontal': horizontalLayout }"
24+
>
25+
<template #suggestion="{ suggestion }">
26+
<HistoryQuery
27+
class="hover:x-no-underline"
28+
:class="{
29+
'x-suggestion-group-outlined': horizontalLayout,
30+
'x-suggestion-group-lg desktop:x-suggestion-group-md': !horizontalLayout,
31+
}"
32+
:suggestion="suggestion"
33+
:suggestion-class="`x-suggestion ${!horizontalLayout ? 'x-suggestion-lg desktop:x-suggestion-md' : ''}`"
34+
>
35+
<template #default="{ query }">
36+
<HistoryIcon class="x-icon-lg x-mb-4 desktop:x-icon-md desktop:x-mb-0" />
37+
<div class="x-flex x-flex-col x-gap-2">
38+
<Highlight
39+
:text="suggestion.query"
40+
:highlight="query"
41+
class="group-hover:x-no-underline"
42+
/>
43+
<HistoryQueryFilters
44+
class="x-w-192 desktop:x-w-128"
45+
:filters-list="suggestion.selectedFilters"
46+
/>
47+
</div>
48+
</template>
3949

40-
<template #remove-button-content>
41-
<span :aria-label="$t('historyQueries.removeLabel', { suggestion: suggestion.query })">
42-
<CrossTinyIcon class="x-icon-lg desktop:x-icon-md" />
43-
</span>
44-
</template>
45-
</HistoryQuery>
46-
</template>
47-
</HistoryQueries>
50+
<template #remove-button-content>
51+
<span
52+
:aria-label="$t('historyQueries.removeLabel', { suggestion: suggestion.query })"
53+
>
54+
<CrossTinyIcon class="x-icon-lg desktop:x-icon-md" />
55+
</span>
56+
</template>
57+
</HistoryQuery>
58+
</template>
59+
</HistoryQueries>
60+
</component>
4861
</div>
4962
</template>
5063
<script setup lang="ts">
5164
import {
5265
CrossTinyIcon,
5366
Highlight,
5467
HistoryIcon,
68+
SlidingPanel,
5569
StaggeredFadeAndSlide,
5670
TrashIcon,
5771
use$x,
@@ -61,10 +75,13 @@ import {
6175
HistoryQueries,
6276
HistoryQuery,
6377
} from '@empathyco/x-components/history-queries'
78+
import { computed } from 'vue'
6479
import { useDevice } from '../../composables/use-device.composable'
6580
import HistoryQueryFilters from '../history-query-filters.vue'
6681
6782
const suggestionsAnimation = StaggeredFadeAndSlide as any
6883
const { isTabletOrLess } = useDevice()
6984
const x = use$x()
85+
86+
const horizontalLayout = computed(() => isTabletOrLess.value && !x.query.searchBox)
7087
</script>

‎src/components/predictive-layer/predictive-next-queries.vue‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,57 @@
11
<template>
22
<div class="x-flex x-flex-col x-gap-4">
3-
<h1 class="x-title4 x-title4-sm x-py-8 x-uppercase desktop:x-p-0">
4-
{{ $t('nextQueries.title') }}
5-
</h1>
6-
<NextQueries
7-
:animation="animation"
8-
:max-items-to-render="3"
9-
class="x-flex x-flex-col x-gap-8 desktop:x-gap-4"
3+
<div class="x-flex x-min-h-32 x-items-center">
4+
<h1 class="x-title4 x-title4-sm x-py-8 x-uppercase desktop:x-p-0">
5+
{{ $t('nextQueries.title') }}
6+
</h1>
7+
</div>
8+
<component
9+
:is="horizontalLayout ? SlidingPanel : 'div'"
10+
:show-buttons="false"
11+
:reset-on-content-change="false"
12+
button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
1013
>
11-
<template #suggestion="{ suggestion }">
12-
<NextQuery
13-
class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
14-
:suggestion="suggestion"
15-
>
16-
<CuratedCheckIcon v-if="suggestion.isCurated" class="x-icon-lg desktop:x-icon-md" />
17-
<LightBulbOn v-else class="x-icon-lg desktop:x-icon-md" />
18-
<span>{{ suggestion.query }}</span>
19-
</NextQuery>
20-
</template>
21-
</NextQueries>
14+
<NextQueries
15+
:animation="animation"
16+
:max-items-to-render="horizontalLayout ? 5 : 3"
17+
class="x-flex x-flex-col x-gap-8 desktop:x-gap-4"
18+
:class="{ 'x-suggestions--horizontal': horizontalLayout }"
19+
>
20+
<template #suggestion="{ suggestion }">
21+
<NextQuery
22+
class="x-suggestion"
23+
:class="{
24+
'x-suggestion-outlined': horizontalLayout,
25+
'x-suggestion-lg desktop:x-suggestion-md': !horizontalLayout,
26+
}"
27+
:suggestion="suggestion"
28+
>
29+
<CuratedCheckIcon
30+
v-if="suggestion.isCurated"
31+
class="x-icon-lg x-mb-4 desktop:x-icon-md desktop:x-mb-0"
32+
/>
33+
<LightBulbOn v-else class="x-icon-lg x-mb-4 desktop:x-icon-md desktop:x-mb-0" />
34+
<span>{{ suggestion.query }}</span>
35+
</NextQuery>
36+
</template>
37+
</NextQueries>
38+
</component>
2239
</div>
2340
</template>
2441

2542
<script setup lang="ts">
2643
import type { AnimationProp } from '@empathyco/x-components'
27-
import { CuratedCheckIcon, LightBulbOn } from '@empathyco/x-components'
44+
import { CuratedCheckIcon, LightBulbOn, SlidingPanel, use$x } from '@empathyco/x-components'
2845
import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'
46+
import { computed } from 'vue'
47+
import { useDevice } from '../../composables/use-device.composable'
2948
3049
defineProps<{
3150
animation: typeof AnimationProp
3251
}>()
52+
53+
const { isTabletOrLess } = useDevice()
54+
const x = use$x()
55+
56+
const horizontalLayout = computed(() => isTabletOrLess.value && !x.query.searchBox)
3357
</script>
34-
<style lang="scss"></style>

‎src/components/predictive-layer/predictive-popular-searches.vue‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,53 @@
11
<template>
22
<div class="x-mt-8 x-flex x-flex-col x-gap-4 desktop:x-mt-0">
3-
<h1 class="x-title4 x-title4-sm x-uppercase">
4-
{{ $t('popularSearches.title') }}
5-
</h1>
6-
<PopularSearches
7-
:animation="animation"
8-
:max-items-to-render="4"
9-
class="x-flex x-flex-col x-gap-8 desktop:x-gap-4"
3+
<div class="x-flex x-min-h-32 x-items-center">
4+
<h1 class="x-title4 x-title4-sm x-uppercase">
5+
{{ $t('popularSearches.title') }}
6+
</h1>
7+
</div>
8+
<component
9+
:is="horizontalLayout ? SlidingPanel : 'div'"
10+
:show-buttons="false"
11+
:reset-on-content-change="false"
12+
button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
1013
>
11-
<template #suggestion="{ suggestion }">
12-
<PopularSearch
13-
class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
14-
:suggestion="suggestion"
15-
>
16-
<TrendingIcon class="x-icon-lg desktop:x-icon-md" />
17-
<span>{{ suggestion.query }}</span>
18-
</PopularSearch>
19-
</template>
20-
</PopularSearches>
14+
<PopularSearches
15+
:animation="animation"
16+
:max-items-to-render="horizontalLayout ? 5 : 4"
17+
class="x-gap-8 desktop:x-gap-4"
18+
:class="{ 'x-suggestions--horizontal': horizontalLayout }"
19+
>
20+
<template #suggestion="{ suggestion }">
21+
<PopularSearch
22+
class="x-suggestion"
23+
:class="{
24+
'x-suggestion-outlined x-gap-8': horizontalLayout,
25+
'x-suggestion-lg desktop:x-suggestion-md': !horizontalLayout,
26+
}"
27+
:suggestion="suggestion"
28+
>
29+
<TrendingIcon class="x-icon-lg x-mb-4 desktop:x-icon-md desktop:x-mb-0" />
30+
<span>{{ suggestion.query }}</span>
31+
</PopularSearch>
32+
</template>
33+
</PopularSearches>
34+
</component>
2135
</div>
2236
</template>
2337

2438
<script setup lang="ts">
2539
import type { AnimationProp } from '@empathyco/x-components'
26-
import { TrendingIcon } from '@empathyco/x-components'
40+
import { SlidingPanel, TrendingIcon, use$x } from '@empathyco/x-components'
2741
import { PopularSearch, PopularSearches } from '@empathyco/x-components/popular-searches'
42+
import { computed } from 'vue'
43+
import { useDevice } from '../../composables/use-device.composable'
2844
2945
defineProps<{
3046
animation: typeof AnimationProp
3147
}>()
48+
49+
const { isTabletOrLess } = useDevice()
50+
const x = use$x()
51+
52+
const horizontalLayout = computed(() => isTabletOrLess.value && !x.query.searchBox)
3253
</script>
33-
<style lang="scss"></style>

‎src/tailwind/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,9 @@
2424
.x-transform-style-3d {
2525
transform-style: preserve-3d;
2626
}
27+
28+
.x-suggestions--horizontal {
29+
flex-flow: row nowrap !important;
30+
align-items: center;
31+
}
2732
}

0 commit comments

Comments
 (0)