286 lines
8.0 KiB
HTML
286 lines
8.0 KiB
HTML
{% extends 'h_tmp_usr/z_tmp.html' %}
|
|
|
|
{% block css %}
|
|
|
|
<!-- {# i jconfirm #} -->
|
|
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
|
|
<!-- {# f jconfirm #} -->
|
|
|
|
{% endblock css %}
|
|
|
|
{% block body %}
|
|
|
|
|
|
<style>
|
|
.fade-out {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
@media (max-width: 576px) {
|
|
#card-container {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
/* Smartphones (hasta 767px) */
|
|
@media (max-width: 767px) {
|
|
/* main{ background-color: black; } */
|
|
main {
|
|
min-height: 80dvh;
|
|
}
|
|
}
|
|
|
|
/* Tablets (768px - 1023px) */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
/* main{ background-color: pink; } */
|
|
main {
|
|
min-height: 80dvh;
|
|
}
|
|
}
|
|
|
|
/* Laptops (1024px - 1439px) monitores resulición baja */
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
/* main{ background-color: purple; } */
|
|
main {
|
|
min-height: 80dvh;
|
|
}
|
|
}
|
|
|
|
/* PCs de escritorio (1440px - 1919px) macbook */
|
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
/* main{ background-color: greenyellow; } */
|
|
main {
|
|
min-height: 80dvh;
|
|
}
|
|
}
|
|
|
|
/* Pantallas Ultrawide (1920px en adelante) */
|
|
@media (min-width: 1920px) {
|
|
/* main{ background-color: red; } */
|
|
main {
|
|
min-height: 80dvh;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
<!-- {# i pagination #} -->
|
|
{% if total_pages > 1 %}
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mt-4">
|
|
|
|
<li class="page-item {% if current_page == 1 %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% for p in range(1, total_pages + 1) %}
|
|
<li class="page-item {% if p == current_page %}active{% endif %}">
|
|
<a class="page-link" href="?page={{ p }}">{{ p }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
|
|
<li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
<!-- {# f pagination #} -->
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="card-container" data-aos="zoom-out-left" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">
|
|
|
|
{% for ele in data %}
|
|
|
|
<div class="col card-wrapper" data-id="{{ele[0]}}">
|
|
<div class="card h-100">
|
|
|
|
<img src="{{ (ele[5] if ele[5] is not none else url_for('static', filename='y_img/other/no_img.png'))|safe }}"
|
|
class="card-img-top" alt="card image">
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<h5 class="card-title">{{ ele[3] }}</h5>
|
|
<p class="card-text">{{ ele[4] }}...</p>
|
|
<small class="text-muted">
|
|
<i class="bi bi-calendar-week"></i> {{ ele[1] }}<br>
|
|
{% if ele[2] is not none %}
|
|
<i class="bi bi-arrow-repeat"></i> {{ ele[2] }}<br>
|
|
{% endif %}
|
|
<i class="bi bi-clock"></i> {{ ele[6] }} min.
|
|
</small>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<a class="btn btn-primary btn-sm" href="{{ url_for('post', post_id=ele[0]) }}"><i
|
|
class="bi bi-eye-fill"></i></a>
|
|
<a class="btn btn-secondary btn-sm" href="{{ url_for('edit_post', id_post=ele[0]) }}"><i
|
|
class="bi bi-vector-pen"></i></a>
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{ele[0]}}">
|
|
<i class="bi bi-trash3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<!-- {# i pagination #} -->
|
|
{% if total_pages > 1 %}
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mt-4">
|
|
|
|
<li class="page-item {% if current_page == 1 %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% for p in range(1, total_pages + 1) %}
|
|
<li class="page-item {% if p == current_page %}active{% endif %}">
|
|
<a class="page-link" href="?page={{ p }}">{{ p }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
|
|
<li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
<!-- {# f pagination #} -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{% endblock body %}
|
|
|
|
{% block js %}
|
|
|
|
|
|
<!-- {# aos script #} -->
|
|
{% include 'z_comps/aos_script.html' %}
|
|
|
|
|
|
|
|
<!-- jQuery y jConfirm -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>
|
|
|
|
<script>
|
|
function delete_post(e) {
|
|
let btn = $(this); // `this` es el botón que lanzó el jConfirm
|
|
let postId = btn.data('id'); // lee el data-id
|
|
let data = { 'id': postId };
|
|
|
|
fetch('/user/del-post', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data),
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Error en la respuesta del servidor');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.ok) {
|
|
// Aquí puedes agregar código para eliminar el post del DOM
|
|
|
|
console.log(data.message);
|
|
document.querySelector(`div [data-id='${data.id}']`).remove();
|
|
// Por ejemplo, si el post está en un elemento con clase 'post':
|
|
btn.closest('.post').remove();
|
|
} else {
|
|
console.error('Error:', data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
|
|
// https://htmlguyllc.github.io/jConfirm/
|
|
$(function(){
|
|
$('.delete-btn').jConfirm({
|
|
//false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
|
|
btns: false,
|
|
//string: question displayed to the user
|
|
question: '¿Deseas continuar con la eliminación?',
|
|
//string: confirm button text
|
|
confirm_text: 'Sí',
|
|
//string: deny button text
|
|
deny_text: 'No',
|
|
//boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
|
|
// follow_href: true,
|
|
//boolean: if true and follow_href is true, the href will be opened in a new window
|
|
open_new_tab: false,
|
|
//boolean: if true, the tooltip will be hidden if you click outside of it
|
|
hide_on_click: true,
|
|
//string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
|
|
position: 'auto',
|
|
//boolean: if true, the deny button will be shown
|
|
show_deny_btn: true,
|
|
//string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
|
|
theme: 'bootstrap-4',
|
|
//string ('tiny', 'small', 'medium', 'large')
|
|
size: 'medium',
|
|
//boolean: show the tooltip immediately on instantiation
|
|
show_now: false,
|
|
//string: class(es) to add to the tooltip
|
|
'class': ''
|
|
}).on('confirm', delete_post)
|
|
.on('deny', function(e){
|
|
var btn = $(this);
|
|
//do something on deny
|
|
}).on('jc-show', function(e, tooltip){
|
|
// console.log("el tooltip es visible");
|
|
//do something when tooltip is shown
|
|
//tooltip dom element is passed as the second parameter
|
|
}).on('jc-hide', function(e){
|
|
//do something when tooltip is hidden
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock js %} |