feat(spa): correct radius for floating panel, small ui fixes

This commit is contained in:
2025-10-20 20:15:35 +03:00
parent ac24f0376b
commit 72ab842a95
2 changed files with 28 additions and 27 deletions

View File

@@ -5,7 +5,7 @@
Фильтры
</header>
<main class="mt-5 px-5 bg-base-200">
<main class="mt-5 px-5 pt-5 bg-base-200">
<div
v-if="filtersStore.draft?.rules && Object.keys(filtersStore.draft.rules).length > 0"
v-for="(filter, filterId) in filtersStore.draft.rules"
@@ -24,11 +24,28 @@
</div>
</main>
</div>
<div
class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
<button
class="btn btn-link w-full"
@click="resetFilters"
>
Сбросить фильтры
</button>
<button
class="btn btn-primary w-full"
@click="applyFilters"
>
Применить
</button>
</div>
</div>
</template>
<script setup>
import {nextTick, onMounted, onUnmounted} from "vue";
import {nextTick, onMounted} from "vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import ProductPrice from "@/components/ProductFilters/Components/ProductPrice.vue";
import ForMainPage from "@/components/ProductFilters/Components/ForMainPage.vue";
@@ -73,22 +90,6 @@ const resetFilters = async () => {
onMounted(async () => {
console.debug('Filters: OnMounted');
mainButton.setParams({
text: 'Применить',
is_active: true,
is_visible: true,
});
mainButton.show();
mainButton.onClick(applyFilters);
secondaryButton.setParams({
text: 'Сбросить фильтры',
is_active: true,
is_visible: true,
position: 'top',
});
secondaryButton.show();
secondaryButton.onClick(resetFilters);
if (filtersStore.applied?.rules) {
console.debug('Filters: Found applied filters.');
@@ -98,11 +99,4 @@ onMounted(async () => {
filtersStore.draft = await filtersStore.fetchFiltersForMainPage();
}
});
onUnmounted(() => {
mainButton.hide();
secondaryButton.hide();
mainButton.offClick(applyFilters);
secondaryButton.offClick(resetFilters);
});
</script>

View File

@@ -2,8 +2,8 @@
<div ref="goodsRef" class="pb-10">
<CategoriesInline/>
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: var(--tg-safe-area-inset-bottom);">
<div class="bg-base-300 flex justify-between p-2 rounded-xl shadow-md">
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);">
<div class="floating-panel bg-base-200 flex justify-between p-2 shadow-md">
<button @click="showFilters" class="btn mr-3">
<IconFunnel/>
</button>
@@ -100,3 +100,10 @@ onActivated(async () => {
console.debug('Home: Activated Home');
});
</script>
<style>
.floating-panel {
border-radius: var(--radius-field);
border: var(--border) solid var(--color-base-200);
}
</style>