feat(spa): correct radius for floating panel, small ui fixes
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user