Skip to content

Commit 13289eb

Browse files
hmbanan666hmbanan666
authored
chore: some rework (#137)
* chore: some rework * chore: cart button, rework
1 parent 6f30ee7 commit 13289eb

10 files changed

Lines changed: 101 additions & 27 deletions

File tree

‎apps/storefront-telegram/app/assets/css/styles.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,21 @@
110110

111111
html, body {
112112
background: var(--tg-theme-secondary-bg-color, transparent) !important;
113+
-ms-overflow-style: none; /* IE and Edge */
114+
scrollbar-width: none; /* Firefox */
113115
}
114116

115-
::-webkit-scrollbar {
117+
body::-webkit-scrollbar {
118+
display: none;
119+
width: 0;
120+
}
121+
122+
.hide-scroll {
123+
-ms-overflow-style: none; /* IE and Edge */
124+
scrollbar-width: none; /* Firefox */
125+
}
126+
127+
.hide-scroll::-webkit-scrollbar {
116128
display: none;
117129
width: 0;
118130
}

‎apps/storefront-telegram/app/components/Navigation.vue‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,44 @@
11
<template>
2-
<nav class="z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-25 tg-bg-bottom-bar border-t border-default rounded-t-lg motion-preset-slide-up">
3-
<div class="max-w-[28rem] mx-auto">
4-
<div class="mt-3 grid grid-cols-3">
2+
<div v-if="clientStore.id" class="z-50 touch-pan-x sticky inset-0 h-38">
3+
<div class="w-full h-14 px-4 py-0 flex flex-row gap-2 items-start">
4+
<CartButton v-if="isCartButtonShown" />
5+
6+
<UButton
7+
variant="soft"
8+
color="neutral"
9+
size="xl"
10+
icon="i-lucide-logs"
11+
block
12+
:ui="{
13+
base: 'size-12 aspect-square',
14+
}"
15+
/>
16+
</div>
17+
18+
<nav
19+
v-if="isNavigationShown"
20+
class="w-full h-24 tg-bg-bottom-bar border-t border-default rounded-t-lg motion-preset-slide-up"
21+
>
22+
<div class="mt-3 max-w-[28rem] mx-auto grid grid-cols-3">
523
<NavigationButton
624
v-for="route in mainRoutes"
725
:key="route.path"
826
:route="route"
927
/>
1028
</div>
11-
</div>
12-
</nav>
29+
</nav>
30+
</div>
1331
</template>
1432

1533
<script setup lang="ts">
1634
import type { NavigationRoute } from '#shared/types/index'
1735
36+
const router = useRouter()
1837
const { t } = useI18n()
38+
const { isNavigationShown } = useCatalog()
39+
const clientStore = useClientStore()
40+
41+
const isCartButtonShown = computed(() => router.currentRoute.value.path === '/')
1942
2043
const mainRoutes = computed<NavigationRoute[]>(() => [
2144
{

‎apps/storefront-telegram/app/components/cart/Button.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<UButton
3+
block
4+
variant="solid"
5+
color="secondary"
6+
:ui="{
7+
base: 'px-3 py-2 h-12',
8+
}"
9+
>
10+
<div class="w-full flex flex-row items-center justify-between text-base">
11+
<div class="flex flex-row gap-2 items-center">
12+
<UIcon name="i-lucide-shopping-basket" class="size-6" />
13+
<p>{{ $t('app.cart.title') }}</p>
14+
</div>
15+
<p>
16+
1850 ₽
17+
</p>
18+
</div>
19+
</UButton>
20+
</template>

‎apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="z-40 sticky -top-0.5 h-fit tg-safe-area tg-bg-secondary">
3-
<div class="max-w-full overflow-x-scroll snap-x tg-content-safe-area-top">
3+
<div class="max-w-full overflow-x-scroll hide-scroll snap-x tg-content-safe-area-top">
44
<div class="py-1 w-max flex flex-row flex-wrap gap-1">
55
<div
66
v-for="category in menuStore.menu?.categories"

‎apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,14 @@
7474

7575
<script setup lang="ts">
7676
const { vibrate } = useFeedback()
77+
const { isNavigationShown } = useCatalog()
7778
7879
const isDrawerOpened = ref(false)
7980
81+
watch(isDrawerOpened, () => {
82+
isNavigationShown.value = !isDrawerOpened.value
83+
})
84+
8085
function handleClick() {
8186
vibrate()
8287
isDrawerOpened.value = !isDrawerOpened.value

‎apps/storefront-telegram/app/components/client/PointsCard.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,16 @@
121121
<script setup lang="ts">
122122
const { vibrate } = useFeedback()
123123
const { x, y } = useGyroscope()
124+
const { isNavigationShown } = useCatalog()
124125
125126
const clientStore = useClientStore()
126127
127128
const isDrawerOpened = ref(false)
128129
130+
watch(isDrawerOpened, () => {
131+
isNavigationShown.value = !isDrawerOpened.value
132+
})
133+
129134
function handleCardClick() {
130135
vibrate()
131136
isDrawerOpened.value = !isDrawerOpened.value

‎apps/storefront-telegram/app/composables/useCatalog.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
function _useCatalog() {
22
const visibleCategory = ref<string | null>(null)
3+
const isNavigationShown = ref(true)
34

45
const observerOptions = { rootMargin: '0px 0px -150px 0px' }
56

@@ -13,6 +14,7 @@ function _useCatalog() {
1314
return {
1415
visibleCategory,
1516
observerOptions,
17+
isNavigationShown,
1618
}
1719
}
1820

‎apps/storefront-telegram/app/layouts/default.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,5 @@
66
</main>
77

88
<CitySelector />
9-
<Navigation v-if="clientStore.id" />
9+
<Navigation />
1010
</template>
11-
12-
<script setup lang="ts">
13-
const clientStore = useClientStore()
14-
</script>

‎apps/storefront-telegram/app/pages/client/orders.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
22
<PageContainer>
3-
<h1>Еще рано сюда заходить</h1>
3+
<h1 class="text-2xl/5 font-bold tracking-tight">
4+
Мои заказы
5+
</h1>
6+
7+
<p>Здесь отображены все ваши заказы за последние 180 дней.</p>
8+
<p>Вы еще ничего не заказывали. Нужно это исправить.</p>
49
</PageContainer>
510
</template>

‎apps/storefront-telegram/app/pages/menu.vue‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
<template>
22
<PageContainer>
3-
<h1 class="text-2xl/5 font-bold tracking-tight">
4-
Меню
5-
</h1>
6-
7-
<div class="flex flex-col gap-1">
3+
<div class="flex flex-col gap-2">
84
<UButton
95
v-for="item in items"
106
:key="item.label"
117
active
128
size="xl"
139
color="neutral"
1410
variant="ghost"
15-
class="px-0 text-xl/5 font-semibold"
11+
class="px-0 pt-0 text-xl/5 font-semibold"
1612
:label="item.label"
1713
:to="item.to"
1814
@click="item.onClick"
@@ -31,16 +27,26 @@
3127
<div class="flex flex-col gap-1">
3228
<UButton
3329
:to="formattedToCall"
34-
color="neutral"
30+
external
3531
variant="ghost"
36-
class="px-0 text-lg font-medium"
37-
>
38-
{{ formatted }}
39-
</UButton>
32+
color="primary"
33+
class="p-0 text-lg font-medium"
34+
:label="formatted"
35+
/>
4036
</div>
4137

4238
<div class="flex flex-row gap-2">
43-
<UIcon name="simple-icons:vk" class="size-8" />
39+
<UButton
40+
variant="ghost"
41+
to="https://vk.com/sushiloveru"
42+
color="neutral"
43+
size="xl"
44+
icon="simple-icons:vk"
45+
class="p-0"
46+
:ui="{
47+
leadingIcon: 'size-8',
48+
}"
49+
/>
4450
</div>
4551
</PageContainer>
4652
</template>
@@ -51,9 +57,9 @@ import { parsePhoneNumberWithError } from 'libphonenumber-js'
5157
const { vibrate } = useFeedback()
5258
const channelStore = useChannelStore()
5359
54-
const tel = '79999999999'
60+
const tel = '79959999999'
5561
const formatted = parsePhoneNumberWithError(tel, 'RU').format('INTERNATIONAL')
56-
const formattedToCall = parsePhoneNumberWithError(tel, 'RU').format('RFC3966')
62+
const formattedToCall = `tel:+${tel}`
5763
5864
const items = ref([
5965
{

0 commit comments

Comments
 (0)