From 9b3dc36ba928caed2bc9b4423c4d81190418c940 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Wed, 30 Dec 2020 21:13:52 -0600
Subject: [PATCH] Add numbers to collection ebook grid

---
 templates/EbookGrid.php |  2 +-
 www/css/core.css        | 32 +++++++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/templates/EbookGrid.php b/templates/EbookGrid.php
index a1c05263..cfa7792e 100644
--- a/templates/EbookGrid.php
+++ b/templates/EbookGrid.php
@@ -21,7 +21,7 @@ if(!isset($ebooks)){
 		<? if($collection !== null){ ?>
 			<meta property="schema:position" content="<?= $ebook->GetCollectionPosition($collection) ?>"/>
 		<? } ?>
-		<a href="<?= $ebook->Url ?>" tabindex="-1" property="schema:url">
+		<a href="<?= $ebook->Url ?>" tabindex="-1" property="schema:url"<? if($collection !== null){ ?> data-ordinal="<?= $ebook->GetCollectionPosition($collection) ?>"<? } ?>>
 			<picture>
 				<? if($ebook->CoverImage2xAvifUrl !== null){ ?><source srcset="<?= $ebook->CoverImage2xAvifUrl ?> 2x, <?= $ebook->CoverImageAvifUrl ?> 1x" type="image/avif"/><? } ?>
 				<source srcset="<?= $ebook->CoverImage2xUrl ?> 2x, <?= $ebook->CoverImageUrl ?> 1x" type="image/jpg"/>
diff --git a/www/css/core.css b/www/css/core.css
index ccb96ac2..baeb9e4e 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -1113,12 +1113,39 @@ main.ebooks > ol.list > li p{
 	text-align: left;
 }
 
-main.ebooks > ol img:hover{
+main.ebooks > ol a[tabindex]{
+	display: inline-block;
+	transition: all .2s ease;
+	position: relative;
+	font-size: 0;
+}
+
+main.ebooks > ol a[tabindex][data-ordinal]::before{
+	display: block;
+	content: "№ "attr(data-ordinal);
+	position: absolute;
+	background: rgba(0, 0, 0, .75);
+	padding: .5rem;
+	border-radius: .25rem;
+	line-height: 1;
+	font-variant-numeric: normal;
+	left: calc(.25rem + 3px); /* align with title box in picture */
+	top: calc(.25rem + 3px);
+	font-size: .75rem;
+	font-weight: bold;
+	font-family: "League Spartan", sans-serif;
+}
+
+main.ebooks > ol a[tabindex]:hover{
 	transform: scale(1.05);
+	color: unset;
+}
+
+main.ebooks > ol a[tabindex]:hover img{
 	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
 }
 
-main.ebooks > ol > li a:active img{
+main.ebooks > ol > li a[tabindex]:active{
 	transform: scale(1.025);
 	transition: none;
 	box-shadow: none;
@@ -1136,7 +1163,6 @@ main.ebooks > ol > li img{
 	max-width: 100%;
 	border: 1px solid var(--border);
 	border-radius: .25rem;
-	transition: all .2s ease;
 }
 
 main.ebooks > ol > li > p:nth-of-type(1) > a{