reading: hide book-only stats on the papers/articles tabs, site letter on articles without an image
All checks were successful
Deploy production / deploy (push) Successful in 1m10s

This commit is contained in:
2026-10-25 13:48:05 +00:00
parent e31e1be73f
commit d6c5dde2c1
2 changed files with 37 additions and 24 deletions

View File

@@ -277,29 +277,31 @@
{/if} {/if}
{/if} {/if}
<dl class={['stats mb-10', kind !== 'book' && 'hidden']}> {#if kind === 'book'}
<div> <dl class="stats mb-10">
<dt>finished in {data.stats.year}</dt> <div>
<dd>{numberFormat.format(data.stats.finishedThisYear)}</dd> <dt>finished in {data.stats.year}</dt>
</div> <dd>{numberFormat.format(data.stats.finishedThisYear)}</dd>
<div> </div>
<dt>pages read in {data.stats.year}</dt> <div>
<dd>{numberFormat.format(data.stats.pagesThisYear)}</dd> <dt>pages read in {data.stats.year}</dt>
</div> <dd>{numberFormat.format(data.stats.pagesThisYear)}</dd>
<div> </div>
<dt>currently reading</dt> <div>
<dd>{data.stats.reading}</dd> <dt>currently reading</dt>
</div> <dd>{data.stats.reading}</dd>
<div> </div>
<dt>in the library</dt> <div>
<dd> <dt>in the library</dt>
{numberFormat.format(data.stats.total)} <dd>
{#if placeholders}<small title="Books without a file yet" {numberFormat.format(data.stats.total)}
>{placeholders} placeholder{placeholders === 1 ? '' : 's'}</small {#if placeholders}<small title="Books without a file yet"
>{/if} >{placeholders} placeholder{placeholders === 1 ? '' : 's'}</small
</dd> >{/if}
</div> </dd>
</dl> </div>
</dl>
{/if}
{#if reading.length && !filtering} {#if reading.length && !filtering}
<section class="mb-12" aria-labelledby="now-reading"> <section class="mb-12" aria-labelledby="now-reading">

View File

@@ -126,7 +126,9 @@
<aside class="side"> <aside class="side">
{#if isArticle} {#if isArticle}
<div class="article-image" style:--hue={coverHue(book.site ?? book.title)}> <div class="article-image" style:--hue={coverHue(book.site ?? book.title)}>
{#if book.cover}<img src={book.cover} alt="" referrerpolicy="no-referrer" />{/if} {#if book.cover}<img src={book.cover} alt="" referrerpolicy="no-referrer" />{:else}<span
class="article-letter">{(book.site ?? book.title).charAt(0).toUpperCase()}</span
>{/if}
</div> </div>
{:else} {:else}
<div class="cover-box"> <div class="cover-box">
@@ -591,6 +593,15 @@
); );
box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
} }
.article-letter {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 3.5rem;
font-weight: 700;
color: rgb(255 255 255 / 0.9);
}
.article-image img { .article-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;