Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-20 07:12:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: banner issues

Browse source
This commit is contained in:
ThaUnknown 2024-03-20 18:43:48 +01:00
parent e43b55549b
commit 777794d488
3 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
common/components/banner/Banner.svelte
View file

@ -3,12 +3,6 @@
import SkeletonBanner from './SkeletonBanner.svelte'
export let data
/**
* Shuffles array in place.
* @template T
* @param {T[]} array items An array containing the items.
* @returns {T[]}
*/
function shuffle (array) {
let currentIndex = array.length
let randomIndex
@ -21,13 +15,17 @@
return array
}
function shuffleAndFilter (media) {
return shuffle(media).filter(media => media.bannerImage || media.trailer?.id).slice(0, 5)
}
</script>
<div class='w-full h-450 position-relative gradient'>
{#await data}
<SkeletonBanner />
{:then { data }}
<FullBanner mediaList={shuffle(data.Page.media).slice(0, 5)} />
<FullBanner mediaList={shuffleAndFilter(data.Page.media)} />
{/await}
</div>

10
common/components/banner/FullBanner.svelte
View file

@ -44,10 +44,10 @@
</script>
{#key current}
<img src={current.bannerImage || ''} alt='banner' class='img-cover w-full h-full position-absolute' />
<img src={current.bannerImage || `https://i.ytimg.com/vi/${current.trailer?.id}/maxresdefault.jpg` || ''} alt='banner' class='img-cover w-full h-full position-absolute' />
{/key}
<div class='pl-20 pb-20 justify-content-end d-flex flex-column h-full banner mw-full '>
<div class='text-white font-weight-bold font-size-40 title w-700 mw-full overflow-hidden'>
<div class='text-white font-weight-bold font-size-40 title w-800 mw-full overflow-hidden'>
{current.title.userPreferred}
</div>
<div class='details text-white text-capitalize pt-15 pb-10 d-flex w-600 mw-full'>
@ -125,8 +125,8 @@
width: 100%;
}
}
.w-700 {
width: 70rem
.w-800 {
width: 80rem
}
.details span + span::before {
content: '•';
@ -143,7 +143,7 @@
}
.title {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
img {

2
common/views/Home/Home.svelte
View file

@ -3,7 +3,7 @@
import { alToken, settings } from '@/modules/settings.js'
import { anilistClient, currentSeason, currentYear } from '@/modules/anilist.js'
const bannerData = anilistClient.search({ method: 'Search', sort: 'POPULARITY_DESC', perPage: 15, onList: false, season: currentSeason, year: currentYear })
const bannerData = anilistClient.search({ method: 'Search', sort: 'POPULARITY_DESC', perPage: 25, onList: false, season: currentSeason, year: currentYear })
const manager = new SectionsManager()