front/hadith_ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ریسپانسیو

Browse Source
This commit is contained in:
Baghi 2025-05-06 10:29:18 +03:30
parent dc2d5cc460
commit 5f6aeb8d47
1 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
pages/haditha/search/index.vue
View File

@ -167,19 +167,20 @@ const backgroundImageStyle = computed(() => {
// });
let optimizedImageUrl = "/img/haditha/background.webp";
if (!showNoData.value) {
if (showNoData.value) {
// optimizedImageUrl = img("/img/haditha/sub-header-bgi.webp", {
// quality: 80,
// });
optimizedImageUrl = "/img/haditha/sub-header-bgi.webp";
return {
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
backgroundImage: `url(${optimizedImageUrl})`,
// backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
};
}
return {
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
backgroundImage: `url(${optimizedImageUrl})`,
};
});
const searchButtonIcon = computed(() => {
@ -229,7 +230,9 @@ const sendQuery = async (payload = {}) => {
);
// if (route.query.f_aik?.length) url += `&f_aik=${route.query.f_aik}`;
}
} else url = url.replace("@q=none", "q=none");
console.info(url);
return await httpService.postRequest(url, payload).then((res) => {
total.value = res.hits.total.value ?? 0;
@ -247,8 +250,11 @@ const sendQuery = async (payload = {}) => {
// Server-side initial load
const { data: loadedItems } = await useAsyncData("search", () => sendQuery(), {
transform: (data) => data.hits.hits,
getCachedData: (key) => {
return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
},
});
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
const onBeforeSendQuery = (from) => {
if (loading.value) return;
@ -265,12 +271,11 @@ const onBeforeSendQuery = (from) => {
if (searchTerm.value?.length) {
sendQuery().then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
loading.value = false;
});
} else {
searchTerm.value = "";
loading.value = false;
loadedItems.value = [];
showNoData.value = false;
loading.value = false;
@ -305,17 +310,19 @@ const onSearchButtonClick = () => {
if (loading.value) return;
loading.value = true;
sendQuery().then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
// showclearButton.value = true;
if (searchTerm.value?.length) {
searchTerm.value = "";
loadedItems.value = [];
showNoData.value = false;
loading.value = false;
});
};
const resetForm = () => {
searchTerm.value = "";
loadedItems.value = [];
showNoData.value = false;
loading.value = false;
} else {
sendQuery().then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = Boolean(loadedItems.value?.length);
loading.value = false;
});
}
};
// وقتی کاربر کلیدی فشار میدهد
@ -337,7 +344,7 @@ const setType = (type: string) => {
offset.value = 0;
sendQuery().then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
});
};
// const setKey = (type: string) => {
@ -378,7 +385,7 @@ const onTypeSelectChanged = (value: string) => {
sendQuery().then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
});
};
@ -432,7 +439,7 @@ const prepareSynonym = () => {
const onUpdateSwitch = () => {
sendQuery(prepareSynonym()).then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
});
};
const onUpdateSubTitle = (subTitle) => {
@ -440,7 +447,7 @@ const onUpdateSubTitle = (subTitle) => {
sendQuery(prepareSynonym()).then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
});
};
const onAddNewTitle = (subTitles) => {
@ -452,7 +459,7 @@ const onAddNewTitle = (subTitles) => {
sendQuery(prepareSynonym()).then((res) => {
loadedItems.value = res.hits.hits;
showNoData.value = loadedItems.value?.length == 0;
showNoData.value = Boolean(loadedItems.value?.length);
});
};
// #endregion methods
@ -476,19 +483,19 @@ const SearchList = defineAsyncComponent(
<div class="background-image h-full" :style="backgroundImageStyle">
<navigation-menu></navigation-menu>
<div class="logo-container pt-0 xl:pt-18">
<div class="logo-container pt-0 xl:pt-19">
<div
class="search-box-container flex justify-center"
:class="{ 'pb-0': route.name == 'hadithaSearch' }"
:class="[route.name == 'hadithaSearch' ? 'py-6' : 'pb-16']"
>
<div class="haditha-search-root-wrapper search-page">
<div class="haditha-search-root-wrapper search-page flex flex-col md:flex-row">
<div
class="haditha-search-root"
class="haditha-search-root grow-1"
:class="{ 'no-backdrop': route.query.f_aik?.length }"
>
<!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
<!-- v-if="route.query.f_aik?.length" -->
<div v-if="false" class="prev-search-item flex items-center">
<div v-if="route.query.f_aik?.length" class="prev-search-item flex items-center">
<!-- <span class="total">۴۷ مشابه </span> -->
<span class="text me-auto">
{{ route.query.f_aik }}
@ -535,26 +542,20 @@ const SearchList = defineAsyncComponent(
</div>
<!-- 'similar-mode': route.query.f_aik?.length, -->
<UButton
v-if="searchTerm.length"
class="my-trailing-button close-mode"
@click.prevent="resetForm"
icon="i-lucide-x"
>
<!-- <UIcon name="i-lucide-search" /> -->
</UButton>
<UButton
v-else
class="my-trailing-button"
icon="i-haditha-search"
:class="{
'close-mode': searchTerm.length,
}"
@click.prevent="onSearchButtonClick"
:icon="searchButtonIcon"
>
<!-- @click.prevent="onSearchButtonClick" -->
<!-- <UIcon name="i-lucide-search" /> -->
</UButton>
<!-- </client-only> -->
</div>
<div
class="search-filter flex items-center my-3 justify-between"
v-if="!showNoData"
class="search-filter flex items-center justify-between mt-5 md:mt-0 md:mr-16"
v-if="showNoData"
>
<div class="flex items-center space-x-2">
<!-- #region معنایی -->
@ -782,7 +783,7 @@ const SearchList = defineAsyncComponent(
</div>
</div>
<div
v-if="showNoData"
v-if="!showNoData"
class="flex justify-center flex-col items-center mt-10"
>
<img
@ -799,7 +800,7 @@ const SearchList = defineAsyncComponent(
</div>
<div
v-show="!showNoData"
v-show="showNoData"
class="search-box-container pb-0 bg-white flex justify-center"
>
<div class="search-list-contianer">
@ -826,6 +827,11 @@ const SearchList = defineAsyncComponent(
<p class="no-data-text">"نتیجه‌ای یافت نشد!</p>
</no-data> -->
</div>
<!-- <the-content-loading
v-show="loading"
class="absolute-positioning"
></the-content-loading> -->
</div>
</div>
</div>
@ -869,14 +875,9 @@ const SearchList = defineAsyncComponent(
}
}
.search-box-container {
/* .search-box-container {
padding-top: 0.7em;
padding-bottom: 4em; /*64px */
&.pb-0 {
padding-bottom: 0 !important;
}
}
} */
.search-list-contianer {
position: relative;
@ -913,7 +914,7 @@ const SearchList = defineAsyncComponent(
}
.haditha-search-root-wrapper {
max-width: 656px;
max-width: 1200px;
width: 100%;
margin: 0 1em;
@ -1072,7 +1073,7 @@ const SearchList = defineAsyncComponent(
.search-filter {
.filter-item {
/* width: 81px; */
height: 40px;
height: 56px;
border-radius: 12px;
border-width: 0.3px;
padding-top: 8px;