108 lines
4.2 KiB
HTML
108 lines
4.2 KiB
HTML
@include(snippets/header)
|
|
<div id="main">
|
|
<div class="profile_head">
|
|
@if(user.avatar)
|
|
<div class="profile_head_avatar">
|
|
<img src="/t/{{ user.avatar }}.webp" style="display: grid;width: 55px" />
|
|
</div>
|
|
@endif
|
|
<div class="layersoffear">
|
|
<div class="profile_head_username">
|
|
<span>{{ user.user }}'s Comments</span>
|
|
</div>
|
|
<div class="profile_head_user_stats">
|
|
<a href="/user/{{ user.user }}">Back to Profile</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user_content_wrapper" style="display: block;">
|
|
<div class="comments-list-page" style="max-width: 800px; margin: 0 auto;">
|
|
@each(comments as c)
|
|
<div class="user-comment-row"
|
|
style="display: flex; gap: 10px; margin-bottom: 10px; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 4px;">
|
|
<div class="comment-thumbnail" style="flex-shrink: 0;">
|
|
<a href="/{{ c.item_id }}#c{{ c.id }}">
|
|
<img src="/t/{{ c.item_id }}.webp"
|
|
style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px;">
|
|
</a>
|
|
</div>
|
|
<div class="comment-preview" style="flex-grow: 1;">
|
|
<div style="font-size: 0.8em; color: #888; margin-bottom: 5px;">
|
|
On <a href="/{{ c.item_id }}">Item #{{ c.item_id }}</a> - {{ c.created_at }}
|
|
</div>
|
|
<div class="comment-text">
|
|
{{ c.content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include(snippets/footer)
|
|
|
|
<script>
|
|
let page = 1;
|
|
let loading = false;
|
|
let finished = false;
|
|
const user = "{{ user.user }}";
|
|
const container = document.querySelector('.comments-list-page');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (loading || finished) return;
|
|
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
|
|
loadMore();
|
|
}
|
|
});
|
|
|
|
async function loadMore() {
|
|
loading = true;
|
|
page++;
|
|
|
|
// Show loading indicator?
|
|
const loader = document.createElement('div');
|
|
loader.className = 'loader-placeholder';
|
|
loader.innerText = 'Loading...';
|
|
loader.style.textAlign = 'center';
|
|
loader.style.padding = '10px';
|
|
container.appendChild(loader);
|
|
|
|
try {
|
|
const res = await fetch('/user/' + encodeURIComponent(user) + '/comments?page=' + page + '&json=true');
|
|
const json = await res.json();
|
|
|
|
loader.remove();
|
|
|
|
if (json.success && json.comments.length > 0) {
|
|
json.comments.forEach(c => {
|
|
const div = document.createElement('div');
|
|
div.className = 'user-comment-row';
|
|
div.style.cssText = 'display: flex; gap: 10px; margin-bottom: 10px; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 4px;';
|
|
|
|
let html = '<div class="comment-thumbnail" style="flex-shrink: 0;">';
|
|
html += '<a href="/' + c.item_id + '#c' + c.id + '">';
|
|
html += '<img src="/t/' + c.item_id + '.webp" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px;">';
|
|
html += '</a></div>';
|
|
|
|
html += '<div class="comment-preview" style="flex-grow: 1;">';
|
|
html += '<div style="font-size: 0.8em; color: #888; margin-bottom: 5px;">';
|
|
html += 'On <a href="/' + c.item_id + '">Item #' + c.item_id + '</a> - ' + new Date(c.created_at).toLocaleString();
|
|
html += '</div>';
|
|
html += '<div class="comment-text">' + c.content + '</div>';
|
|
html += '</div>';
|
|
|
|
div.innerHTML = html;
|
|
container.appendChild(div);
|
|
});
|
|
} else {
|
|
finished = true;
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
loader.remove();
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
</script> |