901 lines
32 KiB
Plaintext
901 lines
32 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import LightGallery from "../components/LightGallery.astro";
|
|
---
|
|
|
|
<Layout>
|
|
<Fragment slot="head">
|
|
<title th:text="|${theme.config?.moments?.moments_page_title ?: #messages.msg('moments.title')} - ${site.title}|"></title>
|
|
</Fragment>
|
|
|
|
<section class="wi-moments-page" th:attr="data-i18n-all-moments-loaded=#{common.allMomentsLoaded}">
|
|
<div class="wi-container">
|
|
<div class="wi-moments-page__header">
|
|
<h1 class="wi-moments-page__title" th:text="${theme.config?.moments?.moments_page_title ?: #messages.msg('moments.title')}">瞬间</h1>
|
|
<span class="wi-page-accent"></span>
|
|
</div>
|
|
|
|
<th:block th:if="${pluginFinder.available('PluginMoments')}">
|
|
<div class="wi-moments-page__content">
|
|
<th:block th:if="${momentFinder != null}">
|
|
<th:block th:with="pageSize = ${theme.config?.moments?.moments_page_size ?: 10}, momentsResult = ${momentFinder.list(1, pageSize)}">
|
|
<div
|
|
class="wi-moments-page__timeline"
|
|
th:if="${theme.config?.moments?.moments_style == 'timeline' or theme.config?.moments?.moments_style == null}"
|
|
>
|
|
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__item" th:each="moment : ${momentsResult.items}">
|
|
<div class="wi-moments-page__dot"></div>
|
|
<div class="wi-moments-page__line"></div>
|
|
<div class="wi-moments-page__card">
|
|
<div class="wi-moments-page__text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
|
|
<div class="wi-moments-page__media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
|
|
<th:block th:each="media : ${moment.spec.content.medium}">
|
|
<img
|
|
th:if="${media.type.name == 'PHOTO'}"
|
|
th:src="${media.url}"
|
|
th:alt="''"
|
|
class="wi-moments-page__image"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</th:block>
|
|
</div>
|
|
<div class="wi-moments-page__footer">
|
|
<time
|
|
class="wi-moments-page__date"
|
|
th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
|
|
></time>
|
|
<div class="wi-moments-page__actions">
|
|
<button
|
|
class="wi-moments-page__like-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__like-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
|
|
<span class="wi-moments-page__like-count" th:text="${moment.stats?.upvote ?: 0}">0</span>
|
|
</button>
|
|
<button
|
|
class="wi-moments-page__comment-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__comment-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
<span class="wi-moments-page__comment-count" th:text="${moment.stats?.approvedComment ?: 0}">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="wi-moments-page__comment-area" th:attr="data-moment-name=${moment.metadata.name}" style="display:none;">
|
|
<halo:comment
|
|
group="moment.halo.run"
|
|
kind="Moment"
|
|
th:attr="name=${moment.metadata.name}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
<th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__empty">
|
|
<p th:text="#{moments.noMoments}">No moments yet</p>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
|
|
<div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards'}">
|
|
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__card-item" th:each="moment : ${momentsResult.items}">
|
|
<div class="wi-moments-page__card-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
|
|
<div class="wi-moments-page__card-media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
|
|
<th:block th:each="media : ${moment.spec.content.medium}">
|
|
<img
|
|
th:if="${media.type.name == 'PHOTO'}"
|
|
th:src="${media.url}"
|
|
th:alt="''"
|
|
class="wi-moments-page__card-image"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</th:block>
|
|
</div>
|
|
<div class="wi-moments-page__card-footer">
|
|
<time
|
|
class="wi-moments-page__card-date"
|
|
th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
|
|
></time>
|
|
<div class="wi-moments-page__actions">
|
|
<button
|
|
class="wi-moments-page__like-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__like-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
|
|
<span class="wi-moments-page__like-count" th:text="${moment.stats?.upvote ?: 0}">0</span>
|
|
</button>
|
|
<button
|
|
class="wi-moments-page__comment-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__comment-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
<span class="wi-moments-page__comment-count" th:text="${moment.stats?.approvedComment ?: 0}">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="wi-moments-page__comment-area" th:attr="data-moment-name=${moment.metadata.name}" style="display:none;">
|
|
<halo:comment
|
|
group="moment.halo.run"
|
|
kind="Moment"
|
|
th:attr="name=${moment.metadata.name}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
<th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__empty">
|
|
<p th:text="#{moments.noMoments}">No moments yet</p>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
|
|
<div class="wi-moments-page__masonry" th:if="${theme.config?.moments?.moments_style == 'masonry'}">
|
|
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__masonry-item" th:each="moment : ${momentsResult.items}">
|
|
<div class="wi-moments-page__masonry-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
|
|
<div class="wi-moments-page__masonry-media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
|
|
<th:block th:each="media : ${moment.spec.content.medium}">
|
|
<img
|
|
th:if="${media.type.name == 'PHOTO'}"
|
|
th:src="${media.url}"
|
|
th:alt="''"
|
|
class="wi-moments-page__masonry-image"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</th:block>
|
|
</div>
|
|
<div class="wi-moments-page__masonry-footer">
|
|
<time
|
|
class="wi-moments-page__masonry-date"
|
|
th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
|
|
></time>
|
|
<div class="wi-moments-page__actions">
|
|
<button
|
|
class="wi-moments-page__like-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__like-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
|
|
<span class="wi-moments-page__like-count" th:text="${moment.stats?.upvote ?: 0}">0</span>
|
|
</button>
|
|
<button
|
|
class="wi-moments-page__comment-btn"
|
|
type="button"
|
|
th:attr="data-moment-name=${moment.metadata.name}"
|
|
>
|
|
<svg class="wi-moments-page__comment-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|
<span class="wi-moments-page__comment-count" th:text="${moment.stats?.approvedComment ?: 0}">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="wi-moments-page__comment-area" th:attr="data-moment-name=${moment.metadata.name}" style="display:none;">
|
|
<halo:comment
|
|
group="moment.halo.run"
|
|
kind="Moment"
|
|
th:attr="name=${moment.metadata.name}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
<th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
|
|
<div class="wi-moments-page__empty">
|
|
<p th:text="#{moments.noMoments}">No moments yet</p>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
</th:block>
|
|
</th:block>
|
|
|
|
<nav
|
|
class="wi-moments-page__pagination"
|
|
th:if="${theme.config?.moments?.moments_loading_mode == 'pagination' and momentsResult != null and momentsResult.hasPrevious()}"
|
|
>
|
|
<a
|
|
class="wi-moments-page__page-btn"
|
|
th:if="${momentsResult.hasPrevious()}"
|
|
th:href="${momentsResult.prevUrl}"
|
|
th:text="#{common.newer}">Newer</a>
|
|
<span class="wi-moments-page__page-spacer" th:if="${momentsResult.hasPrevious() and momentsResult.hasNext()}"></span>
|
|
<a
|
|
class="wi-moments-page__page-btn"
|
|
th:if="${momentsResult.hasNext()}"
|
|
th:href="${momentsResult.nextUrl}"
|
|
th:text="#{common.older}">Older</a>
|
|
</nav>
|
|
|
|
<div
|
|
class="wi-moments-page__infinite-sentinel"
|
|
th:if="${theme.config?.moments?.moments_loading_mode != 'pagination' and momentsResult != null and momentsResult.hasNext()}"
|
|
th:attr="data-next-url=${momentsResult.nextUrl}"
|
|
></div>
|
|
<th:block th:if="${momentFinder == null}">
|
|
<div class="wi-moments-page__empty">
|
|
<p th:text="#{common.pluginError}">Plugin error</p>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
</th:block>
|
|
|
|
<th:block th:unless="${pluginFinder.available('PluginMoments')}">
|
|
<div class="wi-moments-page__empty">
|
|
<p th:utext="#{common.installPlugin('Moments', 'https://www.halo.run/store/apps/app-hqbe')}">This feature requires the Moments plugin</p>
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
</section>
|
|
|
|
<LightGallery />
|
|
</Layout>
|
|
|
|
<script is:inline>
|
|
(function () {
|
|
document.addEventListener("click", function (e) {
|
|
var likeBtn = e.target.closest(".wi-moments-page__like-btn");
|
|
if (likeBtn) {
|
|
handleLike(likeBtn);
|
|
return;
|
|
}
|
|
|
|
var commentBtn = e.target.closest(".wi-moments-page__comment-btn");
|
|
if (commentBtn) {
|
|
toggleComment(commentBtn);
|
|
return;
|
|
}
|
|
});
|
|
|
|
function handleLike(btn) {
|
|
var momentName = btn.getAttribute("data-moment-name");
|
|
var likedKey = "wi-moment-liked-" + momentName;
|
|
var countEl = btn.querySelector(".wi-moments-page__like-count");
|
|
|
|
if (localStorage.getItem(likedKey)) return;
|
|
if (btn.classList.contains("wi-moments-page__like-btn--liked")) return;
|
|
|
|
fetch("/apis/api.halo.run/v1alpha1/trackers/upvote", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json;charset=UTF-8" },
|
|
body: JSON.stringify({
|
|
group: "moment.halo.run",
|
|
plural: "moments",
|
|
name: momentName,
|
|
}),
|
|
})
|
|
.then(function (res) {
|
|
if (!res.ok) throw new Error("Like failed");
|
|
btn.classList.add("wi-moments-page__like-btn--liked");
|
|
if (countEl) {
|
|
countEl.textContent = parseInt(countEl.textContent || "0") + 1;
|
|
}
|
|
localStorage.setItem(likedKey, "1");
|
|
})
|
|
.catch(function (err) {
|
|
console.error("Like error:", err);
|
|
});
|
|
}
|
|
|
|
function toggleComment(btn) {
|
|
var momentName = btn.getAttribute("data-moment-name");
|
|
var commentArea = document.querySelector(
|
|
'.wi-moments-page__comment-area[data-moment-name="' + momentName + '"]'
|
|
);
|
|
if (!commentArea) return;
|
|
|
|
if (commentArea.style.display === "none") {
|
|
commentArea.style.display = "block";
|
|
btn.classList.add("wi-moments-page__comment-btn--active");
|
|
} else {
|
|
commentArea.style.display = "none";
|
|
btn.classList.remove("wi-moments-page__comment-btn--active");
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll(".wi-moments-page__like-btn").forEach(function (btn) {
|
|
var momentName = btn.getAttribute("data-moment-name");
|
|
var likedKey = "wi-moment-liked-" + momentName;
|
|
if (localStorage.getItem(likedKey)) {
|
|
btn.classList.add("wi-moments-page__like-btn--liked");
|
|
}
|
|
});
|
|
|
|
function loadMomentStats() {
|
|
fetch("/apis/api.moment.halo.run/v1alpha1/moments")
|
|
.then(function (res) {
|
|
if (!res.ok) return null;
|
|
return res.json();
|
|
})
|
|
.then(function (data) {
|
|
if (!data || !data.items) return;
|
|
data.items.forEach(function (moment) {
|
|
var name = moment.metadata.name;
|
|
var stats = moment.stats || {};
|
|
|
|
document.querySelectorAll(".wi-moments-page__like-btn").forEach(function (btn) {
|
|
if (btn.getAttribute("data-moment-name") === name) {
|
|
var countEl = btn.querySelector(".wi-moments-page__like-count");
|
|
if (countEl) countEl.textContent = stats.upvote || 0;
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll(".wi-moments-page__comment-btn").forEach(function (btn) {
|
|
if (btn.getAttribute("data-moment-name") === name) {
|
|
var countEl = btn.querySelector(".wi-moments-page__comment-count");
|
|
if (countEl) countEl.textContent = stats.approvedComment || 0;
|
|
}
|
|
});
|
|
});
|
|
})
|
|
.catch(function () {});
|
|
}
|
|
|
|
loadMomentStats();
|
|
|
|
var sentinel = document.querySelector(".wi-moments-page__infinite-sentinel");
|
|
if (sentinel) {
|
|
var momentsContent = document.querySelector(".wi-moments-page__content");
|
|
var infiniteLoading = false;
|
|
var infiniteNextUrl = sentinel.getAttribute("data-next-url");
|
|
|
|
var infiniteObserver = new IntersectionObserver(
|
|
function (entries) {
|
|
if (entries[0].isIntersecting && !infiniteLoading && infiniteNextUrl) {
|
|
infiniteLoading = true;
|
|
fetch(infiniteNextUrl)
|
|
.then(function (res) {
|
|
if (!res.ok) throw new Error("Fetch failed");
|
|
return res.text();
|
|
})
|
|
.then(function (html) {
|
|
var parser = new DOMParser();
|
|
var doc = parser.parseFromString(html, "text/html");
|
|
|
|
var style = sentinel.closest(".wi-moments-page__content")
|
|
? sentinel.closest(".wi-moments-page__content").querySelector(
|
|
sentinel.previousElementSibling
|
|
? sentinel.previousElementSibling.className.split(" ")[0]
|
|
: ".wi-moments-page__timeline"
|
|
)
|
|
: null;
|
|
|
|
var container = null;
|
|
var selectors = [
|
|
".wi-moments-page__timeline",
|
|
".wi-moments-page__cards",
|
|
".wi-moments-page__masonry"
|
|
];
|
|
for (var s = 0; s < selectors.length; s++) {
|
|
container = doc.querySelector(selectors[s]);
|
|
if (container) break;
|
|
}
|
|
if (!container) {
|
|
infiniteLoading = false;
|
|
return;
|
|
}
|
|
|
|
var currentContainer = document.querySelector(selectors[0]) ||
|
|
document.querySelector(selectors[1]) ||
|
|
document.querySelector(selectors[2]);
|
|
if (!currentContainer) {
|
|
infiniteLoading = false;
|
|
return;
|
|
}
|
|
|
|
var newItems = container.children;
|
|
for (var i = 0; i < newItems.length; i++) {
|
|
var item = newItems[i].cloneNode(true);
|
|
item.style.opacity = "0";
|
|
item.style.transform = "translateY(20px)";
|
|
currentContainer.appendChild(item);
|
|
(function (el) {
|
|
requestAnimationFrame(function () {
|
|
el.style.transition = "opacity 0.4s ease, transform 0.4s ease";
|
|
el.style.opacity = "1";
|
|
el.style.transform = "translateY(0)";
|
|
});
|
|
})(item);
|
|
}
|
|
|
|
var newSentinel = doc.querySelector(".wi-moments-page__infinite-sentinel");
|
|
if (newSentinel && newSentinel.getAttribute("data-next-url")) {
|
|
infiniteNextUrl = newSentinel.getAttribute("data-next-url");
|
|
sentinel.setAttribute("data-next-url", infiniteNextUrl);
|
|
} else {
|
|
infiniteNextUrl = null;
|
|
infiniteObserver.disconnect();
|
|
sentinel.style.display = "none";
|
|
var endMsg = document.createElement("div");
|
|
endMsg.className = "wi-moments-page__empty";
|
|
var momentsSection = document.querySelector(".wi-moments-page");
|
|
var allMomentsText = momentsSection ? momentsSection.getAttribute("data-i18n-all-moments-loaded") : "All moments loaded";
|
|
endMsg.innerHTML = "<p>" + allMomentsText + "</p>";
|
|
sentinel.parentNode.appendChild(endMsg);
|
|
}
|
|
|
|
infiniteLoading = false;
|
|
})
|
|
.catch(function () {
|
|
infiniteLoading = false;
|
|
});
|
|
}
|
|
},
|
|
{ rootMargin: "300px" }
|
|
);
|
|
|
|
infiniteObserver.observe(sentinel);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.wi-moments-page {
|
|
padding-block: 1rem;
|
|
}
|
|
|
|
.wi-moments-page__header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-3xl);
|
|
}
|
|
|
|
.wi-moments-page__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-moments-page__empty {
|
|
text-align: center;
|
|
padding: var(--space-4xl) var(--space-xl);
|
|
color: var(--ink-3);
|
|
font-size: var(--text-md);
|
|
}
|
|
|
|
.wi-moments-page__empty a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.wi-moments-page__content {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: auto 800px;
|
|
}
|
|
|
|
.wi-moments-page__timeline {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xl);
|
|
padding-left: var(--space-2xl);
|
|
}
|
|
|
|
.wi-moments-page__item {
|
|
position: relative;
|
|
}
|
|
|
|
.wi-moments-page__dot {
|
|
position: absolute;
|
|
left: calc(-1 * var(--space-2xl) - 5px);
|
|
top: 10px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 9999px;
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent);
|
|
z-index: 2;
|
|
}
|
|
|
|
.wi-moments-page__line {
|
|
position: absolute;
|
|
left: calc(-1 * var(--space-2xl));
|
|
top: 20px;
|
|
bottom: calc(-1 * var(--space-xl));
|
|
width: 1px;
|
|
background: var(--rule);
|
|
z-index: 1;
|
|
}
|
|
|
|
.wi-moments-page__item:last-child .wi-moments-page__line {
|
|
display: none;
|
|
}
|
|
|
|
.wi-moments-page__card {
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 16px;
|
|
padding: var(--space-xl);
|
|
transition:
|
|
box-shadow var(--duration-normal) var(--ease-out-expo),
|
|
transform var(--duration-normal) var(--ease-out-expo);
|
|
}
|
|
|
|
.wi-moments-page__card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.wi-moments-page__text {
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-relaxed);
|
|
color: var(--ink);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__media {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__image {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.wi-moments-page__image:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.wi-moments-page__media:has(.wi-moments-page__image:only-child) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wi-moments-page__media:has(.wi-moments-page__image:only-child) .wi-moments-page__image {
|
|
aspect-ratio: auto;
|
|
max-height: 300px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.wi-moments-page__media:has(.wi-moments-page__image:nth-child(2):last-child) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__media:has(.wi-moments-page__image:nth-child(4)) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__date {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-3);
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.wi-moments-page__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.wi-moments-page__like-btn,
|
|
.wi-moments-page__comment-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 9999px;
|
|
background: transparent;
|
|
color: var(--ink-3);
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-body);
|
|
cursor: pointer;
|
|
transition:
|
|
color 0.2s ease,
|
|
border-color 0.2s ease,
|
|
background 0.2s ease;
|
|
}
|
|
|
|
.wi-moments-page__like-btn:hover,
|
|
.wi-moments-page__comment-btn:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.wi-moments-page__like-btn--liked {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
|
|
cursor: default;
|
|
}
|
|
|
|
.wi-moments-page__like-btn--liked .wi-moments-page__like-icon {
|
|
fill: var(--accent);
|
|
}
|
|
|
|
.wi-moments-page__comment-btn--active {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--bg));
|
|
}
|
|
|
|
.wi-moments-page__like-icon,
|
|
.wi-moments-page__comment-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.wi-moments-page__like-count,
|
|
.wi-moments-page__comment-count {
|
|
line-height: 1;
|
|
}
|
|
|
|
.wi-moments-page__comment-area {
|
|
margin-top: var(--space-md);
|
|
padding-top: var(--space-md);
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
.wi-moments-page__comment-area halo\:comment {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.wi-moments-page__cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.wi-moments-page__card-item {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 16px;
|
|
padding: var(--space-xl);
|
|
transition:
|
|
box-shadow var(--duration-normal) var(--ease-out-expo),
|
|
transform var(--duration-normal) var(--ease-out-expo);
|
|
}
|
|
|
|
.wi-moments-page__card-item:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.wi-moments-page__card-text {
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-relaxed);
|
|
color: var(--ink);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__card-media {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__card-image {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.wi-moments-page__card-image:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.wi-moments-page__card-media:has(.wi-moments-page__card-image:only-child) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wi-moments-page__card-media:has(.wi-moments-page__card-image:only-child) .wi-moments-page__card-image {
|
|
aspect-ratio: auto;
|
|
max-height: 300px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(2):last-child) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(4)) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__card-date {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-3);
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.wi-moments-page__masonry {
|
|
columns: 2;
|
|
column-gap: var(--space-lg);
|
|
}
|
|
|
|
.wi-moments-page__masonry-item {
|
|
break-inside: avoid;
|
|
margin-bottom: var(--space-lg);
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 16px;
|
|
padding: var(--space-xl);
|
|
transition:
|
|
box-shadow var(--duration-normal) var(--ease-out-expo),
|
|
transform var(--duration-normal) var(--ease-out-expo);
|
|
}
|
|
|
|
.wi-moments-page__masonry-item:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.wi-moments-page__masonry-text {
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-relaxed);
|
|
color: var(--ink);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__masonry-media {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__masonry-image {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.wi-moments-page__masonry-image:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.wi-moments-page__masonry-media:has(.wi-moments-page__masonry-image:only-child) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wi-moments-page__masonry-media:has(.wi-moments-page__masonry-image:only-child) .wi-moments-page__masonry-image {
|
|
aspect-ratio: auto;
|
|
max-height: 300px;
|
|
}
|
|
|
|
.wi-moments-page__masonry-media:has(.wi-moments-page__masonry-image:nth-child(2):last-child) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__masonry-media:has(.wi-moments-page__masonry-image:nth-child(4)) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.wi-moments-page__masonry-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.wi-moments-page__masonry-date {
|
|
font-size: var(--text-xs);
|
|
color: var(--ink-3);
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.wi-moments-page__pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
margin-top: var(--space-3xl);
|
|
}
|
|
|
|
.wi-moments-page__page-btn {
|
|
display: inline-block;
|
|
padding: 10px 24px;
|
|
border-radius: 12px;
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--rule);
|
|
color: var(--ink);
|
|
font-size: var(--text-sm);
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out-quart),
|
|
color var(--duration-fast) var(--ease-out-quart);
|
|
}
|
|
|
|
.wi-moments-page__page-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.wi-moments-page__page-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.wi-moments-page__infinite-sentinel {
|
|
height: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.wi-moments-page__timeline {
|
|
padding-left: var(--space-xl);
|
|
}
|
|
|
|
.wi-moments-page__dot {
|
|
left: calc(-1 * var(--space-xl) - 5px);
|
|
}
|
|
|
|
.wi-moments-page__line {
|
|
left: calc(-1 * var(--space-xl));
|
|
}
|
|
|
|
.wi-moments-page__masonry {
|
|
columns: 1;
|
|
}
|
|
|
|
.wi-moments-page__cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.wi-moments-page__timeline {
|
|
padding-left: var(--space-lg);
|
|
}
|
|
|
|
.wi-moments-page__dot {
|
|
left: calc(-1 * var(--space-lg) - 5px);
|
|
}
|
|
|
|
.wi-moments-page__line {
|
|
left: calc(-1 * var(--space-lg));
|
|
}
|
|
|
|
.wi-moments-page__media,
|
|
.wi-moments-page__card-media,
|
|
.wi-moments-page__masonry-media {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px;
|
|
}
|
|
|
|
.wi-moments-page__like-btn,
|
|
.wi-moments-page__comment-btn {
|
|
padding: 8px 14px;
|
|
}
|
|
}
|
|
</style>
|