Refactor
This commit is contained in:
mustafa-rezae
parent
30cad3040c
commit
612fc1cc25
|
|
@ -22,7 +22,9 @@ export default {
|
|||
},
|
||||
library: {
|
||||
list: "monir/book/volume/@field_collapsed/@offset/@limit/@q",
|
||||
show: "@appname/book/page/@page_start/@page_end/@vol_id",
|
||||
show: "@appname/book/page/@page_start/@page_len/@vol_id",
|
||||
prevNextHadith: "monir/nextpage/@index_key/@vol_id/@page_num/@step",
|
||||
getVolumeInfo: "public/get/byids/dhvolume",
|
||||
get: "public/get/byid/dhvolume/@vol_id",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 910 B After Width: | Height: | Size: 910 B |
|
Before Width: | Height: | Size: 304 B After Width: | Height: | Size: 304 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 566 B |
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 341 B |
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 341 B |
|
Before Width: | Height: | Size: 302 B After Width: | Height: | Size: 302 B |
|
Before Width: | Height: | Size: 441 B After Width: | Height: | Size: 441 B |
|
Before Width: | Height: | Size: 251 B After Width: | Height: | Size: 251 B |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 868 B After Width: | Height: | Size: 868 B |
|
Before Width: | Height: | Size: 915 B After Width: | Height: | Size: 915 B |
|
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 212 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 781 B After Width: | Height: | Size: 781 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 529 B After Width: | Height: | Size: 529 B |
|
Before Width: | Height: | Size: 203 B After Width: | Height: | Size: 203 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 681 B After Width: | Height: | Size: 681 B |
|
Before Width: | Height: | Size: 648 B After Width: | Height: | Size: 648 B |
|
Before Width: | Height: | Size: 631 B After Width: | Height: | Size: 631 B |
|
Before Width: | Height: | Size: 943 B After Width: | Height: | Size: 943 B |
|
Before Width: | Height: | Size: 625 B After Width: | Height: | Size: 625 B |
|
Before Width: | Height: | Size: 809 B After Width: | Height: | Size: 809 B |
|
Before Width: | Height: | Size: 823 B After Width: | Height: | Size: 823 B |
16
assets/haditha/images/font-icons/user-icon.svg
Normal file
16
assets/haditha/images/font-icons/user-icon.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.99984 8.21598C9.84079 8.21598 11.3332 6.7236 11.3332 4.88265C11.3332 3.0417 9.84079 1.54932 7.99984 1.54932C6.15889 1.54932 4.6665 3.0417 4.6665 4.88265C4.6665 6.7236 6.15889 8.21598 7.99984 8.21598Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.8061 10.7106L10.446 13.0707C10.3527 13.164 10.266 13.3373 10.246 13.464L10.1194 14.364C10.0727 14.6906 10.2994 14.9173 10.626 14.8706L11.526 14.744C11.6527 14.724 11.8327 14.6373 11.9194 14.544L14.2794 12.184C14.686 11.7773 14.8794 11.304 14.2794 10.704C13.686 10.1106 13.2127 10.304 12.8061 10.7106Z" stroke="url(#paint0_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.4663 11.0498C12.6663 11.7698 13.2263 12.3298 13.9463 12.5298" stroke="url(#paint1_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.27344 14.8825C2.27344 12.3025 4.84012 10.2158 8.00012 10.2158C8.69346 10.2158 9.3601 10.3158 9.9801 10.5025" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_67_3867" x1="14.6902" y1="10.3286" x2="9.81875" y2="10.4184" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D284FF"/>
|
||||
<stop offset="1" stop-color="#4D00FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_67_3867" x1="13.956" y1="11.0498" x2="12.3704" y2="11.079" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D284FF"/>
|
||||
<stop offset="1" stop-color="#4D00FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/haditha/images/khosro-panahi.png
Normal file
BIN
assets/haditha/images/khosro-panahi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
assets/haditha/images/library/cover-four.jpg
Normal file
BIN
assets/haditha/images/library/cover-four.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
assets/haditha/images/library/cover-three.jpg
Normal file
BIN
assets/haditha/images/library/cover-three.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
assets/haditha/images/library/cover-two.jpg
Normal file
BIN
assets/haditha/images/library/cover-two.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
assets/haditha/images/library/first-cover.jpg
Normal file
BIN
assets/haditha/images/library/first-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
assets/haditha/images/library/totally.jpg
Normal file
BIN
assets/haditha/images/library/totally.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
assets/haditha/images/library/totally.webp
Normal file
BIN
assets/haditha/images/library/totally.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 81 KiB |
BIN
assets/haditha/images/video/section-three-gif.mp4
Normal file
BIN
assets/haditha/images/video/section-three-gif.mp4
Normal file
Binary file not shown.
|
|
@ -16,9 +16,13 @@
|
|||
/* custom imports */
|
||||
@import "../../../../../assets/common/scss/_IRANSansX.scss";
|
||||
@import "../../../../../assets/common/scss/_takrim.scss";
|
||||
@import "../../../../../assets/common/scss/_vazir.scss";
|
||||
@import "../../../../../assets/common/scss/_estedad.scss";
|
||||
@import "../../../../../assets/common/scss/_sahel-single-font-weight.scss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "IRANSansX", "Public Sans", sans-serif;
|
||||
--font: vazir, sahel, estadad, IRANSansX, "Public Sans", sans-serif;
|
||||
--ar-font: Takrim;
|
||||
--breakpoint-sm: 360px;
|
||||
--breakpoint-md: 720px;
|
||||
--breakpoint-lg: 992px;
|
||||
|
|
@ -49,18 +53,23 @@ html {
|
|||
height: 100%;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
scroll-behavior: smooth;
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
scroll-behavior: smooth;
|
||||
|
||||
padding: 0 !important;
|
||||
margin: 0px !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
.haditha-system {
|
||||
.haditha-system,
|
||||
.hadith-system {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -68,7 +77,18 @@ html {
|
|||
.isolate {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.text__orange {
|
||||
padding: 0 3px;
|
||||
background-color: rgb(255, 250, 155);
|
||||
/* background-color: rgb(255, 223, 203); */
|
||||
}
|
||||
/* .iconify { */
|
||||
/* width: 1.72em; */
|
||||
/* height: 1.72em; */
|
||||
/* } */
|
||||
}
|
||||
|
||||
.firefox-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ccc #eee;
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ const state = reactive({
|
|||
// #region methods
|
||||
|
||||
const clearSimilar = () => {
|
||||
console.info("clearSimilar");
|
||||
// console.info("clearSimilar");
|
||||
};
|
||||
|
||||
// const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
|
||||
|
|
@ -418,7 +418,8 @@ onMounted(() => {
|
|||
|
||||
<!-- <client-only> -->
|
||||
<div class="search-input">
|
||||
<UInputMenu
|
||||
<!-- <UInputMenu -->
|
||||
<UInput
|
||||
class="w-full focus:placeholder-gray-800"
|
||||
:items="<any>Array.from(userSearchHistory)"
|
||||
v-model="searchTerm"
|
||||
|
|
@ -444,7 +445,7 @@ onMounted(() => {
|
|||
>
|
||||
<!-- @update:modelValue="onUpdateModel" -->
|
||||
<!-- @update:searchTerm="onUpdateModel" -->
|
||||
</UInputMenu>
|
||||
</UInput>
|
||||
</div>
|
||||
<UButton
|
||||
class="my-trailing-button"
|
||||
|
|
@ -726,7 +727,7 @@ onMounted(() => {
|
|||
padding: 5px 7px;
|
||||
background: #1b213266;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
|
|
@ -735,7 +736,7 @@ onMounted(() => {
|
|||
color: #ffffff;
|
||||
}
|
||||
.text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
|
|
@ -823,7 +824,7 @@ onMounted(() => {
|
|||
border: 0.3px solid #e0e0e0;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -846,7 +847,7 @@ onMounted(() => {
|
|||
border: 0.3px solid #e0e0e0;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
color: #8a92a8;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
|
|
@ -904,7 +905,7 @@ onMounted(() => {
|
|||
|
||||
.synonymItem {
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
|
|
@ -928,7 +929,7 @@ onMounted(() => {
|
|||
border: 0.3px solid #d9d9d9;
|
||||
background: #f0f1f4;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const goToLibraryShow = (item) => {
|
|||
<UCard
|
||||
v-if="props.list?.length"
|
||||
v-for="(item, index) in props.list"
|
||||
class="mx-auto"
|
||||
class="mx-auto"
|
||||
:key="index"
|
||||
variant="solid"
|
||||
:ui="{
|
||||
|
|
@ -53,11 +53,6 @@ const goToLibraryShow = (item) => {
|
|||
id: item?._source?.id,
|
||||
slug: item?._source?.title,
|
||||
},
|
||||
query: {
|
||||
page_first: item._source.page_first,
|
||||
page_last: item._source.page_last,
|
||||
page_count: item._source.page_count,
|
||||
},
|
||||
}"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
|
|
@ -69,8 +64,9 @@ const goToLibraryShow = (item) => {
|
|||
fit="auto"
|
||||
quality="80"
|
||||
placeholder
|
||||
src="/img/haditha/sample-bgi.svg"
|
||||
/>
|
||||
src="/img/haditha/library/totally.webp"
|
||||
/>
|
||||
<!-- src="/img/haditha/sample-bgi.svg" -->
|
||||
<p class="title">{{ item?._source?.title }}</p>
|
||||
<p class="version">
|
||||
{{ item?._source?.vol_title + item?._source?.vol_num }}
|
||||
|
|
@ -97,7 +93,7 @@ const goToLibraryShow = (item) => {
|
|||
|
||||
.title {
|
||||
margin-top: 0.7em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 19.5px;
|
||||
|
|
@ -107,7 +103,7 @@ const goToLibraryShow = (item) => {
|
|||
}
|
||||
|
||||
.version {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useAuthStore } from "@stores/authStore";
|
|||
|
||||
// {
|
||||
// label: "چت بات",
|
||||
// icon: "i-haditha-chat-bot",
|
||||
// icon: "haditha:chat-bot",
|
||||
// to: "/haditha/chat-bot",
|
||||
// slot: "chat-bot",
|
||||
// class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
|
|
@ -11,15 +11,15 @@ import { useAuthStore } from "@stores/authStore";
|
|||
|
||||
const items = ref([
|
||||
{
|
||||
label: "حانه",
|
||||
icon: "i-haditha-home",
|
||||
label: "خانه",
|
||||
icon: "haditha:home",
|
||||
to: "/haditha",
|
||||
descrption: "صفحه اصلی",
|
||||
class: "flex flex-col lg:flex-row justify-center items-center hide-label",
|
||||
},
|
||||
{
|
||||
label: "جستجو",
|
||||
icon: "i-haditha-search",
|
||||
icon: "haditha:search",
|
||||
to: "/haditha/search",
|
||||
slot: "search",
|
||||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
|
|
@ -27,7 +27,7 @@ const items = ref([
|
|||
|
||||
{
|
||||
label: "کتابخانه",
|
||||
icon: "i-haditha-library",
|
||||
icon: "haditha:library",
|
||||
to: "/haditha/library",
|
||||
slot: "library",
|
||||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||||
|
|
@ -35,46 +35,46 @@ const items = ref([
|
|||
|
||||
{
|
||||
label: "نشان شده ها",
|
||||
icon: "i-haditha-bookmark",
|
||||
icon: "haditha:bookmark",
|
||||
to: "/haditha/favorites",
|
||||
class: "flex flex-col lg:hidden justify-center items-center",
|
||||
},
|
||||
|
||||
{
|
||||
label: "دیگر",
|
||||
icon: "i-haditha-menu",
|
||||
icon: "haditha:menu",
|
||||
|
||||
class:
|
||||
"flex flex-col lg:hidden justify-center items-center hide-chevron other /haditha/other",
|
||||
"flex flex-col lg:hidden justify-center items-center hide-chevron other haditha:other",
|
||||
children: [
|
||||
{
|
||||
label: "ورود / ثبت نام",
|
||||
icon: "i-haditha-user",
|
||||
icon: "haditha:user-icon",
|
||||
to: "/haditha/login",
|
||||
},
|
||||
{
|
||||
label: "کتابخانه",
|
||||
icon: "i-haditha-library",
|
||||
icon: "haditha:library",
|
||||
to: "/haditha/library",
|
||||
},
|
||||
{
|
||||
label: "در باره ما",
|
||||
icon: "i-haditha-about-us",
|
||||
icon: "haditha:about-us",
|
||||
to: "/haditha/about-us",
|
||||
},
|
||||
{
|
||||
label: "تماس با ما",
|
||||
icon: "i-haditha-contact-us",
|
||||
icon: "haditha:contact-us",
|
||||
to: "/haditha/contact-us",
|
||||
},
|
||||
{
|
||||
label: "قوانین و مقررات",
|
||||
icon: "i-haditha-copyright",
|
||||
icon: "haditha:copyright",
|
||||
to: "/haditha/rules",
|
||||
},
|
||||
{
|
||||
label: "خروج از حساب",
|
||||
icon: "i-haditha-logout",
|
||||
icon: "haditha:logout",
|
||||
type: "button" as const,
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault();
|
||||
|
|
@ -85,35 +85,41 @@ const items = ref([
|
|||
},
|
||||
]);
|
||||
|
||||
const leftItem = computed(() => [
|
||||
const desktopLeftMenu = ref([
|
||||
{
|
||||
label: "نشان شده ها",
|
||||
icon: "i-haditha-bookmark",
|
||||
icon: "haditha:bookmark",
|
||||
to: "/haditha/favorites",
|
||||
},
|
||||
|
||||
{
|
||||
label: "Guide",
|
||||
icon: "i-haditha-menu",
|
||||
icon: "haditha:menu",
|
||||
children: [
|
||||
{
|
||||
label: "ورود / ثبت نام",
|
||||
icon: "haditha:user-icon",
|
||||
to: "/haditha/login",
|
||||
},
|
||||
|
||||
{
|
||||
label: "در باره ما",
|
||||
icon: "i-haditha-about-us",
|
||||
icon: "haditha:about-us",
|
||||
to: "/haditha/about-us",
|
||||
},
|
||||
{
|
||||
label: "تماس با ما",
|
||||
icon: "i-haditha-contact-us",
|
||||
icon: "haditha:contact-us",
|
||||
to: "/haditha/contact-us",
|
||||
},
|
||||
{
|
||||
label: "قوانین و مقررات",
|
||||
icon: "i-haditha-copyright",
|
||||
icon: "haditha:copyright",
|
||||
to: "/haditha/rules",
|
||||
},
|
||||
{
|
||||
label: "خروج از حساب",
|
||||
icon: "i-haditha-logout",
|
||||
icon: "haditha:logout",
|
||||
type: "button" as const,
|
||||
onSelect(e: Event) {
|
||||
e.preventDefault();
|
||||
|
|
@ -128,28 +134,50 @@ const isMobile = ref(false);
|
|||
const rerenderNavigation = ref(1);
|
||||
const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
|
||||
|
||||
const setMenu = () => {
|
||||
const filterLeftItem = () => {
|
||||
if (isAuthenticatedGetter) {
|
||||
let otherItemChildren = desktopLeftMenu.value[1].children.filter(
|
||||
(i) => i.icon != "haditha:user-icon"
|
||||
);
|
||||
desktopLeftMenu.value[1].children = otherItemChildren;
|
||||
} else {
|
||||
let otherItemChildren = desktopLeftMenu.value[1].children.filter(
|
||||
(i) => i.icon != "haditha:logout"
|
||||
);
|
||||
|
||||
desktopLeftMenu.value[1].children = otherItemChildren;
|
||||
rerenderNavigation.value++;
|
||||
}
|
||||
};
|
||||
const filterRightItem = () => {
|
||||
if (isAuthenticatedGetter) {
|
||||
let otherItem = items.value.find((item) => {
|
||||
return item.class.includes("/haditha/other");
|
||||
return item.class.includes("haditha:other");
|
||||
});
|
||||
|
||||
let otherItemChildren = otherItem.children.filter(
|
||||
(i) => i.to != "/haditha/login"
|
||||
(i) => i.icon != "haditha:user-icon"
|
||||
);
|
||||
otherItem.children = otherItemChildren;
|
||||
} else {
|
||||
let otherItem = items.value.find((item) => {
|
||||
return item.class.includes("/haditha/other");
|
||||
let otherItemIndex = items.value.findIndex((item) => {
|
||||
return item.class.includes("haditha:other");
|
||||
});
|
||||
|
||||
let otherItemChildren = otherItem.children.filter(
|
||||
(i) => i.icon != "i-haditha-logout"
|
||||
let otherItemChildren = items.value[otherItemIndex].children.filter(
|
||||
(i) => i.icon != "haditha:logout"
|
||||
);
|
||||
otherItem.children = otherItemChildren;
|
||||
|
||||
items.value[otherItemIndex].children = otherItemChildren;
|
||||
rerenderNavigation.value++;
|
||||
}
|
||||
};
|
||||
|
||||
const setMenu = () => {
|
||||
filterRightItem();
|
||||
filterLeftItem();
|
||||
};
|
||||
|
||||
setMenu();
|
||||
|
||||
// if(!(isAuthenticatedGetter && isRealUserGetter))
|
||||
|
|
@ -185,8 +213,8 @@ onMounted(() => {
|
|||
linkTrailingBadge: 'linkTrailingBadge',
|
||||
}"
|
||||
/>
|
||||
<div class="hidden lg:flex items-center">
|
||||
<template v-for="(item, index) in leftItem">
|
||||
<div class="hidden lg:flex items-center hamburger-menu">
|
||||
<template v-for="(item, index) in desktopLeftMenu">
|
||||
<UDropdownMenu
|
||||
v-if="item.children?.length"
|
||||
:items="item.children"
|
||||
|
|
@ -202,9 +230,14 @@ onMounted(() => {
|
|||
itemLeadingAvatarSize: 'itemLeadingAvatarSize',
|
||||
itemTrailing: 'itemTrailing',
|
||||
}"
|
||||
:content="{
|
||||
align: 'end',
|
||||
side: 'bottom',
|
||||
sideOffset: 15,
|
||||
}"
|
||||
>
|
||||
<UButton
|
||||
icon="i-haditha-menu"
|
||||
icon="haditha:menu"
|
||||
variant="ghost"
|
||||
:ui="{
|
||||
base: 'string[]',
|
||||
|
|
@ -257,6 +290,7 @@ onMounted(() => {
|
|||
|
||||
.isolate.min-w-0.flex.items-center.list {
|
||||
li {
|
||||
margin-left: 0.5em;
|
||||
padding: 0;
|
||||
|
||||
.group {
|
||||
|
|
@ -265,11 +299,16 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: color-mix(in oklab, #00a762 50%, transparent);
|
||||
box-shadow: 0px 4px 10px 0px #00745933;
|
||||
border-radius: 0.75em; //12px;
|
||||
}
|
||||
background: linear-gradient(
|
||||
320.71deg,
|
||||
#b9fde0 6.56%,
|
||||
#e4f9f0 69.69%
|
||||
);
|
||||
// &::before {
|
||||
// background-color: color-mix(in oklab, #00a762 50%, transparent);
|
||||
// box-shadow: 0px 4px 10px 0px #00745933;
|
||||
// border-radius: 0.75em; //12px;
|
||||
// }
|
||||
}
|
||||
|
||||
// max-width: 112px;
|
||||
|
|
@ -281,7 +320,7 @@ onMounted(() => {
|
|||
padding-bottom: 0.37em; /*6px*/
|
||||
padding-left: 1.2em;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 0.87rem; /*14px*/
|
||||
line-height: 1.3rem; /*6px*/
|
||||
|
|
@ -342,6 +381,11 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.group.item {
|
||||
&:hover {
|
||||
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.99px) {
|
||||
.fixed {
|
||||
|
|
@ -386,7 +430,7 @@ onMounted(() => {
|
|||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -2,28 +2,28 @@
|
|||
const state = reactive({
|
||||
items: [
|
||||
{
|
||||
img: "https://picsum.photos/640/640?random=1",
|
||||
img: "/img/haditha/khosro-panahi.png",
|
||||
title: "حجتالاسلام خسروپناه",
|
||||
job: "پژوهشگر",
|
||||
summary:
|
||||
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
||||
},
|
||||
{
|
||||
img: "https://picsum.photos/640/640?random=1",
|
||||
img: "/img/haditha/khosro-panahi.png",
|
||||
title: "حجتالاسلام خسروپناه",
|
||||
job: "پژوهشگر",
|
||||
summary:
|
||||
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
||||
},
|
||||
{
|
||||
img: "https://picsum.photos/640/640?random=1",
|
||||
img: "/img/haditha/khosro-panahi.png",
|
||||
title: "حجتالاسلام خسروپناه",
|
||||
job: "پژوهشگر",
|
||||
summary:
|
||||
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
||||
},
|
||||
{
|
||||
img: "https://picsum.photos/640/640?random=1",
|
||||
img: "/img/haditha/khosro-panahi.png",
|
||||
title: "حجتالاسلام خسروپناه",
|
||||
job: "پژوهشگر",
|
||||
summary:
|
||||
|
|
@ -106,7 +106,7 @@ const state = reactive({
|
|||
|
||||
.header {
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 1.25rem; /* 20px;*/
|
||||
line-height: 1.87rem; /* 30px;*/
|
||||
|
|
@ -118,7 +118,7 @@ const state = reactive({
|
|||
}
|
||||
.carousel-item {
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem; /* 24px;*/
|
||||
|
|
@ -141,7 +141,7 @@ const state = reactive({
|
|||
}
|
||||
|
||||
.job {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -153,7 +153,7 @@ const state = reactive({
|
|||
.summary {
|
||||
/* padding: 2.5em 0 2.5em; */
|
||||
margin-bottom: 0.3em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ const state = reactive({
|
|||
},
|
||||
{
|
||||
img: "/img/haditha/section-four_card-two.png",
|
||||
title: "تشخیص موجودیت",
|
||||
title: "خلاصه سازی",
|
||||
description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
|
||||
},
|
||||
{
|
||||
img: "/img/haditha/section-four_card-three.png",
|
||||
title: "تشخیص موجودیت",
|
||||
title: "چت بات هوشمند",
|
||||
description:
|
||||
"امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
|
||||
},
|
||||
|
|
@ -86,7 +86,7 @@ const state = reactive({
|
|||
|
||||
.header {
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 1.25rem; /* 20px;*/
|
||||
line-height: 1.87rem; /* 30px;*/
|
||||
|
|
@ -101,7 +101,7 @@ const state = reactive({
|
|||
border: none;
|
||||
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem; /* 24px;*/
|
||||
|
|
@ -109,7 +109,7 @@ const state = reactive({
|
|||
text-align: center;
|
||||
}
|
||||
.description {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 0.87rem; /* 14px;*/
|
||||
line-height: 1.31rem; /* 21px;*/
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const AutoComplation = defineAsyncComponent(() =>
|
|||
<navigation-menu></navigation-menu>
|
||||
|
||||
<div class="logo-container flex justify-center flex-col items-center">
|
||||
<img fit="auto" quality="80" placeholder src="/img/haditha/logo.webp" />
|
||||
<img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
|
||||
<div class="title">
|
||||
کاوش با
|
||||
<span class="badge-style me-1"> هوش مصنوعی </span>
|
||||
|
|
@ -78,7 +78,7 @@ const AutoComplation = defineAsyncComponent(() =>
|
|||
|
||||
.title {
|
||||
margin-top: 3.5em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0%;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,25 @@ const img = useImage();
|
|||
</script>
|
||||
<template>
|
||||
<section class="section-three flex">
|
||||
<div class="section-container md:flex md:flex-col md:items-center xl:block mx-auto">
|
||||
<!-- <video class="background-video" loop autoplay>
|
||||
<source
|
||||
src="/img/haditha/video/section-three-gif.mp4"
|
||||
type="video/webm"
|
||||
/>
|
||||
|
||||
|
||||
<source src="/img/haditha/video/section-three-gif.mp4" type="video/mp4" />
|
||||
|
||||
Download the
|
||||
<a href="/img/haditha/video/section-three-gif.mp4">WEBM</a>
|
||||
or
|
||||
<a href="/img/haditha/video/section-three-gif.mp4">MP4</a>
|
||||
video.F
|
||||
</video> -->
|
||||
|
||||
<div
|
||||
class="section-container md:flex md:flex-col md:items-center xl:block mx-auto"
|
||||
>
|
||||
<div class="header flex items-center mb-2">
|
||||
<img
|
||||
fit="auto"
|
||||
|
|
@ -53,11 +71,25 @@ const img = useImage();
|
|||
padding-left: 2em; /*32px;*/
|
||||
background-color: #1b2132;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
.background-video {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
height: 36.5em;
|
||||
object-fit:fill;
|
||||
aspect-ratio: 16 / 9; /* Replace with your desired ratio (e.g., 4/3, 1/1) */
|
||||
width: 100%; /* Adjust width as needed */
|
||||
}
|
||||
.section-container {
|
||||
width: 56.7em; /*907px;*/
|
||||
/*height: 15.5em; 249px;*/
|
||||
gap: 9px;
|
||||
z-index:1;
|
||||
|
||||
.header {
|
||||
max-width: 30em; /*480px;*/
|
||||
|
|
@ -77,7 +109,7 @@ const img = useImage();
|
|||
height: 2.1em; /*"34";*/
|
||||
}
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 2rem; /*32px;*/
|
||||
line-height: 3rem; /*48px;*/
|
||||
|
|
@ -100,7 +132,7 @@ const img = useImage();
|
|||
border-radius: 1em;
|
||||
background: #1b2132cc;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem; /*24px;*/
|
||||
|
|
@ -113,7 +145,7 @@ const img = useImage();
|
|||
|
||||
@media screen and (max-width: 1199.99px) {
|
||||
.section-three {
|
||||
background-image: url("/img/haditha/mobile/section-three-bgi_md.png");
|
||||
background-image: url("/img/haditha/section-three-bgi.webp");
|
||||
height: 46.87em;
|
||||
background-position: center 65%;
|
||||
padding-top: 7.5em;
|
||||
|
|
@ -139,7 +171,7 @@ const img = useImage();
|
|||
|
||||
.content {
|
||||
background: transparent;
|
||||
color: #626b84;
|
||||
/* color: #626b84; */
|
||||
max-width: 40em; /*480px;*/
|
||||
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
fit="auto"
|
||||
quality="80"
|
||||
placeholder
|
||||
src="/img/haditha/card-one.webp"
|
||||
src="/img/haditha/card-one.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
fit="auto"
|
||||
quality="80"
|
||||
placeholder
|
||||
src="/img/haditha/card-two.webp"
|
||||
src="/img/haditha/card-two.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
fit="auto"
|
||||
quality="80"
|
||||
placeholder
|
||||
src="/img/haditha/card-three.webp"
|
||||
src="/img/haditha/card-three.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
margin: auto;
|
||||
}
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem; /*24px*/
|
||||
line-height: 2.25rem; /* 36px;*/
|
||||
|
|
|
|||
17
components/haditha/icons/AboutUsIcon.vue
Normal file
17
components/haditha/icons/AboutUsIcon.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M10.6668 1.83301H5.3335C2.66683 1.83301 1.3335 3.16634 1.3335 5.83301V14.4997C1.3335 14.8663 1.6335 15.1663 2.00016 15.1663H10.6668C13.3335 15.1663 14.6668 13.833 14.6668 11.1663V5.83301C14.6668 3.16634 13.3335 1.83301 10.6668 1.83301Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.66748 6.83301H11.3341" stroke="url(#paint0_linear_67_3319)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.66748 10.166H9.33415" stroke="#1B2132" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_67_3319" x1="11.378" y1="6.83301" x2="4.33954" y2="7.69806" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D284FF"/>
|
||||
<stop offset="1" stop-color="#4D00FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 961 B |
|
|
@ -139,7 +139,7 @@ function toggleAccordion(id, event) {
|
|||
<style scoped>
|
||||
.accordion-menu {
|
||||
.accordion-menu-item {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 19.5px;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const props = defineProps({
|
|||
<style scoped>
|
||||
.tree-item[aria-expanded="true"] {
|
||||
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 19.5px;
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||
|
||||
.title {
|
||||
margin-bottom: 1.2em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
|
@ -156,7 +156,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||
}
|
||||
|
||||
.description {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -185,7 +185,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -225,7 +225,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ onMounted(() => {
|
|||
|
||||
.title {
|
||||
margin-bottom: 1.2em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
|
@ -161,7 +161,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.description {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -190,7 +190,7 @@ onMounted(() => {
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -230,7 +230,7 @@ onMounted(() => {
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,11 @@ const route = useRoute();
|
|||
// const modal = useModal();
|
||||
// const isModalOpen = ref(false);
|
||||
|
||||
const hadithAddress = (item) => {
|
||||
return `${item?._source?.address?.vol_title}، صفحه
|
||||
${item?._source?.address?.page_num}`;
|
||||
};
|
||||
|
||||
function goToSearchShowPage(selectedItem) {
|
||||
// modal.open(SearchShow, { title: "Welcome" });
|
||||
// isModalOpen.value = true;
|
||||
|
|
@ -111,8 +116,8 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
@click.prevent="goToSearchShowPage(item)"
|
||||
class="arabic-text block"
|
||||
:href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
|
||||
v-html="item?._source?.content_ar"
|
||||
>
|
||||
{{ item?._source?.content_ar }}
|
||||
</a>
|
||||
<a
|
||||
@click.prevent="goToSearchShowPage(item)"
|
||||
|
|
@ -121,10 +126,28 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
|
||||
></a>
|
||||
<div class="flex justify-end">
|
||||
<p class="reference">
|
||||
<ULink
|
||||
:to="{
|
||||
name: 'hadithaLibraryShow',
|
||||
params: {
|
||||
id: item?._source?.address.vol_id,
|
||||
slug: hadithAddress(item),
|
||||
},
|
||||
}"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:ui="{
|
||||
leadingIcon: 'text-(--ui-primary)',
|
||||
}"
|
||||
class="reference"
|
||||
>
|
||||
{{ hadithAddress(item) ?? "" }}
|
||||
</ULink>
|
||||
|
||||
<!-- <p class="reference">
|
||||
{{ item?._source?.address?.vol_title }}، صفحه
|
||||
{{ item?._source?.address?.page_num }}
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -155,7 +178,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
<style scoped>
|
||||
.search-list-item {
|
||||
.from-person {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 0.75rem; /*12px*/
|
||||
line-height: 1.125rem; /*18px*/
|
||||
|
|
@ -172,7 +195,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
}
|
||||
}
|
||||
.arabic-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem; /*18px*/
|
||||
line-height: 2rem; /*23px*/
|
||||
|
|
@ -189,9 +212,9 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
}
|
||||
}
|
||||
.persian-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 1rem; /*16px*/
|
||||
font-size: 0.8rem; /*16px*/
|
||||
line-height: 1.375rem; /*22px*/
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
|
|
@ -209,10 +232,10 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
border-width: 0.5px;
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 0.625rem; /*10px*/
|
||||
line-height: 0.9rem; /*15px*/
|
||||
line-height: 1.1rem; /*15px*/
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
color: #8a92a8;
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ const closeModal = () => {
|
|||
background: #ffffff;
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -227,7 +227,7 @@ const closeModal = () => {
|
|||
|
||||
span {
|
||||
margin-left: 0.1em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -252,7 +252,7 @@ const closeModal = () => {
|
|||
margin-bottom: 0.5em;
|
||||
|
||||
.section-title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -293,7 +293,7 @@ const closeModal = () => {
|
|||
background: #ffffff;
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -307,7 +307,7 @@ const closeModal = () => {
|
|||
padding: 2em 0;
|
||||
|
||||
.arabic-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
|
@ -327,7 +327,7 @@ const closeModal = () => {
|
|||
|
||||
.from,
|
||||
.persian-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
|
|
@ -336,7 +336,7 @@ const closeModal = () => {
|
|||
color: var(--ui-color-two);
|
||||
}
|
||||
/* .persian-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
|
@ -350,7 +350,7 @@ const closeModal = () => {
|
|||
padding: 2em 0;
|
||||
|
||||
.description-item {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
|
|
@ -369,7 +369,7 @@ const closeModal = () => {
|
|||
border-width: 0.5px;
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
|
|
@ -420,7 +420,7 @@ const closeModal = () => {
|
|||
);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 22.5px;
|
||||
|
|
@ -440,7 +440,7 @@ const closeModal = () => {
|
|||
background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -464,7 +464,7 @@ const closeModal = () => {
|
|||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
.prev-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
|
@ -473,7 +473,7 @@ const closeModal = () => {
|
|||
color: var(--ui-color-two);
|
||||
}
|
||||
.next-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
|
|
|||
|
|
@ -356,7 +356,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
);
|
||||
}
|
||||
.message {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 27px;
|
||||
|
|
@ -392,7 +392,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
|
|
@ -419,7 +419,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
padding: 8px;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
line-height: 16.5px;
|
||||
|
|
@ -476,7 +476,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
);
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
|
|||
|
|
@ -252,14 +252,15 @@ const SearchList = defineAsyncComponent(() =>
|
|||
}
|
||||
|
||||
.search-list-contianer {
|
||||
max-width: 41em; /*656px*/
|
||||
/*max-width: 41em; 656px*/
|
||||
max-width: 75em; /*1200px*/
|
||||
width: 100%;
|
||||
margin: 0 1em;
|
||||
|
||||
.total {
|
||||
padding: 0.5em 1.8em;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem; /*11px*/
|
||||
line-height: 1rem;
|
||||
|
|
|
|||
|
|
@ -34,26 +34,26 @@ useHead({
|
|||
...headMetas,
|
||||
],
|
||||
bodyAttrs: {
|
||||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||||
class: [import.meta.env.VITE_HADITH_SYSTEM, "library-show-page"],
|
||||
},
|
||||
link: headLinks,
|
||||
});
|
||||
// #endregion imports
|
||||
// #region props
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
noDataText: {
|
||||
default: "نتیجهای یافت نشد!",
|
||||
},
|
||||
noDataIcon: {
|
||||
default: "/img/haditha/no-data.png",
|
||||
},
|
||||
});
|
||||
// const props = defineProps({
|
||||
// list: {
|
||||
// default() {
|
||||
// return [];
|
||||
// },
|
||||
// },
|
||||
// noDataText: {
|
||||
// default: "نتیجهای یافت نشد!",
|
||||
// },
|
||||
// noDataIcon: {
|
||||
// default: "/img/haditha/no-data.png",
|
||||
// },
|
||||
// });
|
||||
// #endregion props
|
||||
|
||||
// #region refs and reactives
|
||||
|
|
@ -132,48 +132,72 @@ const state = reactive({
|
|||
{ title: "فصل چهارم", icon: "vscode-icons:file-type-vue" },
|
||||
{ title: "فصل پنجم", icon: "vscode-icons:file-type-nuxt" },
|
||||
],
|
||||
volumeInfo: {},
|
||||
});
|
||||
|
||||
const pageIsLessThanOne = computed(() => {
|
||||
console.info("pageIsLessThanOne");
|
||||
return page_num.value <= 1;
|
||||
});
|
||||
const pageIsBiggerThanTotal = computed(() => {
|
||||
console.info("pageIsBiggerThanTotal");
|
||||
const page_count = +route.query.page_count;
|
||||
const page_count = state.volumeInfo._source?.page_count;
|
||||
return page_num.value + 1 >= page_count;
|
||||
});
|
||||
// #endregion refs and reactives
|
||||
|
||||
// #region methods
|
||||
const fetchData = async () => {
|
||||
let url = repoUrl() + hadithaApi.library.show;
|
||||
url = url.replace("@appname", "monir");
|
||||
url = url.replace("@page_start", state.volumeInfo._source?.page_first);
|
||||
url = url.replace("@page_len", 1);
|
||||
url = url.replace("@vol_id", state.volumeInfo?._source.id);
|
||||
|
||||
// const { data, status, error, refresh, clear } =
|
||||
// await useHadithaSearchComposable<HadithResponseModel>(url, {
|
||||
// method: "get",
|
||||
// });
|
||||
|
||||
// if (status.value == "success") {
|
||||
// state.selectedItem = <Hit[]>data.value.hits.hits;
|
||||
|
||||
// loading.value = false;
|
||||
// }
|
||||
|
||||
httpService
|
||||
.getRequest(url)
|
||||
.then((res: HadithResponseModel) => {
|
||||
state.selectedItem = <Hit[]>res.hits.hits;
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
const fetchVolume = async () => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
let page_first = +route.query.page_first;
|
||||
const volId = route.params.id;
|
||||
|
||||
let url = repoUrl() + hadithaApi.library.show;
|
||||
url = url.replace("@appname", "monir");
|
||||
url = url.replace("@page_start", 0);
|
||||
url = url.replace("@page_end", 1);
|
||||
let url = repoUrl() + hadithaApi.library.get;
|
||||
url = url.replace("@vol_id", volId);
|
||||
|
||||
console.info("urlurlurlurl", url);
|
||||
// fetch search list from backend(ssr)
|
||||
const { data, status, error, refresh, clear } =
|
||||
await useHadithaSearchComposable<HadithResponseModel>(url, {
|
||||
method: "get",
|
||||
});
|
||||
// const { data, status, error, refresh, clear } =
|
||||
// await useHadithaSearchComposable<HadithResponseModel>(url, {
|
||||
// method: "get",
|
||||
// });
|
||||
|
||||
if (status.value == "success") {
|
||||
state.selectedItem = <Hit[]>data.value.hits.hits;
|
||||
}
|
||||
// if (status.value == "success") {
|
||||
// state.volumeInfo = data.value;
|
||||
// page_num.value = state.volumeInfo._source.page_first;
|
||||
// }
|
||||
|
||||
loading.value = false;
|
||||
httpService.getRequest(url).then((res: HadithResponseModel) => {
|
||||
state.volumeInfo = res;
|
||||
page_num.value = state.volumeInfo._source?.page_first;
|
||||
fetchData();
|
||||
});
|
||||
};
|
||||
|
||||
fetchData();
|
||||
fetchVolume();
|
||||
|
||||
const goToTheLibrary = (type: string) => {
|
||||
router.push({
|
||||
|
|
@ -181,17 +205,14 @@ const goToTheLibrary = (type: string) => {
|
|||
});
|
||||
};
|
||||
const onOpenList = () => {
|
||||
console.info("onOpenList");
|
||||
isModalOpen.value = true;
|
||||
};
|
||||
const onSearch = () => {
|
||||
// console.info("onSearch");
|
||||
router.push({
|
||||
name: "hadithaSearch",
|
||||
});
|
||||
};
|
||||
const onClose = () => {
|
||||
console.info("onClose");
|
||||
router.push({
|
||||
name: "hadithLibrary",
|
||||
});
|
||||
|
|
@ -205,8 +226,8 @@ const handlePagination = (
|
|||
loading.value = true;
|
||||
|
||||
const volId = route.params.id;
|
||||
const page_count = +route.query.page_count;
|
||||
const page_first = +route.query.page_first;
|
||||
const page_count = state.volumeInfo._source?.page_count;
|
||||
|
||||
const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0;
|
||||
const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count;
|
||||
|
||||
|
|
@ -264,9 +285,6 @@ const prepareTreeData = (data) => {
|
|||
|
||||
getDataTree();
|
||||
|
||||
onMounted(() => {
|
||||
page_num.value = +route.query.page_first;
|
||||
});
|
||||
// #endregion methods
|
||||
|
||||
// components declaration
|
||||
|
|
@ -276,6 +294,9 @@ const HadithaLayout = defineAsyncComponent(
|
|||
const UTree = defineAsyncComponent(
|
||||
() => import("@haditha/components/haditha/library-show/UTree.vue")
|
||||
);
|
||||
const NavigationMenu = defineAsyncComponent(
|
||||
() => import("@haditha/components/haditha/NavigationMenu.vue")
|
||||
);
|
||||
// const AccordionMenu = defineAsyncComponent(
|
||||
// () => import("@haditha/components/haditha/library-show/AccordionMenu..vue")
|
||||
// );
|
||||
|
|
@ -286,10 +307,12 @@ const UTree = defineAsyncComponent(
|
|||
<div class="page-container h-full">
|
||||
<UContainer
|
||||
ui="{
|
||||
base: 'sm:px-6 lg:px-4',
|
||||
base: 'sm:px-6 lg:px-4 ',
|
||||
}"
|
||||
class="page-inner-container sm:px-6 lg:px-4"
|
||||
>
|
||||
<navigation-menu></navigation-menu>
|
||||
|
||||
<div class="page-header py-4 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<UButton
|
||||
|
|
@ -327,17 +350,18 @@ const UTree = defineAsyncComponent(
|
|||
<div class="separator"></div>
|
||||
|
||||
<div class="page-content firefox-scrollbar py-14 p-2">
|
||||
<!-- <h2></h2> -->
|
||||
<p
|
||||
v-if="state.selectedItem?.length"
|
||||
v-for="(parag, index) in state.selectedItem"
|
||||
:key="index"
|
||||
v-html="parag?._source?.content"
|
||||
></p>
|
||||
<template v-if="state.selectedItem?.length">
|
||||
<p
|
||||
v-for="(parag, index) in state.selectedItem"
|
||||
:key="index"
|
||||
v-html="parag?._source?.content"
|
||||
></p>
|
||||
</template>
|
||||
<no-data v-else></no-data>
|
||||
</div>
|
||||
|
||||
<div class="body-footer">
|
||||
<div class="mt-5 z-2">
|
||||
<div class="mt-5 pb-5 z-2">
|
||||
<div class="flex justify-between pagination">
|
||||
<UButton
|
||||
@click="handlePagination(-1)"
|
||||
|
|
@ -349,7 +373,9 @@ const UTree = defineAsyncComponent(
|
|||
:disabled="pageIsLessThanOne"
|
||||
/>
|
||||
<div class="flex items-center">
|
||||
<span class="total-pages">{{ route.query.page_count }}</span>
|
||||
<span class="total-pages">{{
|
||||
state.volumeInfo._source?.page_count
|
||||
}}</span>
|
||||
<span class="mx-2">/</span>
|
||||
<UInput
|
||||
:disabled="loading"
|
||||
|
|
@ -417,15 +443,16 @@ const UTree = defineAsyncComponent(
|
|||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
background: #f7fffd;
|
||||
/* background: #f7fffd; */
|
||||
|
||||
.page-inner-container {
|
||||
padding-top: 6em;
|
||||
/* position: relative; */
|
||||
/* padding-bottom: 4em; */
|
||||
/* width: 100%; */
|
||||
/* max-width: 1200px; */
|
||||
/* margin-right: auto; */
|
||||
/* margin-left: auto; */
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
.page-header {
|
||||
color: var(--ui-color-two);
|
||||
|
||||
|
|
@ -436,9 +463,12 @@ const UTree = defineAsyncComponent(
|
|||
margin-left: 2.2em;
|
||||
}
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
/* font-family: IRANSansX; */
|
||||
font-family: var(--font);
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
/* font-size: 16px; */
|
||||
font-size: 0.9rem;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
|
|
@ -473,22 +503,32 @@ const UTree = defineAsyncComponent(
|
|||
);
|
||||
}
|
||||
.page-content {
|
||||
padding-bottom: 5em;
|
||||
/* margin: 1.5em; */
|
||||
|
||||
font-family: Takrim;
|
||||
/* font-family: var(--ar-font); */
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
/* font-size: 20px; */
|
||||
font-size: 0.9rem;
|
||||
line-height: 40px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
|
||||
color: var(--ui-color-two);
|
||||
|
||||
height: calc(100dvh - 8em);
|
||||
overflow-y: auto;
|
||||
/* height: calc(100dvh - 13em); */
|
||||
/* overflow-y: auto; */
|
||||
}
|
||||
|
||||
.body-footer {
|
||||
position: fixed;
|
||||
bottom: 0em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
|
||||
.actions {
|
||||
margin-bottom: 1em;
|
||||
|
||||
|
|
@ -512,7 +552,7 @@ const UTree = defineAsyncComponent(
|
|||
);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 22.5px;
|
||||
|
|
@ -536,7 +576,7 @@ const UTree = defineAsyncComponent(
|
|||
);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -560,7 +600,7 @@ const UTree = defineAsyncComponent(
|
|||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
.total-pages {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
|
|
@ -569,23 +609,32 @@ const UTree = defineAsyncComponent(
|
|||
color: #8a92a8;
|
||||
}
|
||||
.prev-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
font-size: 0.6rem;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
.next-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
/* font-size: 12px; */
|
||||
font-size: 0.6rem;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
|
||||
.prev-haditha,
|
||||
.next-haditha {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -593,6 +642,9 @@ const UTree = defineAsyncComponent(
|
|||
</style>
|
||||
|
||||
<style>
|
||||
body.hadith-system.library-show-page {
|
||||
background-color: #f7fffd;
|
||||
}
|
||||
.page-container {
|
||||
.page-inner-container {
|
||||
.body-footer {
|
||||
|
|
@ -608,7 +660,7 @@ const UTree = defineAsyncComponent(
|
|||
border-width: 0.5px;
|
||||
border: 0.3px solid #e0e0e0;
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 100%;
|
||||
|
|
@ -621,3 +673,5 @@ const UTree = defineAsyncComponent(
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- http://localhost:3000/haditha/library/vdh9971/%D8%AA%D8%B1%D8%AC%D9%85%D9%87%20%D8%A7%D8%B5%D9%88%D9%84%20%DA%A9%D8%A7%D9%81%DB%8C%20%D8%AC%D9%84%D8%AF%20%D8%A7%D9%88%D9%84%D8%8C%20%D8%B5%D9%81%D8%AD%D9%87%0A%20%20%20384 -->
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ const el = useTemplateRef<HTMLElement>("el");
|
|||
const httpService = useNuxtApp()["$http"];
|
||||
const total = ref(0);
|
||||
const currentPage = useState("currentPage", () => 0);
|
||||
// Client-side state
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
// #endregion refs
|
||||
|
||||
// #region reactive
|
||||
|
|
@ -57,7 +60,27 @@ const getLibraryList = async (dataType = "bookmark") => {
|
|||
// Server-side initial load
|
||||
const { data: loadedItems } = await useAsyncData(
|
||||
"libraryList",
|
||||
() => getLibraryList(),
|
||||
async () => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
let url = repoUrl() + hadithaApi.library.list;
|
||||
url = url.replace("@field_collapsed", "normal");
|
||||
url = url.replace("@offset", currentPage.value);
|
||||
url = url.replace("@limit", state.pagination.limit);
|
||||
url = url.replace("@q", "none");
|
||||
|
||||
return await httpService
|
||||
.postRequest(url)
|
||||
.then((res) => {
|
||||
total.value = res.hits.total.value ?? 0;
|
||||
currentPage.value += state.pagination.limit;
|
||||
return res;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
},
|
||||
{
|
||||
transform: (data) => data.hits.hits,
|
||||
getCachedData: (key) => {
|
||||
|
|
@ -66,10 +89,6 @@ const { data: loadedItems } = await useAsyncData(
|
|||
}
|
||||
);
|
||||
|
||||
// Client-side state
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
|
||||
// Client-side infinite scroll
|
||||
useInfiniteScroll(
|
||||
el,
|
||||
|
|
@ -121,11 +140,11 @@ const CardList = defineAsyncComponent(
|
|||
|
||||
<div
|
||||
ref="el"
|
||||
class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
|
||||
class="library-list pl-4 firefox-scrollbar grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
|
||||
>
|
||||
<!-- Client-side loaded content -->
|
||||
<card-list
|
||||
v-if="loadedItems.length"
|
||||
v-if="loadedItems?.length"
|
||||
no-data-text="هنوز چیزی ذخیره نکردهاید!"
|
||||
no-data-icon="/img/haditha/no-data.png"
|
||||
:list="loadedItems"
|
||||
|
|
@ -154,7 +173,7 @@ const CardList = defineAsyncComponent(
|
|||
margin-bottom: 2em;
|
||||
.title {
|
||||
margin-left: 0.4em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
|
@ -171,7 +190,7 @@ const CardList = defineAsyncComponent(
|
|||
overflow-y: auto;
|
||||
}
|
||||
.no-data-text {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import headLinks from "@haditha/json/haditha/headLinks";
|
||||
import headMetas from "@haditha/json/haditha/headMetas";
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
name: "hadithaLogin",
|
||||
|
|
@ -7,94 +10,12 @@ useHead({
|
|||
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ورود`,
|
||||
meta: [
|
||||
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
|
||||
{
|
||||
name: "msapplication-TileImage",
|
||||
content: "/img/haditha/fav-icons/ms-icon-144x144.png",
|
||||
},
|
||||
{ name: "theme-color", content: "#ffffff" },
|
||||
...headMetas,
|
||||
],
|
||||
bodyAttrs: {
|
||||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||||
},
|
||||
link: [
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/x-icon",
|
||||
href: "/img/haditha/fav-icons/favicon.ico",
|
||||
},
|
||||
{ rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
|
||||
// rel: icon
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "16x16",
|
||||
href: "/img/haditha/fav-icons/favicon-16x16.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "32x32",
|
||||
href: "/img/haditha/fav-icons/favicon-32x32.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
sizes: "96x96",
|
||||
href: "/img/haditha/fav-icons/favicon-96x96.png",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
sizes: "192x192",
|
||||
type: "image/png",
|
||||
href: "/img/haditha/fav-icons/android-icon-192x192.png",
|
||||
},
|
||||
// rel: apple
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "57x57",
|
||||
href: "/img/haditha/fav-icons/apple-icon-57x57.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "60x60",
|
||||
href: "/img/haditha/fav-icons/android-icon-60x60.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "72x72",
|
||||
href: "/img/haditha/fav-icons/android-icon-72x72.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "76x76",
|
||||
href: "/img/haditha/fav-icons/android-icon-76x76.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "114x114",
|
||||
href: "/img/haditha/fav-icons/android-icon-114x114.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "120x120",
|
||||
href: "/img/haditha/fav-icons/android-icon-120x120.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "144x144",
|
||||
href: "/img/haditha/fav-icons/android-icon-144x144.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "152x152",
|
||||
href: "/img/haditha/fav-icons/android-icon-152x152.png",
|
||||
},
|
||||
{
|
||||
rel: "apple-touch-icon",
|
||||
sizes: "180x180",
|
||||
href: "/img/haditha/fav-icons/android-icon-180x180.png",
|
||||
},
|
||||
],
|
||||
link: headLinks,
|
||||
});
|
||||
|
||||
const stepOne = ref(true);
|
||||
|
|
@ -155,7 +76,7 @@ const EnterVerifyCode = defineAsyncComponent(
|
|||
|
||||
.title {
|
||||
margin-bottom: 1.2em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
|
@ -177,7 +98,7 @@ const EnterVerifyCode = defineAsyncComponent(
|
|||
}
|
||||
|
||||
.description {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -206,7 +127,7 @@ const EnterVerifyCode = defineAsyncComponent(
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -246,7 +167,7 @@ const EnterVerifyCode = defineAsyncComponent(
|
|||
border: 0.3px solid #d9d9d9;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
color: var(--ui-color-two);
|
||||
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
|
@ -104,7 +104,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
color: var(--ui-color-two);
|
||||
|
||||
p {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
color: var(--ui-color-two);
|
||||
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
|
@ -159,7 +159,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
.label {
|
||||
display: inline-block;
|
||||
margin-inline-end: 1em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -170,7 +170,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
height: 21;
|
||||
}
|
||||
.value {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ onMounted(() => {
|
|||
color: var(--ui-color-two);
|
||||
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
|
@ -176,7 +176,7 @@ onMounted(() => {
|
|||
color: var(--ui-color-two);
|
||||
|
||||
p {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
color: var(--ui-color-two);
|
||||
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
|
@ -116,7 +116,7 @@ const NavigationMenu = defineAsyncComponent(() =>
|
|||
overflow: auto;
|
||||
color: var(--ui-color-two);
|
||||
ul li {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ definePageMeta({
|
|||
name: "hadithaSearchShow",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
useHead({
|
||||
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE}`,
|
||||
meta: [
|
||||
|
|
@ -29,7 +32,7 @@ useHead({
|
|||
...headMetas,
|
||||
],
|
||||
bodyAttrs: {
|
||||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||||
class: [import.meta.env.VITE_HADITH_SYSTEM, "search-show-page"],
|
||||
},
|
||||
link: headLinks,
|
||||
});
|
||||
|
|
@ -48,40 +51,27 @@ useHead({
|
|||
|
||||
// #region refs and reactives
|
||||
const emit = defineEmits(["close"]);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const httpService = useNuxtApp()["$http"];
|
||||
const toast = useToast();
|
||||
|
||||
const state = reactive({
|
||||
selectedItem: {} as HadithResponseShowModel,
|
||||
});
|
||||
// #endregion refs and reactives
|
||||
|
||||
// #region methods
|
||||
const fetchData = async () => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
const fetchData = () => {
|
||||
let url = hadithaApi.search.show;
|
||||
url = url.replace("@index_key", "dhparag");
|
||||
url = url.replace("@id", route.params.id);
|
||||
|
||||
// fetch search list from backend(ssr)
|
||||
const { data, status, error, refresh, clear } =
|
||||
await useHadithaSearchComposable<HadithResponseShowModel>(url, {
|
||||
method: "get",
|
||||
});
|
||||
|
||||
if (status.value == "success") {
|
||||
state.selectedItem = <HadithResponseShowModel>data.value;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
return httpService.getRequest(url);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
const { data: selectedItem } = useAsyncData("parags", () => fetchData());
|
||||
|
||||
const hadithAddress = computed(() => {
|
||||
return `${selectedItem.value?._source?.address?.vol_title}، صفحه
|
||||
${selectedItem.value?._source?.address?.page_num}`;
|
||||
});
|
||||
|
||||
const goToTheSearch = (type: string) => {
|
||||
router.push({
|
||||
|
|
@ -91,29 +81,20 @@ const goToTheSearch = (type: string) => {
|
|||
},
|
||||
});
|
||||
};
|
||||
const goToTheChatbot = () => {
|
||||
router.push({
|
||||
name: "hadithaChatBot",
|
||||
});
|
||||
};
|
||||
// const goToTheChatbot = () => {
|
||||
// router.push({
|
||||
// name: "hadithaChatBot",
|
||||
// });
|
||||
// };
|
||||
|
||||
const handleFavorite = async () => {
|
||||
if (state.selectedItem?._source?.tbookmark) {
|
||||
await removeFromFavorites(state.selectedItem);
|
||||
state.selectedItem._source.tbookmark = false;
|
||||
if (selectedItem.value?._source?.tbookmark) {
|
||||
await removeFromFavorites(selectedItem.value);
|
||||
selectedItem.value._source.tbookmark = false;
|
||||
} else {
|
||||
await addToFavorites(state.selectedItem);
|
||||
state.selectedItem._source.tbookmark = true;
|
||||
await addToFavorites(selectedItem.value);
|
||||
selectedItem.value._source.tbookmark = true;
|
||||
}
|
||||
|
||||
// // add
|
||||
// if (!state.selectedItem._source.tbookmark) {
|
||||
// addToFavorites(state.selectedItem);
|
||||
// }
|
||||
// // delete
|
||||
// else {
|
||||
// removeFromFavorites(state.selectedItem);
|
||||
// }
|
||||
};
|
||||
|
||||
const addToFavorites = async (item = {}) => {
|
||||
|
|
@ -124,24 +105,22 @@ const addToFavorites = async (item = {}) => {
|
|||
ref_id: item._id,
|
||||
title: item._source.content,
|
||||
};
|
||||
httpService.postRequest(url, formData).then((res) => {
|
||||
// this.updateListAnswer(index, "tbookmark", 1);
|
||||
|
||||
try {
|
||||
httpService
|
||||
.postRequest(url, formData)
|
||||
.then((res) => {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "به نشان شده ها افزوده شد",
|
||||
color: "success",
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.message);
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
title: "خطا",
|
||||
description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||
color: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const removeFromFavorites = async (item = {}, index = 0) => {
|
||||
|
|
@ -154,24 +133,22 @@ const removeFromFavorites = async (item = {}, index = 0) => {
|
|||
ref_id: item._id,
|
||||
title: item._source.title,
|
||||
};
|
||||
httpService.postRequest(url, formData).then((res) => {
|
||||
// this.updateListAnswer(index, "tbookmark", 0);
|
||||
|
||||
try {
|
||||
httpService
|
||||
.postRequest(url, formData)
|
||||
.then((res) => {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
description: "از لیست نشان شده ها حذف شد",
|
||||
description: "به نشان شده ها افزوده شد",
|
||||
color: "success",
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.message);
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.add({
|
||||
title: "انجام شد.",
|
||||
title: "خطا",
|
||||
description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||
color: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handlePagination = (prevNextIndicator: string) => {
|
||||
|
|
@ -180,18 +157,36 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
let url = repoUrl() + hadithaApi.search.prevNextHadith;
|
||||
url = url.replace("@index_key", "dhparag");
|
||||
url = url.replace("@vol_id", state.selectedItem?._source?.address?.vol_id);
|
||||
url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
|
||||
url = url.replace("@vol_id", selectedItem.value?._source?.address?.vol_id);
|
||||
url = url.replace("@parag_order", selectedItem.value?._source?.parag_order);
|
||||
url = url.replace("@step", prevNextIndicator);
|
||||
|
||||
httpService
|
||||
.getRequest(url)
|
||||
.then((res) => {
|
||||
state.selectedItem = res.hits.hits?.[0];
|
||||
selectedItem.value = res.hits.hits?.[0];
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
|
||||
const onKeyWordClick = (keyword) => {
|
||||
router.push({
|
||||
name: "hadithaSearch",
|
||||
query: {
|
||||
q: route.query.q ?? "",
|
||||
f_aik: keyword ?? "",
|
||||
},
|
||||
});
|
||||
};
|
||||
const onClassClick = (aiclass) => {
|
||||
router.push({
|
||||
name: "hadithaSearch",
|
||||
query: {
|
||||
q: route.query.q ?? "",
|
||||
f_aik: aiclass ?? "",
|
||||
},
|
||||
});
|
||||
};
|
||||
// const localCopyTextToClipboard = (text: string) => {
|
||||
// copyTextToClipboard(text);
|
||||
// };
|
||||
|
|
@ -202,197 +197,225 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
// console.info("mounted");
|
||||
// });
|
||||
// #endregion methods
|
||||
// components declaration
|
||||
const HadithaLayout = defineAsyncComponent(
|
||||
() => import("@haditha/layouts/HadithaLayout.vue")
|
||||
);
|
||||
const NavigationMenu = defineAsyncComponent(
|
||||
() => import("@haditha/components/haditha/NavigationMenu.vue")
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer
|
||||
ui="{
|
||||
<HadithaLayout>
|
||||
<div class="page-container h-full">
|
||||
<UContainer
|
||||
ui="{
|
||||
base: 'sm:px-6 lg:px-4',
|
||||
}"
|
||||
class="page-inner-container sm:px-6 lg:px-4 py-8"
|
||||
>
|
||||
<div class="search-show-page">
|
||||
<div class="body-header">
|
||||
<span class="top-left-bgi z-0"></span>
|
||||
<div class="modal-title flex justify-between">
|
||||
<ULink
|
||||
raw
|
||||
:to="{ name: 'haditha' }"
|
||||
class="flex justify-center items-center me-3"
|
||||
>
|
||||
<img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
|
||||
</ULink>
|
||||
class="page-inner-container sm:px-6 lg:px-4 py-8"
|
||||
>
|
||||
<navigation-menu></navigation-menu>
|
||||
|
||||
<UButton
|
||||
icon="i-haditha-close"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
class="close-btn"
|
||||
@click="goToTheSearch('normal')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-content">
|
||||
<div class="h-full flex flex-col justify-center z-2">
|
||||
<div class="bg-container h-full">
|
||||
<div class="header flex">
|
||||
<UButton
|
||||
@click="handleFavorite"
|
||||
:variant="
|
||||
state.selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
|
||||
"
|
||||
color="primary"
|
||||
class="bookmark-btn"
|
||||
:icon="
|
||||
state.selectedItem?._source?.tbookmark
|
||||
? 'i-haditha-tag-active'
|
||||
: 'i-haditha-tag'
|
||||
"
|
||||
<div class="search-show-page py">
|
||||
<div class="body-header">
|
||||
<span class="top-left-bgi z-0"></span>
|
||||
<div class="modal-title flex justify-between">
|
||||
<ULink
|
||||
raw
|
||||
:to="{ name: 'haditha' }"
|
||||
class="flex justify-center items-center me-3"
|
||||
>
|
||||
</UButton>
|
||||
<div class="referene">
|
||||
<span> نشانی: </span>
|
||||
{{ state.selectedItem?._source?.address?.vol_title }}، صفحه
|
||||
{{ state.selectedItem?._source?.address?.page_num }}
|
||||
</div>
|
||||
<img
|
||||
fit="auto"
|
||||
quality="80"
|
||||
src="/img/haditha/haditha-title.svg"
|
||||
/>
|
||||
</ULink>
|
||||
|
||||
<UButton
|
||||
icon="i-haditha-close"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
class="close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
|
||||
@click="goToTheSearch('normal')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content firefox-scrollbar">
|
||||
<div class="search-item">
|
||||
<div class="text-arabic-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">
|
||||
{{
|
||||
state.selectedItem?._source?.meta?.hadith_masoum ??
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
}}
|
||||
</span>
|
||||
|
||||
<UButton
|
||||
v-if="
|
||||
state.selectedItem?._source?.meta?.hadith_masoum
|
||||
?.length ||
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
"
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
state.selectedItem?._source?.content_ar ?? ''
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="state.selectedItem?._source?.content_ar?.length"
|
||||
class="arabic-text"
|
||||
<div class="body-content">
|
||||
<div class="h-full flex flex-col justify-center z-2">
|
||||
<div class="bg-container h-full">
|
||||
<div class="header flex">
|
||||
<UButton
|
||||
@click="handleFavorite"
|
||||
:variant="
|
||||
selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
|
||||
"
|
||||
color="primary"
|
||||
class="bookmark-btn"
|
||||
:icon="
|
||||
selectedItem?._source?.tbookmark
|
||||
? 'i-haditha-tag-active'
|
||||
: 'i-haditha-tag'
|
||||
"
|
||||
>
|
||||
<p>
|
||||
{{ state.selectedItem?._source?.content_ar ?? "" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UButton>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="text-persian-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title"> ترجمه </span>
|
||||
<UButton
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
state.selectedItem?._source?.content
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="from">
|
||||
{{
|
||||
state.selectedItem?._source?.meta?.hadith_masoum ??
|
||||
state.selectedItem?._source?.meta?.hadith_sanad
|
||||
}}:
|
||||
</p>
|
||||
<p
|
||||
class="persian-text"
|
||||
v-html="state.selectedItem?._source?.content"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div
|
||||
v-if="state.selectedItem?._source?.description?.length"
|
||||
class="text-description-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<span class="section-title"> شرح </span>
|
||||
<UButton
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
state.selectedItem?._source?.description
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="description-item"
|
||||
v-html="state.selectedItem?._source?.description"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="text-description-section">
|
||||
<div
|
||||
v-if="state.selectedItem?._source?.ai_keywords?.length"
|
||||
class="text-sm mb-1"
|
||||
<ULink
|
||||
:to="{
|
||||
name: 'hadithaLibraryShow',
|
||||
params: {
|
||||
id: selectedItem?._source?.address.vol_id,
|
||||
slug: hadithAddress,
|
||||
},
|
||||
}"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
:ui="{
|
||||
leadingIcon: 'text-(--ui-primary)',
|
||||
}"
|
||||
class="referene bg-white hover:bg-gray-100"
|
||||
>
|
||||
<span class=""> کلیدواژگان: </span>
|
||||
<span
|
||||
class="me-1 text-gray-400 font-light"
|
||||
v-for="(aiClass, i) in state.selectedItem?._source
|
||||
?.ai_keywords"
|
||||
:key="i"
|
||||
<span> نشانی: </span>
|
||||
{{ hadithAddress ?? "" }}
|
||||
</ULink>
|
||||
</div>
|
||||
|
||||
<div class="content firefox-scrollbar">
|
||||
<div class="search-item">
|
||||
<div class="text-arabic-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">
|
||||
{{
|
||||
selectedItem?._source?.meta?.hadith_masoum ??
|
||||
selectedItem?._source?.meta?.hadith_sanad
|
||||
}}
|
||||
</span>
|
||||
|
||||
<UButton
|
||||
v-if="
|
||||
selectedItem?._source?.meta?.hadith_masoum
|
||||
?.length ||
|
||||
selectedItem?._source?.meta?.hadith_sanad
|
||||
"
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
selectedItem?._source?.content_ar ?? ''
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedItem?._source?.content_ar?.length"
|
||||
class="arabic-text"
|
||||
>
|
||||
<p>
|
||||
{{ selectedItem?._source?.content_ar ?? "" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="text-persian-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title"> ترجمه </span>
|
||||
<UButton
|
||||
@click="
|
||||
copyTextToClipboard(selectedItem?._source?.content)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="from">
|
||||
{{
|
||||
selectedItem?._source?.meta?.hadith_masoum ??
|
||||
selectedItem?._source?.meta?.hadith_sanad
|
||||
}}:
|
||||
</p>
|
||||
<p
|
||||
class="persian-text"
|
||||
v-html="selectedItem?._source?.content"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div
|
||||
v-if="selectedItem?._source?.description?.length"
|
||||
class="text-description-section"
|
||||
>
|
||||
{{ i > 0 ? "," : "" }}
|
||||
{{ aiClass }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
<span class="section-title"> شرح </span>
|
||||
<UButton
|
||||
@click="
|
||||
copyTextToClipboard(
|
||||
selectedItem?._source?.description
|
||||
)
|
||||
"
|
||||
variant="ghost"
|
||||
class="copy-btn"
|
||||
label="کپی"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="description-item"
|
||||
v-html="selectedItem?._source?.description"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm"
|
||||
v-if="state.selectedItem?._source?.ai_classes?.length"
|
||||
>
|
||||
<span class=""> دسته بندی ها: </span>
|
||||
<span
|
||||
class="me-1 text-gray-400 font-light"
|
||||
v-for="(aiClass, i) in state.selectedItem?._source
|
||||
?.ai_classes"
|
||||
:key="i"
|
||||
>
|
||||
{{ i > 0 ? "," : "" }}
|
||||
{{ aiClass.label }}
|
||||
</span>
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="text-description-section">
|
||||
<div
|
||||
v-if="selectedItem?._source?.ai_keywords?.length"
|
||||
class="mb-4"
|
||||
>
|
||||
<span class="text-sm"> کلیدواژگان: </span>
|
||||
<UButton
|
||||
class="me-1 text-sm"
|
||||
v-for="(keyword, i) in selectedItem?._source
|
||||
?.ai_keywords"
|
||||
:key="i"
|
||||
@click.prevent="onKeyWordClick(keyword)"
|
||||
variant="soft"
|
||||
>
|
||||
<!-- {{ i > 0 ? "," : "" }} -->
|
||||
{{ keyword }}
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedItem?._source?.ai_classes?.length">
|
||||
<span class="text-sm"> دسته بندی ها: </span>
|
||||
<UButton
|
||||
class="me-1 text-sm"
|
||||
v-for="(aiClass, i) in selectedItem?._source
|
||||
?.ai_classes"
|
||||
:key="i"
|
||||
@click.prevent="onClassClick(aiClass)"
|
||||
variant="soft"
|
||||
>
|
||||
<!-- {{ i > 0 ? "," : "" }} -->
|
||||
{{ aiClass.label }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-footer">
|
||||
<div class="mt-5 z-2">
|
||||
<!-- <div class="flex justify-between actions">
|
||||
<div class="body-footer">
|
||||
<div class="mt-5 pb-5 z-2">
|
||||
<!-- <div class="flex justify-between actions">
|
||||
<UButton
|
||||
disabled
|
||||
class="similar-btn"
|
||||
|
|
@ -410,48 +433,57 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
@click.prevent="goToTheChatbot"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="flex justify-between pagination">
|
||||
<UButton
|
||||
@click="handlePagination('-1')"
|
||||
class="prev-haditha"
|
||||
label="حدیث قبل"
|
||||
color=""
|
||||
variant="soft"
|
||||
icon="i-haditha-chevron-right"
|
||||
/>
|
||||
<UButton
|
||||
@click="handlePagination('1')"
|
||||
class="next-haditha"
|
||||
label="حدیث بعد"
|
||||
color=""
|
||||
variant="soft"
|
||||
trailing-icon="i-haditha-chevron-left"
|
||||
/>
|
||||
<div class="flex justify-between pagination">
|
||||
<UButton
|
||||
@click="handlePagination('-1')"
|
||||
class="prev-haditha"
|
||||
label="حدیث قبل"
|
||||
color=""
|
||||
variant="soft"
|
||||
icon="i-haditha-chevron-right"
|
||||
/>
|
||||
<UButton
|
||||
@click="handlePagination('1')"
|
||||
class="next-haditha"
|
||||
label="حدیث بعد"
|
||||
color=""
|
||||
variant="soft"
|
||||
trailing-icon="i-haditha-chevron-left"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</UContainer>
|
||||
</HadithaLayout>
|
||||
</template>
|
||||
|
||||
<!-- because of the buttons, using without scoped. -->
|
||||
<style>
|
||||
body.hadith-system.search-show-page {
|
||||
background-color: #f7fffd;
|
||||
}
|
||||
|
||||
.page-inner-container {
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
.search-show-page {
|
||||
.body-header {
|
||||
padding-top: 5em;
|
||||
.modal-title {
|
||||
padding: 0 0.5em 1.5em;
|
||||
margin-bottom: 2.5em;
|
||||
|
||||
.close-btn {
|
||||
color: var(--ui-color-two);
|
||||
/* color: var(--ui-color-two); */
|
||||
|
||||
/* width: 24px; */
|
||||
/* height: 24px; */
|
||||
padding: 0.2em;
|
||||
background-color: transparent;
|
||||
/* background-color: transparent; */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -491,10 +523,10 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
padding-right: 12px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 12px;
|
||||
background: #ffffff;
|
||||
/* background-color: #ffffff; */
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -506,7 +538,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
span {
|
||||
margin-left: 0.1em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -517,11 +549,12 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100dvh - 15em);
|
||||
overflow-y: auto;
|
||||
/* height: calc(100dvh - 15em); */
|
||||
/* overflow-y: auto; */
|
||||
padding-bottom: 5em;
|
||||
|
||||
.search-item {
|
||||
padding: 1em 0 1em 0.1em;
|
||||
padding: 1em 0 1em 1em;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
|
|
@ -531,7 +564,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
margin-bottom: 0.5em;
|
||||
|
||||
.section-title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -572,7 +605,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
/* background: #ffffff; */
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -586,7 +619,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
padding: 2em 0;
|
||||
|
||||
.arabic-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
|
@ -606,16 +639,18 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
|
||||
.from,
|
||||
.persian-text {
|
||||
font-family: Takrim;
|
||||
/* font-family: Takrim; */
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
/* font-size: 18px; */
|
||||
font-size: 0.85rem;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
/* .persian-text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
|
@ -629,9 +664,11 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
padding: 2em 0;
|
||||
|
||||
.description-item {
|
||||
font-family: Takrim;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
/* font-size: 18px; */
|
||||
font-size: 0.85rem;
|
||||
|
||||
line-height: 30px;
|
||||
letter-spacing: 0%;
|
||||
text-align: right;
|
||||
|
|
@ -648,7 +685,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
border-width: 0.5px;
|
||||
border: 0.5px solid #d9d9d9;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
|
|
@ -676,6 +713,13 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
}
|
||||
}
|
||||
.body-footer {
|
||||
position: fixed;
|
||||
bottom: 0em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
|
||||
.actions {
|
||||
margin-bottom: 1em;
|
||||
|
||||
|
|
@ -699,7 +743,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 22.5px;
|
||||
|
|
@ -719,7 +763,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
|
||||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -743,7 +787,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
box-shadow: 0px 8px 20px 0px #0000001a;
|
||||
|
||||
.prev-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
|
@ -752,7 +796,7 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
color: var(--ui-color-two);
|
||||
}
|
||||
.next-haditha {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
|
@ -760,17 +804,25 @@ const handlePagination = (prevNextIndicator: string) => {
|
|||
text-align: right;
|
||||
color: var(--ui-color-two);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 719.99px) {
|
||||
.search-show-page {
|
||||
.body-content {
|
||||
.content {
|
||||
height: calc(100dvh - 15em);
|
||||
overflow-y: auto;
|
||||
|
||||
.prev-haditha,
|
||||
.next-haditha {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* @media screen and (max-width: 719.99px) { */
|
||||
/* .search-show-page { */
|
||||
/* .body-content { */
|
||||
/* .content { */
|
||||
/* height: calc(100dvh - 15em); */
|
||||
/* overflow-y: auto; */
|
||||
/* } */
|
||||
/* } */
|
||||
/* } */
|
||||
/* } */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ const isSynonymPopupOpen = ref(false);
|
|||
const Formstate = reactive({
|
||||
name: "",
|
||||
});
|
||||
const showNoData = ref(false);
|
||||
// #endregion refs
|
||||
|
||||
// #region reactive
|
||||
|
|
@ -166,7 +167,7 @@ const backgroundImageStyle = computed(() => {
|
|||
// });
|
||||
let optimizedImageUrl = "/img/haditha/background.webp";
|
||||
|
||||
if (searchTerm.value?.length) {
|
||||
if (showNoData.value) {
|
||||
// optimizedImageUrl = img("/img/haditha/sub-header-bgi.webp", {
|
||||
// quality: 80,
|
||||
// });
|
||||
|
|
@ -181,9 +182,9 @@ const backgroundImageStyle = computed(() => {
|
|||
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
|
||||
};
|
||||
});
|
||||
// const searchButtonIcon = computed(() => {
|
||||
// return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
|
||||
// });
|
||||
const searchButtonIcon = computed(() => {
|
||||
return searchTerm.value?.length ? "i-lucide-x" : "i-haditha-search";
|
||||
});
|
||||
const synonymIsSwitchedOn = computed(() => {
|
||||
return AutoComplationState.synonym.items.filter((i) => i.enable).length;
|
||||
});
|
||||
|
|
@ -192,7 +193,16 @@ const synonymIsSwitchedOn = computed(() => {
|
|||
// #region methods
|
||||
|
||||
// خروج از حالت مشابه
|
||||
const exitSimilarMode = () => {};
|
||||
const exitSimilarMode = () => {
|
||||
history?.pushState(
|
||||
{},
|
||||
document?.title,
|
||||
route.path + `?q=${searchTerm.value}`
|
||||
);
|
||||
delete route.query.f_aik;
|
||||
|
||||
sendQuery();
|
||||
};
|
||||
// ارسال درخواست
|
||||
const sendQuery = async (payload = {}) => {
|
||||
let url = hadithaApi.search.list;
|
||||
|
|
@ -210,14 +220,18 @@ const sendQuery = async (payload = {}) => {
|
|||
typeModelValue.value == "translations" ||
|
||||
typeModelValue.value == "descriptions";
|
||||
|
||||
url = url.replace(
|
||||
"@q=none",
|
||||
searchTerm.value.length
|
||||
? `q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
|
||||
searchTerm.value
|
||||
}`
|
||||
: "q=none"
|
||||
);
|
||||
if (searchTerm.value.length) {
|
||||
url = url.replace(
|
||||
"@q=none",
|
||||
`q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
|
||||
searchTerm.value
|
||||
}`
|
||||
);
|
||||
|
||||
// if (route.query.f_aik?.length) url += `&f_aik=${route.query.f_aik}`;
|
||||
}
|
||||
|
||||
console.info(url);
|
||||
|
||||
return await httpService.postRequest(url, payload).then((res) => {
|
||||
total.value = res.hits.total.value ?? 0;
|
||||
|
|
@ -239,8 +253,12 @@ const { data: loadedItems } = await useAsyncData("search", () => sendQuery(), {
|
|||
return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
|
||||
},
|
||||
});
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
|
||||
const onBeforeSendQuery = (from) => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
history?.pushState(
|
||||
{},
|
||||
document?.title,
|
||||
|
|
@ -249,9 +267,18 @@ const onBeforeSendQuery = (from) => {
|
|||
|
||||
offset.value = 0;
|
||||
|
||||
sendQuery().then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
});
|
||||
if (searchTerm.value?.length) {
|
||||
sendQuery().then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
searchTerm.value = "";
|
||||
loadedItems.value = [];
|
||||
showNoData.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// Client-side infinite scroll
|
||||
useInfiniteScroll(
|
||||
|
|
@ -278,11 +305,23 @@ useInfiniteScroll(
|
|||
{ distance: 100 }
|
||||
);
|
||||
// دکمه جستجو کردن
|
||||
const handleSearchClearButton = () => {
|
||||
const onSearchButtonClick = () => {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
// showclearButton.value = true;
|
||||
sendQuery().then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
});
|
||||
if (searchTerm.value?.length) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// وقتی کاربر کلیدی فشار میدهد
|
||||
|
|
@ -304,6 +343,7 @@ const setType = (type: string) => {
|
|||
offset.value = 0;
|
||||
sendQuery().then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
});
|
||||
};
|
||||
// const setKey = (type: string) => {
|
||||
|
|
@ -344,6 +384,7 @@ const onTypeSelectChanged = (value: string) => {
|
|||
|
||||
sendQuery().then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -397,6 +438,7 @@ const prepareSynonym = () => {
|
|||
const onUpdateSwitch = () => {
|
||||
sendQuery(prepareSynonym()).then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
});
|
||||
};
|
||||
const onUpdateSubTitle = (subTitle) => {
|
||||
|
|
@ -404,6 +446,7 @@ const onUpdateSubTitle = (subTitle) => {
|
|||
|
||||
sendQuery(prepareSynonym()).then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
});
|
||||
};
|
||||
const onAddNewTitle = (subTitles) => {
|
||||
|
|
@ -415,6 +458,7 @@ const onAddNewTitle = (subTitles) => {
|
|||
|
||||
sendQuery(prepareSynonym()).then((res) => {
|
||||
loadedItems.value = res.hits.hits;
|
||||
showNoData.value = Boolean(loadedItems.value?.length);
|
||||
});
|
||||
};
|
||||
// #endregion methods
|
||||
|
|
@ -446,17 +490,14 @@ const SearchList = defineAsyncComponent(
|
|||
<div class="haditha-search-root-wrapper search-page">
|
||||
<div
|
||||
class="haditha-search-root"
|
||||
:class="{ 'no-backdrop': showPrevSearch }"
|
||||
:class="{ 'no-backdrop': route.query.f_aik?.length }"
|
||||
>
|
||||
<!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
|
||||
<div
|
||||
v-if="showPrevSearch"
|
||||
class="prev-search-item flex items-center"
|
||||
>
|
||||
<span class="total">۴۷ مشابه </span>
|
||||
<!-- v-if="route.query.f_aik?.length" -->
|
||||
<div v-if="false" class="prev-search-item flex items-center">
|
||||
<!-- <span class="total">۴۷ مشابه </span> -->
|
||||
<span class="text me-auto">
|
||||
عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
|
||||
قَالَ:
|
||||
{{ route.query.f_aik }}
|
||||
</span>
|
||||
<UButton
|
||||
icon="i-lucide:x"
|
||||
|
|
@ -469,9 +510,10 @@ const SearchList = defineAsyncComponent(
|
|||
|
||||
<!-- <client-only> -->
|
||||
<div class="search-input">
|
||||
<UInputMenu
|
||||
<!-- :items="<any>Array.from(userSearchHistory)" -->
|
||||
|
||||
<UInput
|
||||
class="w-full focus:placeholder-gray-800"
|
||||
:items="<any>Array.from(userSearchHistory)"
|
||||
v-model="searchTerm"
|
||||
v-model:open="open"
|
||||
v-model:search-term="searchTerm"
|
||||
|
|
@ -495,13 +537,16 @@ const SearchList = defineAsyncComponent(
|
|||
<!-- @keydown="onKeyDown" -->
|
||||
<!-- @update:modelValue="onUpdateModel" -->
|
||||
<!-- @update:searchTerm="onUpdateModel" -->
|
||||
</UInputMenu>
|
||||
</UInput>
|
||||
</div>
|
||||
<!-- 'similar-mode': route.query.f_aik?.length, -->
|
||||
<UButton
|
||||
class="my-trailing-button"
|
||||
:class="{ 'close-mode': showclearButton }"
|
||||
@click.prevent="handleSearchClearButton"
|
||||
icon="i-haditha-search"
|
||||
:class="{
|
||||
'close-mode': searchTerm.length,
|
||||
}"
|
||||
@click.prevent="onSearchButtonClick"
|
||||
:icon="searchButtonIcon"
|
||||
>
|
||||
<!-- <UIcon name="i-lucide-search" /> -->
|
||||
</UButton>
|
||||
|
|
@ -509,7 +554,7 @@ const SearchList = defineAsyncComponent(
|
|||
</div>
|
||||
<div
|
||||
class="search-filter flex items-center my-3 justify-between"
|
||||
v-if="searchTerm.length"
|
||||
v-if="showNoData"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- #region معنایی -->
|
||||
|
|
@ -737,7 +782,7 @@ const SearchList = defineAsyncComponent(
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="searchTerm?.length == 0 && loadedItems?.length == 0"
|
||||
v-if="!showNoData"
|
||||
class="flex justify-center flex-col items-center mt-10"
|
||||
>
|
||||
<img
|
||||
|
|
@ -754,7 +799,7 @@ const SearchList = defineAsyncComponent(
|
|||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="searchTerm?.length && loadedItems?.length"
|
||||
v-show="showNoData"
|
||||
class="search-box-container pb-0 bg-white flex justify-center"
|
||||
>
|
||||
<div class="search-list-contianer">
|
||||
|
|
@ -763,6 +808,7 @@ const SearchList = defineAsyncComponent(
|
|||
نتیجه
|
||||
</div>
|
||||
|
||||
<!-- v-show="!loading" -->
|
||||
<div ref="el" class="search-list firefox-scrollbar">
|
||||
<search-list
|
||||
no-data-text="نتیجهای یافت نشد!"
|
||||
|
|
@ -771,16 +817,22 @@ const SearchList = defineAsyncComponent(
|
|||
:list="loadedItems"
|
||||
:searchTerm="searchTerm"
|
||||
></search-list>
|
||||
|
||||
<!-- <no-data
|
||||
class="h-full w-full flex flex-col justify-center items-center"
|
||||
v-if="showNoData"
|
||||
>
|
||||
<img fit="auto" quality="80" src="/img/haditha/no-data.png" />
|
||||
<p class="no-data-text">"نتیجهای یافت نشد!</p>
|
||||
</no-data> -->
|
||||
</div>
|
||||
|
||||
<!-- <the-content-loading
|
||||
v-show="loading"
|
||||
class="absolute-positioning"
|
||||
></the-content-loading> -->
|
||||
</div>
|
||||
</div>
|
||||
<no-data
|
||||
class="h-full w-full flex flex-col justify-center items-center"
|
||||
v-else
|
||||
>
|
||||
<img fit="auto" quality="80" src="/img/haditha/no-data.png" />
|
||||
<p class="no-data-text">"نتیجهای یافت نشد!</p>
|
||||
</no-data>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -801,7 +853,7 @@ const SearchList = defineAsyncComponent(
|
|||
|
||||
.title {
|
||||
margin-top: 3.5em;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0%;
|
||||
|
|
@ -832,14 +884,17 @@ const SearchList = defineAsyncComponent(
|
|||
}
|
||||
|
||||
.search-list-contianer {
|
||||
max-width: 41em; /*656px*/
|
||||
position: relative;
|
||||
/*max-width: 41em;656px*/
|
||||
max-width: 75em; /*1200px*/
|
||||
|
||||
width: 100%;
|
||||
margin: 0 1em;
|
||||
|
||||
.total {
|
||||
padding: 0.5em 1.8em;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem; /*11px*/
|
||||
line-height: 1rem;
|
||||
|
|
@ -916,7 +971,7 @@ const SearchList = defineAsyncComponent(
|
|||
padding: 5px 7px;
|
||||
background: #1b213266;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
|
|
@ -925,7 +980,7 @@ const SearchList = defineAsyncComponent(
|
|||
color: #ffffff;
|
||||
}
|
||||
.text {
|
||||
font-family: Takrim;
|
||||
font-family: var(--ar-font);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
|
|
@ -974,6 +1029,10 @@ const SearchList = defineAsyncComponent(
|
|||
margin: auto;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.similar-mode {
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
|
||||
|
|
@ -990,13 +1049,7 @@ const SearchList = defineAsyncComponent(
|
|||
); */
|
||||
}
|
||||
}
|
||||
.close-mode {
|
||||
background: #f0f1f4;
|
||||
color: #000; /* رنگ خاکستری */
|
||||
&:hover {
|
||||
background: #e0e0e0; /* رنگ خاکستری */
|
||||
}
|
||||
}
|
||||
|
||||
.haditha-search-input {
|
||||
z-index: 0;
|
||||
|
||||
|
|
@ -1013,7 +1066,7 @@ const SearchList = defineAsyncComponent(
|
|||
border: 0.3px solid #e0e0e0;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
|
|
@ -1036,7 +1089,7 @@ const SearchList = defineAsyncComponent(
|
|||
border: 0.3px solid #e0e0e0;
|
||||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||||
color: #8a92a8;
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
|
|
@ -1070,6 +1123,15 @@ const SearchList = defineAsyncComponent(
|
|||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.close-mode {
|
||||
background: #f0f1f4;
|
||||
color: #000; /* رنگ خاکستری */
|
||||
|
||||
&:hover {
|
||||
background: #e0e0e0; /* رنگ خاکستری */
|
||||
}
|
||||
}
|
||||
}
|
||||
.haditha-search-input {
|
||||
height: 56px;
|
||||
|
|
@ -1094,7 +1156,7 @@ const SearchList = defineAsyncComponent(
|
|||
|
||||
.synonymItem {
|
||||
.title {
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
|
|
@ -1118,7 +1180,7 @@ const SearchList = defineAsyncComponent(
|
|||
border: 0.3px solid #d9d9d9;
|
||||
background: #f0f1f4;
|
||||
|
||||
font-family: IRANSansX;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user