adorthecool/pages
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix CheckBoxList SVG icons + Move docs source

Browse Source
This commit is contained in:
venashial
2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/package/components/Avatar.svelte
View File

@@ -1,58 +1,63 @@
<script lang="ts">
// TODO: Make square icon `md` more rounded
import { onMount } from 'svelte'
import { classCombine } from '../utils/classCombine'
import { onMount } from 'svelte';
import { classCombine } from '../utils/classCombine';
/** Optional, as a default icon will be substituted if no image was specified */
export let src: string | undefined
export let size: 'xs' | 'sm' | 'md' | 'lg'
export let circle = false
export let floatUp = false
export let src: string | undefined;
export let size: 'xs' | 'sm' | 'md' | 'lg';
export let circle = false;
export let floatUp = false;
let className: string;
$: className = classCombine(['avatar', circle && 'avatar--circle', `avatar--size-${size}`, floatUp && 'avatar--float-up'])
$: className = classCombine([
'avatar',
circle && 'avatar--circle',
`avatar--size-${size}`,
floatUp && 'avatar--float-up',
]);
let img
let img;
onMount(() => {
if (img && img.naturalWidth) {
const isPixelated = () => {
if (img.naturalWidth < 96 && img.naturalWidth > 0) {
img.style = 'image-rendering: pixelated;'
img.style = 'image-rendering: pixelated;';
}
}
};
if (img.naturalWidth) {
isPixelated()
isPixelated();
} else {
img.onload = isPixelated
img.onload = isPixelated;
}
}
})
});
</script>
{#if src}
<img {src} bind:this={img} class={className} alt=""/>
<img {src} bind:this={img} class={className} alt="" />
{:else}
<svg
class={className}
xml:space="preserve"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="1.5"
clip-rule="evenodd"
viewBox="0 0 104 104"
class={className}
xml:space="preserve"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="1.5"
clip-rule="evenodd"
viewBox="0 0 104 104"
>
<path fill="none" d="M0 0h103.4v103.4H0z"/>
<path fill="none" d="M0 0h103.4v103.4H0z" />
<path
fill="none"
stroke="#9a9a9a"
stroke-width="5"
d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
fill="none"
stroke="#9a9a9a"
stroke-width="5"
d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
/>
</svg>
</svg>
{/if}
<style lang="postcss">
@@ -67,21 +72,21 @@
&-xs {
--size: 2.25rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-sm {
--size: 3rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-md {
--size: 6rem;
border-radius: var(--rounded-lg);
}
&-lg {
--size: 9rem;
border-radius: var(--rounded-lg);
}
}