83 lines
4.8 KiB
HTML
83 lines
4.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html
|
||
|
|
xmlns:th="http://www.thymeleaf.org"
|
||
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||
|
|
layout:decorate="~{layout/default_layout}">
|
||
|
|
<head>
|
||
|
|
<title>Bookmarks</title>
|
||
|
|
</head>
|
||
|
|
<th:block layout:fragment="content">
|
||
|
|
<section class="wrapper style2">
|
||
|
|
<div class="container">
|
||
|
|
<header class="major">
|
||
|
|
<h2>Bookmarks</h2>
|
||
|
|
<p>다른 사용자들이 저장한 유용한 페이지들을 둘러보세요.</p>
|
||
|
|
</header>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="wrapper style1">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12" th:if="${bookmarksPage.empty}">
|
||
|
|
<p style="text-align: center;">아직 저장된 페이지가 없습니다.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 col-6-medium col-12-small" th:each="bookmark : ${bookmarksPage.content}">
|
||
|
|
<section class="box feature">
|
||
|
|
<a href="javascript:void(0);"
|
||
|
|
th:data-url="${bookmark.url}"
|
||
|
|
th:data-title="${bookmark.title}"
|
||
|
|
onclick="showBookmarkOptions(this)" class="image featured">
|
||
|
|
<img th:src="${bookmark.thumbnailUrl ?: '/images/pic01.jpg'}" alt="Thumbnail" />
|
||
|
|
</a>
|
||
|
|
<div class="inner">
|
||
|
|
<header>
|
||
|
|
<h3 th:text="${bookmark.title}">북마크 제목</h3>
|
||
|
|
<p th:if="${bookmark.userComment}" th:text="${bookmark.userComment}" style="font-style: italic; color: #007bff;"></p>
|
||
|
|
</header>
|
||
|
|
<p th:text="${#strings.abbreviate(bookmark.description, 100)}"></p>
|
||
|
|
|
||
|
|
<div class="bookmark-controls" style="margin-top: 1em; padding-top: 1em; border-top: 1px solid #eee;">
|
||
|
|
<div class="vote-controls" th:data-bookmark-id="${bookmark.id}" style="text-align: center; margin-bottom: 1em;">
|
||
|
|
<button class="button small alt" th:onclick="handleBookmarkVote(this, 'like')">
|
||
|
|
👍 (<span class="like-count" th:text="${bookmark.voteCount}">0</span>)
|
||
|
|
</button>
|
||
|
|
<button class="button small alt" th:onclick="handleBookmarkVote(this, 'unlike')" style="margin-left: 0.5em;">
|
||
|
|
👎 (<span class="unlike-count" th:text="${bookmark.unlikeCount}">0</span>)
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<a href="javascript:void(0);" th:onclick="toggleCommentSection('[[${bookmark.id}]]')" class="button small fit">댓글 보기</a>
|
||
|
|
<div th:id="'comment-section-' + ${bookmark.id}" class="comment-section" style="display: none; margin-top: 1em;">
|
||
|
|
<div th:id="'comments-list-' + ${bookmark.id}" class="comments-list"></div>
|
||
|
|
<textarea th:id="'comment-input-' + ${bookmark.id}" placeholder="댓글을 입력하세요..." style="margin-top: 1em;"></textarea>
|
||
|
|
<button class="button small" th:onclick="submitBookmarkComment('[[${bookmark.id}]]')">등록</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer style="font-size: 0.8em; color: #888; text-align: right; margin-top: 1em;">
|
||
|
|
by <span th:text="${bookmark.userId}"></span>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav th:if="${bookmarksPage.totalPages > 1}" style="text-align: center; margin-top: 2.5em;">
|
||
|
|
<ul class="pagination">
|
||
|
|
<li th:classappend="${bookmarksPage.first} ? 'disabled'">
|
||
|
|
<a th:href="@{/bookmarks(page=${bookmarksPage.number - 1})}" class="button alt small">Prev</a>
|
||
|
|
</li>
|
||
|
|
<li th:each="pageNum : ${#numbers.sequence(0, bookmarksPage.totalPages - 1)}">
|
||
|
|
<a th:href="@{/bookmarks(page=${pageNum})}"
|
||
|
|
th:text="${pageNum + 1}"
|
||
|
|
th:class="${pageNum == bookmarksPage.number} ? 'button small' : 'button alt small'"></a>
|
||
|
|
</li>
|
||
|
|
<li th:classappend="${bookmarksPage.last} ? 'disabled'">
|
||
|
|
<a th:href="@{/bookmarks(page=${bookmarksPage.number + 1})}" class="button alt small">Next</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</th:block>
|
||
|
|
</html>
|