Add styling for cards of cats that passed away

This commit is contained in:
Maciej Pędzich 2023-09-05 19:57:38 +02:00
parent 00d9590088
commit e520b7dd99
2 changed files with 24 additions and 1 deletions

View File

@ -10,7 +10,7 @@ const { cat } = Astro.props;
<a class="card-link-wrapper" href={`/cats/${cat.id}`}> <a class="card-link-wrapper" href={`/cats/${cat.id}`}>
<div class="card is-center"> <div class="card is-center">
<div class="img-wrapper"> <div class:list={['img-wrapper', { 'passed-away': cat.data.passedAway }]}>
<img <img
src={cat.data.image.src} src={cat.data.image.src}
alt={cat.data.image.alt} alt={cat.data.image.alt}
@ -19,6 +19,7 @@ const { cat } = Astro.props;
width="350" width="350"
height="250" height="250"
/> />
{cat.data.passedAway && <span class="rip">Rest In Peace</span>}
</div> </div>
<h3>{cat.data.name}</h3> <h3>{cat.data.name}</h3>
<p>{cat.data.owner.name}</p> <p>{cat.data.owner.name}</p>
@ -60,6 +61,8 @@ const { cat } = Astro.props;
} }
.img-wrapper { .img-wrapper {
position: relative;
overflow: hidden;
width: 100%; width: 100%;
padding: 2rem; padding: 2rem;
padding-bottom: 0.6rem; padding-bottom: 0.6rem;
@ -70,4 +73,20 @@ const { cat } = Astro.props;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
.passed-away > img {
filter: grayscale(100%);
}
.card span.rip {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 4rem);
margin: 0 2rem;
padding: 0.2rem;
background-color: #000;
text-align: center;
}
</style> </style>

View File

@ -58,6 +58,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
Some ideas: nicknames, age, breed(s), where you adopted this cat Some ideas: nicknames, age, breed(s), where you adopted this cat
</small> </small>
</div> </div>
<div>
<label for="passedAway">Check this box if your cat has passed away</label>
<input type="checkbox" name="passedAway" />
</div>
<div> <div>
<label for="name">Owner's name</label> <label for="name">Owner's name</label>
<input type="text" name="ownerName" required /> <input type="text" name="ownerName" required />