111 lines
1.6 KiB
Vue
111 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="avatar noshrink">
|
||
|
|
<img
|
||
|
|
:src="getPath(avatar, 'thumbnail')"
|
||
|
|
class="avatar-image"
|
||
|
|
>
|
||
|
|
|
||
|
|
<span
|
||
|
|
class="avatar-credit"
|
||
|
|
title="Credit"
|
||
|
|
>{{ avatar.credit }}</span>
|
||
|
|
|
||
|
|
<span class="avatar-meta">
|
||
|
|
<span title="Dimensions">{{ avatar.width }}x{{ avatar.height }}</span>
|
||
|
|
<span title="Sharpness">{{ avatar.sharpness.toFixed(2) }}</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<a
|
||
|
|
:href="getPath(avatar)"
|
||
|
|
target="_blank"
|
||
|
|
class="avatar-zoom"
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
icon="search"
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import getPath from '#/src/get-path.js';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
avatar: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.avatar {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border: solid 2px transparent;
|
||
|
|
border-radius: .35rem;
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||
|
|
margin: 2px; /* clear outline */
|
||
|
|
font-size: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
border: solid 2px var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
/*
|
||
|
|
.avatar-meta,
|
||
|
|
.avatar-credit {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
fill: var(--text-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-image {
|
||
|
|
height: 10rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-zoom {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 10;
|
||
|
|
padding: .25rem;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
fill: var(--highlight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-meta,
|
||
|
|
.avatar-credit {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 10;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: .15rem .25rem;
|
||
|
|
font-size: .7rem;
|
||
|
|
color: var(--text-light);
|
||
|
|
text-shadow: 1px 1px 0 var(--shadow-strong-30);
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-meta {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-credit {
|
||
|
|
bottom: .75rem;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
</style>
|