diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Emoji.svelte | 13 | ||||
| -rw-r--r-- | src/lib/minecraft/Inventory.svelte | 19 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 3 |
3 files changed, 20 insertions, 15 deletions
diff --git a/src/lib/Emoji.svelte b/src/lib/Emoji.svelte index 1869f37..4eee2ea 100644 --- a/src/lib/Emoji.svelte +++ b/src/lib/Emoji.svelte @@ -1,13 +1,8 @@ -<!-- - @component - - All the emojis inside the value will be turned into Twemojis. ---> <script lang="ts"> - // Interestingly, the comment above adds whitespace so we don't need to add - // padding before the emoji like we usually would. - // This is very likely a SvelteKit bug, so when it's fixed we should add - // `margin-left: .25em` to .profile-emoji + // All the emojis inside the value will be turned into Twemojis. + + // Note: We can't make an @component comment because SvelteKit is dumb and + // will replace the comment with whitespace import { twemojiHtml } from './utils' diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte index 3068f67..0a6a179 100644 --- a/src/lib/minecraft/Inventory.svelte +++ b/src/lib/minecraft/Inventory.svelte @@ -22,12 +22,19 @@ } </script> -<div class:inventory-container-{name}={name !== ''}> +<div class="inventory-container" style="--group-limit:{groupLimit}"> {#each itemGroups as itemGroup} - <div> - {#each itemGroup as item} - <Item {item} {pack} isslot /> - {/each} - </div> + {#each itemGroup as item} + <Item {item} {pack} isslot /> + {/each} {/each} </div> + +<style> + .inventory-container { + width: fit-content; + display: grid; + grid-template-columns: repeat(var(--group-limit), 1fr); + grid-gap: 0; + } +</style> diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index e31108b..928fc5d 100644 --- a/src/routes/player/[player]/[profile].svelte +++ b/src/routes/player/[player]/[profile].svelte @@ -146,6 +146,9 @@ </main> <style> + .profile-emoji { + display: inline; + } .profile-skills { display: inline-block; position: absolute; |