- Реализовал возможность "лайкать" сообщения и вывод информации о "лайках".
https://www.youtube.com/watch?v=QhMBtnS6SrI&list=PLU2ftbIeotGpAYRP9Iv2KLIwK36-o_qYk&index=32
This commit is contained in:
Leonid
@@ -3,21 +3,32 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Sweater</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
|
||||
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
|
||||
crossorigin="anonymous"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
|
||||
crossorigin="anonymous"/>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async="async" defer="defer"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<#include "navbar.ftl">
|
||||
<div class="container mt-5">
|
||||
<#nested>
|
||||
<#nested>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
|
||||
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,28 +2,38 @@
|
||||
<#import "pager.ftl" as p>
|
||||
|
||||
<@p.pager url page! />
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4" id="message-list">
|
||||
<#list page.content as message>
|
||||
<div class="col">
|
||||
<div class="card h-100" data-id="${message.id}"> <!-- h-100 делает карточки одинаковой высоты -->
|
||||
<#if message.filename??>
|
||||
<img src="/img/${message.filename}" class="card-img-top">
|
||||
</#if>
|
||||
<div class="card-body">
|
||||
<span>${message.text}</span><br/>
|
||||
<i>#${message.tag}</i>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<a href="/user-messages/${message.author.id}"> ${message.authorName} </a>
|
||||
<#if message.author.id == currentUserId>
|
||||
<a class="btn btn-primary btn-sm"
|
||||
href="/user-messages/${message.author.id}?message=${message.id}">Edit</a>
|
||||
<div class="card-columns" id="message-list">
|
||||
<#list page.content as message>
|
||||
<div class="card my-3" data-id="${message.id}">
|
||||
<#if message.filename??>
|
||||
<img src="/img/${message.filename}" class="card-img-top"/>
|
||||
</#if>
|
||||
<div class="m-2">
|
||||
<span>${message.text}</span><br/>
|
||||
<i>#${message.tag}</i>
|
||||
</div>
|
||||
<div class="card-footer text-muted container">
|
||||
<div class="row">
|
||||
<a class="col align-self-center"
|
||||
href="/user-messages/${message.author.id}">${message.authorName}</a>
|
||||
<a class="col align-self-center" href="/messages/${message.id}/like">
|
||||
<#if message.meLiked>
|
||||
<i class="fas fa-heart"></i>
|
||||
<#else>
|
||||
<i class="far fa-heart"></i>
|
||||
</#if>
|
||||
</div>
|
||||
${message.likes}
|
||||
</a>
|
||||
<#if message.author.id == currentUserId>
|
||||
<a class="col btn btn-primary" href="/user-messages/${message.author.id}?message=${message.id}">
|
||||
Edit
|
||||
</a>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<p>No messages found</p>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
No message
|
||||
</#list>
|
||||
</div>
|
||||
<@p.pager url page />
|
||||
@@ -14,43 +14,47 @@
|
||||
<#else>
|
||||
<#assign body = 1..page.getTotalPages()>
|
||||
</#if>
|
||||
<div class="mt-3">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">Pages</a>
|
||||
</li>
|
||||
<#list body as p>
|
||||
<#if (p - 1) == page.getNumber()>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#" tabindex="-1">${p}</a>
|
||||
</li>
|
||||
<#elseif p == -1>
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">...</a>
|
||||
</li>
|
||||
<#else>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="${url}?page=${p - 1}&size=${page.getSize()}" tabindex="-1">${p}</a>
|
||||
</li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
<div class="container mt-3">
|
||||
<div class="row" >
|
||||
<ul class="pagination col justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">Pages</a>
|
||||
</li>
|
||||
<#list body as p>
|
||||
<#if (p - 1) == page.getNumber()>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#" tabindex="-1">${p}</a>
|
||||
</li>
|
||||
<#elseif p == -1>
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">...</a>
|
||||
</li>
|
||||
<#else>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="${url}?page=${p - 1}&size=${page.getSize()}"
|
||||
tabindex="-1">${p}</a>
|
||||
</li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">Items per page</a>
|
||||
</li>
|
||||
<#list [5, 10, 25, 50] as c>
|
||||
<#if c == page.getSize()>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#" tabindex="-1">${c}</a>
|
||||
</li>
|
||||
<#else>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="${url}?page=${page.getNumber()}&size=${c}" tabindex="-1">${c}</a>
|
||||
</li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
<ul class="pagination col justify-content-center" >
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">Items per page</a>
|
||||
</li>
|
||||
<#list [5, 10, 25, 50] as c>
|
||||
<#if c == page.getSize()>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#" tabindex="-1">${c}</a>
|
||||
</li>
|
||||
<#else>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="${url}?page=${page.getNumber()}&size=${c}"
|
||||
tabindex="-1">${c}</a>
|
||||
</li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</#macro>
|
||||
Reference in New Issue
Block a user