standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-15 10:56:46 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add status ribbons to artworks in artworks DB

Browse source
This commit is contained in:
Alex Cabal 2024-03-25 16:07:48 -05:00
parent 43d7b1f6e5
commit 74e672ba89
2 changed files with 104 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
templates/ArtworkList.php
View file

@ -3,7 +3,26 @@ $artworks = $artworks ?? [];
?>
<ol class="artwork-list">
<? foreach($artworks as $artwork){ ?>
<li<? if($artwork->EbookUrl !== null){ ?> class="in-use"<? } ?>>
<?
$class = '';
if($artwork->EbookUrl !== null){
$class .= ' in-use';
}
switch($artwork->Status){
case ArtworkStatus::Unverified:
$class .= ' unverified';
break;
case ArtworkStatus::Declined:
$class .= ' declined';
break;
}
$class = trim($class);
?>
<li<? if($class != ''){ ?> class="<?= $class ?>"<? } ?>>
<a href="<?= $artwork->Url ?>">
<picture>
<source srcset="<?= $artwork->Thumb2xUrl ?> 2x, <?= $artwork->ThumbUrl ?> 1x" type="image/jpg"/>

86
www/css/artwork.css
View file

@ -34,17 +34,99 @@ ol.artwork-list > li{
margin: 0;
}
ol.artwork-list > li.in-use{
ol.artwork-list > li.in-use,
ol.artwork-list > li.unverified,
ol.artwork-list > li.declined{
position: relative;
}
ol.artwork-list > li.in-use::before{
ol.artwork-list > li.in-use picture::before{
/* Stripes */
position: absolute;
content: "";
height: 100%;
width: 100%;
background-image: url("/images/stripes-xdark.svg");
pointer-events: none;
z-index: 0;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.declined::before,
ol.artwork-list > li.in-use a::before,
ol.artwork-list > li.unverified a::before,
ol.artwork-list > li.declined a::before{
/* Ribbon */
font-family: "League Spartan", sans-serif;
position: absolute;
left: -.5rem;
top: .5rem;
padding: .5rem 1rem .5rem .5rem;
line-height: 1;
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
text-transform: uppercase;
font-size: .5rem;
white-space: nowrap;
font-weight: bold;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
z-index: 2;
}
ol.artwork-list > li.in-use::after,
ol.artwork-list > li.unverified::after,
ol.artwork-list > li.declined::after{
/* Ribbon bottom wrap-around */
content: "";
position: absolute;
top: calc(.5rem + .5rem + .5rem + .5rem);
height: .5rem;
width: .5rem;
left: -.5rem;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
z-index: 1;
filter: brightness(50%);
}
ol.artwork-list > li.in-use a::before,
ol.artwork-list > li.unverified a::before,
ol.artwork-list > li.declined a::before{
/* Ribbon shadow */
left: calc(-.5rem + 2px);
top: calc(.5rem + 2px);
background: rgba(0, 0, 0, .4);
z-index: auto;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.in-use::after{
background: #424242;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.in-use a::before{
content: "In use";
}
ol.artwork-list > li.declined::before,
ol.artwork-list > li.declined::after{
background: #861d1d;
}
ol.artwork-list > li.declined::before,
ol.artwork-list > li.declined a::before{
content: "Declined";
}
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.unverified::after{
background: #383760;
}
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.unverified a::before{
content: "unverified";
}
ol.artwork-list > li a:has(img){