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