forked from didirus/AstralRinth
2d416d491c
* New project page * fix silly icon tailwind classes * Start new versions page, add new ButtonStyled component * Pagination and finish mocking up versions page functionality * green download button * hover animation * New Modal, Avatar refactor, subpages in NavTabs * lint * Download modal * New user page + fix lint * fix ui lint * Download animation fix * Versions filter + finish project page * Improve consistency of buttons on home page * Fix ButtonStyled breaking * Fix margin on version summary * finish search, new modals, user + project page mobile * fix gallery image pages * New project header * Fix gallery tab showing improperly * Use auto direction + position for all popouts * Preliminary user page * test to see if this fixes login stuff * remove extra slash * Add version actions, move download button on versions page * Listed -> public * Shorten download modal selector height * Fix user menu open direction * Change breakpoint for header collapse * Only underline title * Tighten padding on stats a little * New nav * Make mobile breakpoint more consistent * fix header breakpoint regression * Add sign in button * Fix edit icon color * Fix margin at top of screen * Fix user bios and ad width * Fix user nav showing when there's only one type of project * Fix plural projects on user page & extract i18n * Remove ads on mobile for now * Fix overflow menu showing hidden items * NavTabs on mobile * Fix navbar z index * Search filter overhaul + negative filters * fix no-max-height * port version filters, fix following/collections, lint * hide promos * ui lint * Disable modal background animation to reduce reported motion sickness * Hide install with modrinth app button on mobile --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Prospector <prospectordev@gmail.com>
131 lines
2.4 KiB
Vue
131 lines
2.4 KiB
Vue
<template>
|
|
<img
|
|
v-if="src"
|
|
ref="img"
|
|
:style="`--_size: ${cssSize}`"
|
|
class="`experimental-styles-within avatar"
|
|
:class="{
|
|
circle: circle,
|
|
'no-shadow': noShadow,
|
|
raised: raised,
|
|
pixelated: raised,
|
|
}"
|
|
:src="src"
|
|
:alt="alt"
|
|
:loading="loading"
|
|
@load="updatePixelated"
|
|
/>
|
|
<svg
|
|
v-else
|
|
class="`experimental-styles-within avatar"
|
|
:style="`--_size: ${cssSize}`"
|
|
:class="{
|
|
circle: circle,
|
|
'no-shadow': noShadow,
|
|
raised: raised,
|
|
}"
|
|
xml:space="preserve"
|
|
fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-miterlimit="1.5"
|
|
clip-rule="evenodd"
|
|
viewBox="0 0 104 104"
|
|
aria-hidden="true"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup>
|
|
const pixelated = ref(false)
|
|
const img = ref(null)
|
|
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '2rem',
|
|
},
|
|
circle: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
noShadow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
loading: {
|
|
type: String,
|
|
default: 'eager',
|
|
},
|
|
raised: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const LEGACY_PRESETS = {
|
|
xxs: '1.25rem',
|
|
xs: '2.5rem',
|
|
sm: '3rem',
|
|
md: '6rem',
|
|
lg: '9rem',
|
|
}
|
|
|
|
const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
|
|
|
|
function updatePixelated() {
|
|
if (img.value && img.value.naturalWidth && img.value.naturalWidth <= 96) {
|
|
pixelated.value = true
|
|
} else {
|
|
pixelated.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.avatar {
|
|
@apply min-w-[--_size] min-h-[--_size] w-[--_size] h-[--_size];
|
|
--_size: 2rem;
|
|
|
|
border: 1px solid var(--color-button-border);
|
|
background-color: var(--color-button-bg);
|
|
object-fit: contain;
|
|
border-radius: calc(16 / 96 * var(--_size));
|
|
|
|
&.circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:not(.no-shadow) {
|
|
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
|
}
|
|
|
|
&.no-shadow {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.pixelated {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
&.raised {
|
|
background-color: var(--color-raised-bg);
|
|
}
|
|
}
|
|
</style>
|