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

fix: minor UI and CSS fixes

Browse source
This commit is contained in:
ThaUnknown 2025-04-26 01:51:18 +02:00
parent e10fef4b3d
commit 6c4be388a2
No known key found for this signature in database
13 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -95,7 +95,7 @@
html,
body {
height: 100vh;
height: 100vh !important;
width: 100%;
margin: 0;
padding: 0;

2
src/app.html
View file

@ -8,7 +8,7 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="off" class="bg-transparent relative" data-vaul-drawer-wrapper>
<body data-sveltekit-preload-data="off" class="!bg-transparent !relative" data-vaul-drawer-wrapper>
%sveltekit.body%
</body>

13
src/lib/components/Shadow.svelte
View file

@ -3,8 +3,21 @@
export let html = ''
let root: ShadowRoot | undefined
const style = new CSSStyleSheet()
style.replaceSync(/* css */`
p {
margin-block-start: .5em;
margin-block-end: .5em;
}
img {
max-width: 100%;
-webkit-user-drag: none;
}`)
function shadow (node: HTMLDivElement, html: string) {
root ??= node.attachShadow({ mode: 'closed' })
root.adoptedStyleSheets = [style]
root.innerHTML = dompurify.sanitize(html)
}

2
src/lib/components/ui/drawer/drawer-content.svelte
View file

@ -7,7 +7,7 @@
type $$Props = DrawerPrimitive.ContentProps
let className: $$Props['class'] = ''
let className: $$Props['class'] = undefined
export { className as class }
</script>

4
src/lib/components/ui/drawer/drawer-description.svelte
View file

@ -5,8 +5,8 @@
type $$Props = DrawerPrimitive.DescriptionProps
export let el: $$Props['el']
let className: $$Props['class'] = ''
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>

4
src/lib/components/ui/drawer/drawer-footer.svelte
View file

@ -7,8 +7,8 @@
el?: HTMLDivElement
}
export let el: $$Props['el']
let className: $$Props['class'] = ''
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>

4
src/lib/components/ui/drawer/drawer-header.svelte
View file

@ -6,8 +6,8 @@
type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement
}
export let el: $$Props['el']
let className: $$Props['class'] = ''
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>

4
src/lib/components/ui/drawer/drawer-overlay.svelte
View file

@ -5,8 +5,8 @@
type $$Props = DrawerPrimitive.OverlayProps
export let el: $$Props['el']
let className: $$Props['class'] = ''
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>

4
src/lib/components/ui/drawer/drawer-title.svelte
View file

@ -5,8 +5,8 @@
type $$Props = DrawerPrimitive.TitleProps
export let el: $$Props['el']
let className: $$Props['class'] = ''
export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined
export { className as class }
</script>

2
src/lib/utils.ts
View file

@ -115,6 +115,7 @@ export function since (date: Date) {
return formatter.format(Math.round(delta), key)
}
}
return 'now'
}
export function eta (date: Date) {
const secondsElapsed = (date.getTime() - Date.now()) / 1000
@ -125,6 +126,7 @@ export function eta (date: Date) {
return formatterShort.format(Math.round(delta), key)
}
}
return 'now'
}
const bytes = [' B', ' kB', ' MB', ' GB', ' TB']
export function fastPrettyBytes (num: number) {

2
src/routes/app/anime/[id]/+layout.svelte
View file

@ -51,7 +51,7 @@
</script>
<div class='min-w-0 -ml-14 pl-14 grow items-center flex flex-col h-full overflow-y-auto z-10 pointer-events-none pb-10' use:dragScroll on:scroll={handleScroll}>
<div class='gap-6 w-full pt-4 md:pt-32 flex flex-col items-center justify-center max-w-[1600px] px-3 xl:px-14 pointer-events-auto'>
<div class='gap-6 w-full pt-4 md:pt-32 flex flex-col items-center justify-center max-w-[1600px] px-3 xl:px-14 pointer-events-auto overflow-x-clip'>
<div class='flex flex-col md:flex-row w-full items-center md:items-end gap-5 pt-12'>
<Dialog.Root portal='#root'>
<Dialog.Trigger class='shrink-0 w-[180px] h-[256px] rounded overflow-hidden relative group focus-visible:ring-1 focus-visible:ring-ring select:scale-[1.02] transition-transform duration-200'>

2
src/routes/app/anime/[id]/+layout.ts
View file

@ -5,7 +5,7 @@ import { IDMedia } from '$lib/modules/anilist/queries'
import { episodes } from '$lib/modules/anizip'
export const load: LayoutLoad = async ({ params, fetch }) => {
const store = asyncStore(IDMedia, { id: Number(params.id) })
const store = asyncStore(IDMedia, { id: Number(params.id) }, { requestPolicy: 'cache-first' })
const eps = await episodes(Number(params.id), fetch)

14
src/routes/app/anime/[id]/+page.svelte
View file

@ -1,9 +1,6 @@
<script lang='ts'>
import { onDestroy } from 'svelte'
import type { PageData } from './$types'
import { bannerSrc, hideBanner } from '$lib/components/ui/banner'
import { Button } from '$lib/components/ui/button'
import { dragScroll } from '$lib/modules/navigate'
import { format, relation } from '$lib/modules/anilist'
@ -14,13 +11,6 @@
export let data: PageData
const oldBanner = bannerSrc.value
$: bannerSrc.value = data.anime.value.Media
hideBanner.value = false
onDestroy(() => {
bannerSrc.value = oldBanner
})
$: anime = data.anime
$: media = $anime.Media!
@ -66,7 +56,7 @@
</div>
</div>
{/if}
<div class='w-full'>
<div class='w-full flex flex-col'>
<div class='flex justify-between items-center'>
<div class='text-[20px] md:text-2xl font-bold'>Episodes</div>
</div>
@ -74,7 +64,7 @@
<EpisodesList {media} {eps} {following} />
{/key}
</div>
<div class='w-full'>
<div class='w-full flex flex-col'>
<div class='flex justify-between items-center'>
<div class='text-[20px] md:text-2xl font-bold'>Threads</div>
</div>