diff options
| -rw-r--r-- | src/lib/Collapsible.svelte | 17 | ||||
| -rw-r--r-- | src/lib/ListItemWithIcon.svelte | 9 | ||||
| -rw-r--r-- | src/lib/layout/Loader.svelte | 2 | ||||
| -rw-r--r-- | src/lib/minecraft/inventory.ts | 1 | ||||
| -rw-r--r-- | src/lib/sections/Collections.svelte | 2 |
5 files changed, 24 insertions, 7 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte index f3a28d2..867117d 100644 --- a/src/lib/Collapsible.svelte +++ b/src/lib/Collapsible.svelte @@ -3,15 +3,28 @@ Non-JS collapsible content. --> +<script lang="ts"> + let open: boolean +</script> -<details> +<details bind:open> <summary> <slot name="title"> <h2>Details</h2> </slot> </summary> <div> - <slot /> + <!-- + We do this so images inside the content are not loaded until it's + open. The browser (only tested on FF) doesn't handle this, although + it probably should. + --> + <noscript> + <slot /> + </noscript> + {#if open} + <slot /> + {/if} </div> </details> diff --git a/src/lib/ListItemWithIcon.svelte b/src/lib/ListItemWithIcon.svelte index 2c7aade..7666c18 100644 --- a/src/lib/ListItemWithIcon.svelte +++ b/src/lib/ListItemWithIcon.svelte @@ -1,8 +1,10 @@ <script lang="ts"> export let url: string + export let alt: string | undefined = undefined </script> -<li class="list-item-with-icon" style="background: url({url}) 0 0/1em no-repeat"> +<li class="list-item-with-icon"> + <img class="list-item-icon" src={url} {alt} loading="lazy" /> <slot /> </li> @@ -12,7 +14,12 @@ padding-left: 1.2em; position: relative; right: 1.2em; + } + .list-item-icon { image-rendering: crisp-edges; image-rendering: pixelated; + height: 1em; + position: absolute; + margin-left: -1.2em; } </style> diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte index 524d975..901a780 100644 --- a/src/lib/layout/Loader.svelte +++ b/src/lib/layout/Loader.svelte @@ -5,7 +5,6 @@ let opacity = 1 function navigationStart() { - console.log('navigation start') widthTransitionDuration = 0 opacity = 1 progress = 0 @@ -15,7 +14,6 @@ }) } function navigationEnd() { - console.log('navigation end', widthTransitionDuration) opacity = 0 setTimeout(() => { widthTransitionDuration = 0 diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts index 7b35f0e..161c70a 100644 --- a/src/lib/minecraft/inventory.ts +++ b/src/lib/minecraft/inventory.ts @@ -60,7 +60,6 @@ export function itemToUrl(item: Item, packName?: string): string { export function skyblockItemToUrl(skyblockItemName: string) { const item = skyblockItemNameToItem(skyblockItemName) - console.log(skyblockItemName, item) const itemTextureUrl = itemToUrl(item, 'packshq') return itemTextureUrl } diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte index 2e03d3f..9624ec2 100644 --- a/src/lib/sections/Collections.svelte +++ b/src/lib/sections/Collections.svelte @@ -21,7 +21,7 @@ <h3>{cleanId(categoryName)}</h3> <ul> {#each collections as collection} - <ListItemWithIcon url={skyblockItemToUrl(collection.name)}> + <ListItemWithIcon url={skyblockItemToUrl(collection.name)} alt={cleanId(collection.name)}> <Tooltip> <span slot="tooltip"> Amount: {collection.xp.toLocaleString()} |