Added servant and turns to TA collection

This commit is contained in:
Firq 2023-03-16 17:25:45 +01:00
parent 65032859a0
commit 7b194c844e
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 172 additions and 47 deletions
src/components

View file

@ -5,9 +5,11 @@ export interface Props {
link: string
image: string
user?: string
ta_servant?: string
turns?: string
}
const { user, date, image, link, title } = Astro.props
const { turns, ta_servant, user, date, image, link, title } = Astro.props
const options_date: Intl.DateTimeFormatOptions = {
year: 'numeric',
@ -17,6 +19,7 @@ const options_date: Intl.DateTimeFormatOptions = {
const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
const icon: string = `background: url('/assets/ta_icons/${image}.webp')`
const servant: string = `/assets/ta_icons/ta_servants/${ta_servant}.webp`
let hasuser = ''
if (user !== undefined) {
@ -26,7 +29,7 @@ if (user !== undefined) {
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<div style={icon}>
<div class="icon" style={icon}>
<span>
<h2>{title}</h2>
</span>
@ -37,6 +40,10 @@ if (user !== undefined) {
</span>
{formatted_date}
</p>
<div class="expand-on-hover">
<img src={servant} alt="" />
<h2>{turns}</h2>
</div>
</article>
</a>
@ -62,14 +69,14 @@ if (user !== undefined) {
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
article > .icon {
width: 128px;
height: 128px;
object-fit: cover;
object-position: 0% 0%;
}
article:hover div span {
article:hover .icon span {
padding: 0.5rem 0.5rem;
display: flex;
align-items: center;
@ -94,11 +101,11 @@ if (user !== undefined) {
display: none;
}
article div span {
article .icon span {
display: none;
}
div {
.icon {
display: flex;
justify-content: center;
align-items: center;
@ -119,4 +126,37 @@ if (user !== undefined) {
flex-wrap: wrap;
flex-direction: column;
}
.expand-on-hover {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
background-color: var(--c-duskgray);
z-index: 99;
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 95%;
left: 0px;
right: 0px;
color: white;
}
.expand-on-hover img {
width: 3rem;
height: 3rem;
margin: 0.5rem;
}
.expand-on-hover h2 {
margin: 0.5rem;
}
article:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: var(--c-duskgray);
}
</style>