feat(spa): correct radius for floating panel, small ui fixes
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
Фильтры
|
Фильтры
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="mt-5 px-5 bg-base-200">
|
<main class="mt-5 px-5 pt-5 bg-base-200">
|
||||||
<div
|
<div
|
||||||
v-if="filtersStore.draft?.rules && Object.keys(filtersStore.draft.rules).length > 0"
|
v-if="filtersStore.draft?.rules && Object.keys(filtersStore.draft.rules).length > 0"
|
||||||
v-for="(filter, filterId) in filtersStore.draft.rules"
|
v-for="(filter, filterId) in filtersStore.draft.rules"
|
||||||
@@ -24,11 +24,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {nextTick, onMounted, onUnmounted} from "vue";
|
import {nextTick, onMounted} from "vue";
|
||||||
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
|
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
|
||||||
import ProductPrice from "@/components/ProductFilters/Components/ProductPrice.vue";
|
import ProductPrice from "@/components/ProductFilters/Components/ProductPrice.vue";
|
||||||
import ForMainPage from "@/components/ProductFilters/Components/ForMainPage.vue";
|
import ForMainPage from "@/components/ProductFilters/Components/ForMainPage.vue";
|
||||||
@@ -73,22 +90,6 @@ const resetFilters = async () => {
|
|||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
console.debug('Filters: OnMounted');
|
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) {
|
if (filtersStore.applied?.rules) {
|
||||||
console.debug('Filters: Found applied filters.');
|
console.debug('Filters: Found applied filters.');
|
||||||
@@ -98,11 +99,4 @@ onMounted(async () => {
|
|||||||
filtersStore.draft = await filtersStore.fetchFiltersForMainPage();
|
filtersStore.draft = await filtersStore.fetchFiltersForMainPage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
mainButton.hide();
|
|
||||||
secondaryButton.hide();
|
|
||||||
mainButton.offClick(applyFilters);
|
|
||||||
secondaryButton.offClick(resetFilters);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<div ref="goodsRef" class="pb-10">
|
<div ref="goodsRef" class="pb-10">
|
||||||
<CategoriesInline/>
|
<CategoriesInline/>
|
||||||
|
|
||||||
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: var(--tg-safe-area-inset-bottom);">
|
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);">
|
||||||
<div class="bg-base-300 flex justify-between p-2 rounded-xl shadow-md">
|
<div class="floating-panel bg-base-200 flex justify-between p-2 shadow-md">
|
||||||
<button @click="showFilters" class="btn mr-3">
|
<button @click="showFilters" class="btn mr-3">
|
||||||
<IconFunnel/>
|
<IconFunnel/>
|
||||||
</button>
|
</button>
|
||||||
@@ -100,3 +100,10 @@ onActivated(async () => {
|
|||||||
console.debug('Home: Activated Home');
|
console.debug('Home: Activated Home');
|
||||||
});
|
});
|
||||||
</script>
|
</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