129 lines
2.8 KiB
HTML
129 lines
2.8 KiB
HTML
{% extends 'template.html' %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="{{ url_for( 'static', filename='h_tmp_user/d_read_post/read_post.css' ) }}">
|
|
{% endblock css %}
|
|
|
|
{% block navbar %}
|
|
{% include 'z_comps/navbar.html' %}
|
|
{% endblock navbar %}
|
|
|
|
{% block body %}
|
|
|
|
<style>
|
|
.share {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #eee;
|
|
border-radius: 2rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
overflow: hidden;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.share:hover {
|
|
width: 18rem;
|
|
}
|
|
|
|
.share__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.share__toggle {
|
|
background: #549c67;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
margin: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.share__button {
|
|
background: #555;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
margin-left: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
/* Mostrar botones solo cuando se hace hover */
|
|
.share:hover .share__button {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.fb { background: #1877f2; }
|
|
.tw { background: #000000; }
|
|
.in { background: #0077b5; }
|
|
.copy { background: #444; }
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<div class="pst-cont">
|
|
<h1>{{data[5]}}</h1>
|
|
|
|
|
|
<spam>
|
|
<a type="button" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Publicaciones</a> <br>
|
|
<i class="bi bi-person-circle"></i> {{data[0]}} {{data[1]}} |
|
|
<i class="bi bi-pencil-square"></i> {{data[2]}} |
|
|
{% if data[3] is not none %}
|
|
<i class="bi bi-arrow-repeat"></i> {{data[3]}} |
|
|
{% endif %}
|
|
<i class="bi bi-clock-history"></i> {{ data[4] }} Minutos |
|
|
<i class="bi bi-eye"></i>
|
|
</spam>
|
|
|
|
<div class="share">
|
|
<div class="share__wrapper">
|
|
<div class="share__toggle"><i class="bi bi-share-fill"></i></div>
|
|
<button href="#" class="share__button fb"><i class="bi bi-facebook"></i></button>
|
|
<button href="#" class="share__button tw"><i class="bi bi-twitter-x"></i></button>
|
|
<button class="share__button in"><i class="bi bi-linkedin"></i></button>
|
|
<button class="share__button copy"><i class="bi bi-link-45deg"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div >
|
|
{{data[6] | safe}}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.share__toggle').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
btn.closest('.share').classList.toggle('open');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
{% endblock body %}
|
|
{% block js %}
|
|
|
|
<script type="module" src="{{ url_for('static', filename='e_blog/copy_url.js') }}"></script>
|
|
|
|
<!-- {# flecha ir hasta arriba #} -->
|
|
{% include 'z_comps/arrow_to_up.html' %}
|
|
{% endblock js %} |