212bb33142
* Projects page * Continue work on bulk edit * editLinks is now bulkEdit * Bulk Edit Links completed * Edit URL clear fields. * Create project button + other bulk buttons. * Pagination (w/o reactivity.) * Apply suggestions from code review Co-authored-by: triphora <emmaffle@modrinth.com> * Sorting fixed, broken page count though? * Only make editable projects selectable + remove delete button * Shorthand * Start using computed * Fix pagination * Add Pagination Switching * Final Style Changes * Cleanup * Action Affects dropdown * Switch to checkbox swizzle * Projects dashboard, the most hellish thing I have ever worked on * Rewrite project dashboard without tables * why's that there * Fix mod message icon * New project settings page * Remove extra slash * Bulk project route and improve styling of links UI * Remove beta label from Monetization * Relevant page links in project settings * Don't vertically center header rows * Improve error messages, add remove project icon button, add saving feedback, begin project checklist, fix license settings * Remove contextual link from project settings, disable WIP checklist * Fix bulk edit * Project checklist, add featured gallery image to project pages, fix random bugs * Remove old check * Remove icon border on grid mode and hide project status card when unnecessary * Fix build * Make checklist progress smaller and add collapsing * Remove uneven gap on nav cards * Improve wrapping of checklist * Replace project settings header link with status * Fix bugs + status stuff * Fix warns + compile error * Update wording * Hide environment type nag for project types without it * Make member dropdown match Co-authored-by: mineblock11 <93472213+mineblock11@users.noreply.github.com> Co-authored-by: triphora <emmaffle@modrinth.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template>
|
|
<img
|
|
v-if="src"
|
|
ref="img"
|
|
:class="`avatar size-${size} ${circle ? 'circle' : ''} ${
|
|
noShadow ? 'no-shadow' : ''
|
|
}`"
|
|
:src="src"
|
|
:alt="alt"
|
|
:loading="loading"
|
|
/>
|
|
<svg
|
|
v-else
|
|
:class="`avatar size-${size} ${circle ? 'circle' : ''} ${
|
|
noShadow ? 'no-shadow' : ''
|
|
}`"
|
|
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>
|
|
export default {
|
|
name: 'Avatar',
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
alt: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'sm',
|
|
validator(value) {
|
|
return ['xs', 'sm', 'md', 'lg'].includes(value)
|
|
},
|
|
},
|
|
circle: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
noShadow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
loading: {
|
|
type: String,
|
|
default: 'eager',
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.$refs.img && this.$refs.img.naturalWidth) {
|
|
const isPixelated = () => {
|
|
if (
|
|
this.$refs.img.naturalWidth < 96 &&
|
|
this.$refs.img.naturalWidth > 0
|
|
) {
|
|
this.$refs.img.style.imageRendering = 'pixelated'
|
|
}
|
|
}
|
|
|
|
if (this.$refs.img.naturalWidth) {
|
|
isPixelated()
|
|
} else {
|
|
this.$refs.img.onload = isPixelated
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.avatar {
|
|
border-radius: var(--size-rounded-icon);
|
|
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
|
height: var(--size);
|
|
width: var(--size);
|
|
background-color: var(--color-button-bg);
|
|
object-fit: contain;
|
|
|
|
&.size-xs {
|
|
--size: 2.5rem;
|
|
box-shadow: var(--shadow-inset), var(--shadow-card);
|
|
border-radius: var(--size-rounded-sm);
|
|
}
|
|
|
|
&.size-sm {
|
|
--size: 3rem;
|
|
box-shadow: var(--shadow-inset), var(--shadow-card);
|
|
border-radius: var(--size-rounded-sm);
|
|
}
|
|
|
|
&.size-md {
|
|
--size: 6rem;
|
|
border-radius: var(--size-rounded-lg);
|
|
}
|
|
|
|
&.size-lg {
|
|
--size: 9rem;
|
|
border-radius: var(--size-rounded-lg);
|
|
}
|
|
|
|
&.circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.no-shadow {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|