102 lines
5.0 KiB
HTML
102 lines
5.0 KiB
HTML
{% import "components/share.html" as share %}
|
||
|
||
{% macro section(post, index=100, user=False) -%}
|
||
<figure class="c_57hjd b_h57rq" data-postId="{{post._id}}">
|
||
<div class="b_ya0t5">
|
||
<a href="/paintings/{{post._id}}" class="b_kbsvf">
|
||
<picture>
|
||
<img crossorigin="anonymous" fetchpriority="high" loading="eager" alt="{{ post.title }}" class="b_ya0t5"
|
||
src="/b/posts/{{ post.medias[0] }}" data-src="/b/posts/{{ post.medias_original[0] }}">
|
||
</picture>
|
||
</a>
|
||
</div>
|
||
<figcaption class="c_jy9j2 b_kbsvf">
|
||
<a href="/paintings/{{post._id}}" class="b_kbsvf">
|
||
|
||
|
||
<header class="c_27k59 b_s4cma">
|
||
<h2 class="c_dft7c b_6ggp7">{{post.title}}</h2>
|
||
</header>
|
||
<div class="c_opwlt b_cb3w5">
|
||
<p class="c_spnyn b_ol9su">{{post.size}}</p>
|
||
<!-- <p class="c_spnyn b_ol9su">{{post.status}}</p> -->
|
||
</div>
|
||
<p class="c_l1ibo b_zywmd">{{post.price}}</p>
|
||
<div class="c_ybfp2 b_gagrr">
|
||
<p class="c_eiyz0 b_rhbo8">{% if user and user._id == post.user._id %}Опубликовать повторно{% endif %}</p>
|
||
<p class="c_5uh64 b_tbfd3">{{ (post._id.generation_time.strftime('%d.%m.%Y')) if post._id else ''}}</p>
|
||
</div>
|
||
</a>
|
||
{% if user and user._id == post.user._id %}
|
||
<div class="c_ybfp2 b_gagrr">
|
||
<a class="c_eiyz0 b_rhbo8" href="/form/post/{{post._id}}">Редактировать</a>
|
||
<button class="c_eiyz0 b_rhbo8" onclick="deletePost('{{post._id}}')">Удалить</button>
|
||
</div>
|
||
{% endif %}
|
||
{{ share.share('/paintings/{}'.format(post._id), post.title, '/b/posts/{}'.format(post.medias_original[0])) }}
|
||
</figcaption>
|
||
</figure>
|
||
{%- endmacro %}
|
||
{% macro scrips() -%}
|
||
<script>
|
||
// @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
|
||
function deletePost(postId) {
|
||
fetch(`/api/post/${postId}`, {
|
||
method: 'DELETE'
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
// Find and delete the parent figure
|
||
const postElement = document.querySelector(`figure[data-postId='${postId}']`);
|
||
if (postElement) {
|
||
postElement.remove();
|
||
}
|
||
} else {
|
||
showToast({
|
||
message: 'Ошибка соединения с сервером!',
|
||
status: 'error',
|
||
duration: 2500
|
||
});
|
||
}
|
||
})
|
||
.catch(error => {
|
||
// Handle network errors
|
||
showToast({
|
||
message: 'Ошибка соединения с сервером!',
|
||
status: 'error',
|
||
duration: 2500
|
||
});
|
||
});
|
||
}
|
||
// @license-end
|
||
</script>
|
||
{%- endmacro %}
|
||
{% macro style() -%}
|
||
<style>
|
||
picture>img{ width: 100%; object-fit: scale-down; }
|
||
.c_eiyz0{cursor: pointer;}
|
||
.b_ya0t5 { align-self: stretch; border-radius: 5px; height: 222px; }
|
||
.b_6ggp7 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #171717; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_s4cma { align-items: center; display: flex; }
|
||
.b_ol9su { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_cb3w5 { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; }
|
||
.b_zywmd { color: #171717; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; }
|
||
.b_rhbo8 { color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_tbfd3 { color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; text-align: right; }
|
||
.b_gagrr { align-items: center; align-self: stretch; display: flex; justify-content: space-between; }
|
||
.b_kbsvf { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
|
||
.b_h57rq { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; width: 335px; }
|
||
.c_jy9j2{padding: 10px 20px; height: 226px;}
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_5uh64 { color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
}</style>
|
||
{%- endmacro %} |