Tweak some styles

This commit is contained in:
Alex Cabal 2022-06-20 14:31:07 -05:00
parent 70a80d0e02
commit 7fb985e0c4
3 changed files with 29 additions and 28 deletions

View file

@ -17,13 +17,15 @@ $ebooks = $ebooks ?? [];
<? if($collection !== null && $ebook->GetCollectionPosition($collection) !== null){ ?>
<meta property="schema:position" content="<?= $ebook->GetCollectionPosition($collection) ?>"/>
<? } ?>
<a href="<?= $ebook->Url ?>" tabindex="-1" property="schema:url"<? if($collection !== null && $ebook->GetCollectionPosition($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"/>
<img src="<?= $ebook->CoverImage2xUrl ?>" alt="The cover for the Standard Ebooks edition of <?= Formatter::ToPlainText(strip_tags($ebook->TitleWithCreditsHtml)) ?>" property="schema:image" height="335" width="224"/>
</picture>
</a>
<div class="thumbnail-container"><? /* We need a container in case the thumb is shorter than the description, so that the focus outline doesn't take up the whole grid space */ ?>
<a href="<?= $ebook->Url ?>" tabindex="-1" property="schema:url"<? if($collection !== null && $ebook->GetCollectionPosition($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"/>
<img src="<?= $ebook->CoverImage2xUrl ?>" alt="The cover for the Standard Ebooks edition of <?= Formatter::ToPlainText(strip_tags($ebook->TitleWithCreditsHtml)) ?>" property="schema:image" height="335" width="224"/>
</picture>
</a>
</div>
<p><a href="<?= $ebook->Url ?>" property="schema:url"><span property="schema:name"><?= Formatter::ToPlainText($ebook->Title) ?></span></a></p>
<? if($view == VIEW_GRID){ ?>
<? foreach($ebook->Authors as $author){ ?>

View file

@ -1236,11 +1236,11 @@ ol.ebooks-list.list > li + li {
margin-top: 2rem;
}
ol.ebooks-list.list > li > a{
ol.ebooks-list.list > li .thumbnail-container{
grid-row: 1 / span 3;
}
.opds ol.ebooks-list.list > li > a{
.opds ol.ebooks-list.list > li .thumbnail-container{
grid-row: 1 / span 5;
}
@ -1326,7 +1326,7 @@ ol.ebooks-list.list > li > p:nth-of-type(1) > a{
display: inline;
}
ol.ebooks-list > li > a:first-child{
ol.ebooks-list > li .thumbnail-container > a:first-child{
font-size: 0; /* for correct focus outline */
}
@ -1403,20 +1403,17 @@ ul.tags{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: .5rem;
gap: 1rem;
margin-top: 1rem;
}
.rss ul.tags{
justify-content: flex-start;
margin: 0;
margin: .5rem auto;
}
ul.tags li{
margin: .5rem;
}
ul.tags li:first-child{
margin: .5rem;
margin: 0;
}
ul.tags li a,

View file

@ -33,16 +33,18 @@ print("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n")
<ol class="ebooks-list list">
<xsl:for-each select="/atom:feed/atom:entry[./atom:link[@rel='http://opds-spec.org/acquisition/open-access']]">
<li>
<a tabindex="-1">
<xsl:attribute name="href">
<xsl:value-of select="atom:link[@rel='related']/@href"/>
</xsl:attribute>
<img alt="The cover for the Standard Ebooks edition of Winnie-the-Pooh, by A. A. Milne" width="224" height="335">
<xsl:attribute name="src">
<xsl:value-of select="atom:link[@rel='http://opds-spec.org/image/thumbnail']/@href"/>
</xsl:attribute>
</img>
</a>
<div class="thumbnail-container">
<a tabindex="-1">
<xsl:attribute name="href">
<xsl:value-of select="atom:link[@rel='related']/@href"/>
</xsl:attribute>
<img alt="The cover for the Standard Ebooks edition of Winnie-the-Pooh, by A. A. Milne" width="224" height="335">
<xsl:attribute name="src">
<xsl:value-of select="atom:link[@rel='http://opds-spec.org/image/thumbnail']/@href"/>
</xsl:attribute>
</img>
</a>
</div>
<p>
<a>
<xsl:attribute name="href">
@ -68,7 +70,7 @@ print("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n")
<xsl:value-of select="atom:summary"/>
</p>
</div>
<p class="download">Download</p>
<p class="download">Read</p>
<ul>
<xsl:for-each select="atom:link[@rel='http://opds-spec.org/acquisition/open-access']">
<li>