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

ریسپانسیو

Browse Source
This commit is contained in:
Mehdi104797 2025-04-19 10:06:07 +03:30
parent c4495245b2
commit 74542bbb12
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/haditha/CardList.vue
View File

@ -33,6 +33,7 @@ const goToLibraryShow = (item) => {
<UCard <UCard
v-if="props.list?.length" v-if="props.list?.length"
v-for="(item, index) in props.list" v-for="(item, index) in props.list"
class="mx-auto"
:key="index" :key="index"
variant="solid" variant="solid"
:ui="{ :ui="{

19
pages/haditha/library/index.vue
View File

@ -120,7 +120,10 @@ const CardList = defineAsyncComponent(
<img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" /> <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
</div> </div>
<div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12"> <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"
>
<!-- Client-side loaded content --> <!-- Client-side loaded content -->
<card-list <card-list
v-if="loadedItems.length" v-if="loadedItems.length"
@ -148,6 +151,7 @@ const CardList = defineAsyncComponent(
background: #f7fffd; background: #f7fffd;
.library-list-contianer { .library-list-contianer {
height: 100%;
margin-top: 10em; margin-top: 10em;
max-width: 1200px; max-width: 1200px;
width: 100%; width: 100%;
@ -186,9 +190,18 @@ const CardList = defineAsyncComponent(
} }
} }
@media screen and (max-width: 719.99px) { @media screen and (max-width: 991.99px) {
.search-box-container { .search-box-container {
padding-top: 0em; padding-top: 0em;
} }
.library-list {
height: calc(100dvh - 13em);
}
.page-header {
margin-top: 4em;
margin-right: 2em;
margin-bottom: 1em;
}
} }
</style> </style>