425 lines
14 KiB
Plaintext
425 lines
14 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
---
|
|
|
|
<Layout wide>
|
|
<Fragment slot="head">
|
|
<title th:text="|${title} - ${site.title}|"></title>
|
|
</Fragment>
|
|
|
|
<section class="wi-douban">
|
|
<div class="wi-container">
|
|
<div class="wi-douban__header">
|
|
<h1 class="wi-douban__title" th:text="${title ?: #messages.msg('douban.title')}">Douban</h1>
|
|
<span class="wi-page-accent"></span>
|
|
</div>
|
|
|
|
<div class="wi-douban__filters">
|
|
<th:block th:with="urlType = ${param.type}, isDefaultType = ${urlType == null or #strings.isEmpty(urlType.toString())}, currentType = ${isDefaultType ? 'music' : urlType.toString()}, urlStatus = ${param.status}, hasStatus = ${urlStatus != null and !#strings.isEmpty(urlStatus.toString())}, currentStatus = ${hasStatus ? urlStatus.toString() : (isDefaultType ? 'done' : null)}">
|
|
<div class="wi-douban__filter-group" th:if="${types != null and !#lists.isEmpty(types)}">
|
|
<a
|
|
th:each="t : ${types}"
|
|
class="wi-douban__filter-tag"
|
|
th:href="@{/douban(type=${t.key})}"
|
|
th:text="${t.name}"
|
|
th:classappend="${(isDefaultType and t.key == 'music') or (!isDefaultType and urlType.toString() == t.key) ? 'wi-douban__filter-tag--active' : ''}"
|
|
></a>
|
|
</div>
|
|
|
|
<div class="wi-douban__filter-group wi-douban__status-filters">
|
|
<th:block th:if="${currentType == 'movie' or currentType == 'drama'}">
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type=${currentType},status='wish')}"
|
|
th:classappend="${hasStatus and currentStatus == 'wish'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.wish}">Wish</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type=${currentType},status='done')}"
|
|
th:classappend="${(!hasStatus and isDefaultType) or (hasStatus and currentStatus == 'done')} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.done}">Done</a>
|
|
</th:block>
|
|
<th:block th:if="${currentType == 'book'}">
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='book',status='wish')}"
|
|
th:classappend="${hasStatus and currentStatus == 'wish'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.wishRead}">Wish</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='book',status='doing')}"
|
|
th:classappend="${hasStatus and currentStatus == 'doing'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.reading}">Reading</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='book',status='done')}"
|
|
th:classappend="${(!hasStatus and isDefaultType) or (hasStatus and currentStatus == 'done')} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.done}">Done</a>
|
|
</th:block>
|
|
<th:block th:if="${currentType == 'music'}">
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='music',status='wish')}"
|
|
th:classappend="${hasStatus and currentStatus == 'wish'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.wishListen}">Wish</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='music',status='doing')}"
|
|
th:classappend="${hasStatus and currentStatus == 'doing'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.listening}">Listening</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='music',status='done')}"
|
|
th:classappend="${(!hasStatus and isDefaultType) or (hasStatus and currentStatus == 'done')} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.listened}">Listened</a>
|
|
</th:block>
|
|
<th:block th:if="${currentType == 'game'}">
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='game',status='wish')}"
|
|
th:classappend="${hasStatus and currentStatus == 'wish'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.wishPlay}">Wish</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='game',status='doing')}"
|
|
th:classappend="${hasStatus and currentStatus == 'doing'} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.playing}">Playing</a>
|
|
<a
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type='game',status='done')}"
|
|
th:classappend="${(!hasStatus and isDefaultType) or (hasStatus and currentStatus == 'done')} ? 'wi-douban__filter-tag--active' : ''"
|
|
th:text="#{douban.played}">Played</a>
|
|
</th:block>
|
|
</div>
|
|
|
|
<div class="wi-douban__filter-group" th:if="${genres != null and !#lists.isEmpty(genres)}">
|
|
<th:block th:each="g : ${genres}">
|
|
<a
|
|
th:if="${hasStatus}"
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type=${currentType}, status=${currentStatus}, genre=${g.name})}"
|
|
th:text="|${g.name}(${g.doubanCount})|"
|
|
th:classappend="${param.genre != null and param.genre.toString() == g.name ? 'wi-douban__filter-tag--active' : ''}"
|
|
></a>
|
|
<a
|
|
th:unless="${hasStatus}"
|
|
class="wi-douban__filter-tag wi-douban__filter-tag--sm"
|
|
th:href="@{/douban(type=${currentType}, status='done', genre=${g.name})}"
|
|
th:text="|${g.name}(${g.doubanCount})|"
|
|
th:classappend="${param.genre != null and param.genre.toString() == g.name ? 'wi-douban__filter-tag--active' : ''}"
|
|
></a>
|
|
</th:block>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
|
|
<th:block th:with="urlType = ${param.type}, isDefaultType = ${urlType == null or #strings.isEmpty(urlType.toString())}, currentType = ${isDefaultType ? 'music' : urlType.toString()}, urlStatus = ${param.status}, hasStatus = ${urlStatus != null and !#strings.isEmpty(urlStatus.toString())}, currentStatus = ${hasStatus ? urlStatus.toString() : 'done'}, urlGenre = ${param.genre}, hasGenre = ${urlGenre != null and !#strings.isEmpty(urlGenre.toString())}, currentGenre = ${hasGenre ? urlGenre.toString() : null}, doubans = ${doubanFinder.list(1, 100, currentType, currentStatus)}">
|
|
|
|
<div class="wi-douban__grid">
|
|
<article
|
|
class="wi-douban__card"
|
|
th:each="item : ${doubans.items}"
|
|
th:if="${!hasGenre or #sets.contains(item.spec?.genres, currentGenre)}"
|
|
th:attr="data-type=${currentType}"
|
|
>
|
|
<a
|
|
class="wi-douban__card-link"
|
|
th:if="${!#strings.isEmpty(item.spec?.link)}"
|
|
th:href="${item.spec?.link}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
></a>
|
|
<div class="wi-douban__poster" th:if="${!#strings.isEmpty(item.spec?.poster)}">
|
|
<img
|
|
th:src="${item.spec?.poster}"
|
|
th:alt="${item.spec?.name}"
|
|
class="wi-douban__poster-img"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="wi-douban__poster wi-douban__poster--placeholder" th:if="${#strings.isEmpty(item.spec?.poster)}">
|
|
<span th:text="${#strings.substring(item.spec?.name ?: '', 0, 1)}"></span>
|
|
</div>
|
|
<div class="wi-douban__body">
|
|
<h3 class="wi-douban__name" th:text="${item.spec?.name}"></h3>
|
|
<p
|
|
class="wi-douban__subtitle"
|
|
th:if="${!#strings.isEmpty(item.spec?.cardSubtitle)}"
|
|
th:text="${item.spec?.cardSubtitle}"
|
|
></p>
|
|
<div class="wi-douban__meta">
|
|
<span
|
|
class="wi-douban__score"
|
|
th:if="${!#strings.isEmpty(item.spec?.score) and item.spec?.score != '0'}"
|
|
>
|
|
<svg class="wi-douban__star" viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
|
<th:block th:text="${item.spec?.score}"></th:block>
|
|
</span>
|
|
<span
|
|
class="wi-douban__my-score"
|
|
th:if="${!#strings.isEmpty(item.faves?.score)}"
|
|
>
|
|
<span th:text="#{douban.myRating}">My:</span><th:block th:text="${item.faves?.score}"></th:block>
|
|
</span>
|
|
<span
|
|
class="wi-douban__year"
|
|
th:if="${!#strings.isEmpty(item.spec?.year)}"
|
|
th:text="${item.spec?.year}"
|
|
></span>
|
|
</div>
|
|
<div class="wi-douban__tags" th:if="${item.spec?.genres != null and !#sets.isEmpty(item.spec?.genres)}">
|
|
<span
|
|
class="wi-douban__tag"
|
|
th:each="genre : ${item.spec?.genres}"
|
|
th:text="${genre}"
|
|
></span>
|
|
</div>
|
|
<p
|
|
class="wi-douban__remark"
|
|
th:if="${!#strings.isEmpty(item.faves?.remark)}"
|
|
th:text="${item.faves?.remark}"
|
|
></p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
</th:block>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
|
|
<style>
|
|
.wi-douban {
|
|
padding-block: 1rem;
|
|
}
|
|
|
|
.wi-douban__header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-3xl);
|
|
}
|
|
|
|
.wi-douban__title {
|
|
font-size: var(--text-4xl);
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
.wi-page-accent {
|
|
display: block;
|
|
width: 48px;
|
|
height: 3px;
|
|
margin: var(--space-sm) auto 0;
|
|
border-radius: 9999px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.wi-douban__filters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-2xl);
|
|
}
|
|
|
|
.wi-douban__filter-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.wi-douban__filter-tag {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: var(--text-sm);
|
|
color: var(--ink-2);
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--rule);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out-quart),
|
|
background var(--duration-fast) var(--ease-out-quart),
|
|
border-color var(--duration-fast) var(--ease-out-quart);
|
|
}
|
|
|
|
.wi-douban__filter-tag--sm {
|
|
padding: 4px 12px;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.wi-douban__filter-tag:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.wi-douban__filter-tag--active {
|
|
color: #fff;
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.wi-douban__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.wi-douban__card {
|
|
position: relative;
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
padding: var(--space-lg);
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 16px;
|
|
transition:
|
|
transform var(--duration-normal) var(--ease-out-expo),
|
|
box-shadow var(--duration-normal) var(--ease-out-expo),
|
|
border-color var(--duration-normal) var(--ease-out-expo);
|
|
}
|
|
|
|
.wi-douban__card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.wi-douban__card-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.wi-douban__poster {
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
height: 112px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.wi-douban__card[data-type="music"] .wi-douban__poster {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.wi-douban__poster-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wi-douban__poster--placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--accent-bg);
|
|
color: var(--accent);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.wi-douban__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.wi-douban__name {
|
|
font-size: var(--text-md);
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
line-height: var(--leading-tight);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wi-douban__subtitle {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-3);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wi-douban__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-3);
|
|
}
|
|
|
|
.wi-douban__score {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: #f59e0b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wi-douban__star {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.wi-douban__my-score {
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.wi-douban__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wi-douban__tag {
|
|
font-size: 11px;
|
|
color: var(--ink-3);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--rule);
|
|
}
|
|
|
|
.wi-douban__remark {
|
|
font-size: var(--text-sm);
|
|
color: var(--ink-2);
|
|
line-height: var(--leading-relaxed);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-top: 4px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.wi-douban__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wi-douban__card {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.wi-douban__poster {
|
|
width: 64px;
|
|
height: 90px;
|
|
}
|
|
|
|
.wi-douban__card[data-type="music"] .wi-douban__poster {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
}
|
|
</style>
|