172 lines
11 KiB
HTML
172 lines
11 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
{% import "posts/profile_card.html" as card %}
|
||
|
||
|
||
{% block title %}Посты{% endblock %}
|
||
|
||
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<section class="c_dg3k4">
|
||
<div class="c_gtoe9">
|
||
<div class="c_iiehk">
|
||
<div class="c_8xkk0 b_2rmrs">
|
||
|
||
<div class="b_hjteq">
|
||
<div class="b_zo7wz" for="avatar">
|
||
<img class="b_rhmvx" src="/a/{{find._id}}" alt="{{find.username}}" id="preview" crossorigin="anonymous" fetchpriority="high" loading="eager">
|
||
</div>
|
||
</div>
|
||
<p class="c_kpaav b_xsvl1">{{find.username}}</p>
|
||
{% if 'admin' in user.get('roles', []) %}
|
||
<div class="c_ctfod b_289i1" id="switch-user">
|
||
<button class="c_d2l0b b_al8e7">Переключиться на пользователя</button>
|
||
</div>
|
||
|
||
<script>
|
||
const userId = '{{find._id}}';
|
||
|
||
document.getElementById('switch-user').addEventListener('click', async () => {
|
||
try {
|
||
const resp = await fetch('/api/admin/login', {
|
||
method: 'POST',
|
||
credentials: 'include',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ user_id: userId })
|
||
});
|
||
|
||
if (!resp.ok) throw new Error(`Server returned ${resp.status}`);
|
||
window.location.href = '/profile';
|
||
} catch (err) {
|
||
console.error('Switch user failed:', err);
|
||
showToast({message: 'Не удалось переключиться на пользователя.', status: 'error'});
|
||
}
|
||
});
|
||
</script>
|
||
{% endif %}
|
||
{% if 'admin' in user.get('roles', []) %}
|
||
<div class="c_ctfod b_289i1"><span class="c_d2l0b b_al8e7">Написать пользователю</span></div>
|
||
{% endif %}
|
||
<div >На платформе с {{ (find._id.generation_time.strftime('%Y')) if find._id else ''}}</div>
|
||
{% if find.get('grade') is not none%}
|
||
<p class="it o">Звание:</p>
|
||
<p class="it">{{find.grade}}</p>
|
||
{% endif %}
|
||
{% if find.get('biography') is not none%}
|
||
<p class="it o">Биография:</p>
|
||
<p class="it">{{find.biography}}</p>
|
||
{% endif %}
|
||
<p>👁 {{total_watch_count}} (+{{today_watch_count}} Сегодня)</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="c_ru432">
|
||
<div class="c_tihtk">
|
||
{% for i in cards %}
|
||
{{ card.section(i, loop.index, user) }}
|
||
{% endfor %}
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
const avatarInput = document.getElementById('avatar');
|
||
const preview = document.getElementById('preview')
|
||
|
||
avatarInput.addEventListener('change', () => {
|
||
if (avatarInput.files.length > 0) {
|
||
const file = avatarInput.files[0];
|
||
const imageUrl = URL.createObjectURL(file);
|
||
preview.src = imageUrl
|
||
// fetch
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{{ footer.section() }}
|
||
{% endblock %}
|
||
|
||
{% block head %}
|
||
{{ header.style() }}
|
||
{{ card.style() }}
|
||
<style>
|
||
.o{font-style: italic;color: #777;}
|
||
.it{padding: 0px 15px;}
|
||
.b_xsvl1 { color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-align: center; padding: 0 10px;}
|
||
.b_u9ode { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; justify-content: center; padding: 10px 0; }
|
||
.b_al8e7 { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_m2ah9 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 15px 33px; }
|
||
.b_rhmvx { border-radius: 1em; height: 140px; min-width: 140px; max-width: 100%; object-position: top; object-fit: cover;}
|
||
.b_lgvu4 { align-items: center; background: #5F1798; border-radius: 25px; bottom: 0; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; width: 50px; }
|
||
.b_zo7wz { align-items: center; display: flex; justify-content: space-around; width: 100%; }
|
||
.b_jkzqx { flex-shrink: 0; height: 200px; width: 100%; visibility: hidden;}
|
||
.b_hjteq { align-items: center; display: flex; width: 100%; padding: 0 8px;}
|
||
.b_yzw2z { align-items: center; background: #DC3545; border-radius: 5px; display: flex; justify-content: center; padding: 10px 33px; }
|
||
.b_2rmrs { align-items: center; align-self: stretch; background: #FFF; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; }
|
||
.b_440jc { color: #171717; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_v63fu { align-items: center; background: #F39318; border-radius: 5px; display: flex; justify-content: center; padding: 15px 55px; }
|
||
.b_h9dsc { display: none; align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; flex-direction: column; gap: 15px; justify-content: center; padding: 10px 0; }
|
||
.b_ld219 { color: #171717; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.b_ny6vg { align-items: center; box-shadow: 0 -1px 0 0 #5F1798 inset; display: flex; height: 35px; justify-content: center; padding: 0 10px; }
|
||
.b_v15gw { color: #969696; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.b_cros1 { align-items: center; display: flex; height: 35px; justify-content: center; padding: 0 10px; }
|
||
.b_289i1 { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 13px 15px; width: calc(100% - 30px); }
|
||
.b_3kfnv { align-self: stretch; height: 400px; }
|
||
.b_xcy5t { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.b_qrxwg { align-items: center; background: rgba(14, 214, 70, 0.20); border-radius: 30px; display: flex; justify-content: center; padding: 1.5px 10px; }
|
||
.b_n8iqv { -webkit-box-orient: vertic_dg3k4cal; -webkit-line-clamp: 1; color: #000; display: -webkit-box; flex: 1 0 0; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_8m3ql { align-items: center; align-self: stretch; display: flex; justify-content: center; }
|
||
.b_y8yqp { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_4vs5o { aspect-ratio: 1/1; border-radius: 50px; height: 50px; width: 50px; }
|
||
.b_rvfm3 { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_1imfl { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
|
||
.b_eu6mo { align-items: center; align-self: stretch; display: flex; gap: 13px; height: 50px; }
|
||
.b_714yb { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
|
||
.b_x26c8 { align-self: stretch; 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_lt1br { align-items: flex-start; align-self: stretch; background: #FFF; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; }
|
||
.b_lstsy { align-items: flex-start; border-radius: 10px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; flex-shrink: 0; width: 335px; }
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }
|
||
|
||
|
||
.c_iiehk { align-items: flex-end; align-self: stretch; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; }
|
||
.c_nnsh6 { align-content: center; align-items: baseline; display: flex; flex-shrink: 0; justify-content: space-around; padding: 3px 0; row-gap: 8px; width: 315px; flex-direction: column;}.c_3ihvi { align-items: center; background: #FFF; display: flex; flex-direction: column; flex-shrink: 0; gap: 15px; justify-content: center; padding: 15px 10px; width: 335px; }
|
||
.c_nnsh6>a, .c_nnsh6>a>span{width: 100%;box-shadow: none;}
|
||
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 20px; justify-content: center; width: 335px; }
|
||
.c_ru432 { align-content: flex-start; align-items: flex-start; background: #FFF; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 0; width: 335px; }
|
||
.c_gtoe9 { align-items: center; display: flex; flex-direction: column; gap: 30px; width: 335px; }
|
||
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; width: 100%; }
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
||
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: center; padding: 3px 0; }
|
||
.c_3ihvi { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 15px 85px; }
|
||
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 700px; }
|
||
.c_ru432 { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; padding: 15px 0; }
|
||
.c_gtoe9 { align-items: center; align-self: stretch; display: flex; flex-direction: column; gap: 30px; padding: 0 49px; }
|
||
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; width: 800px; }
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
|
||
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding-bottom: 5px; }
|
||
.c_3ihvi { align-items: flex-start; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; width: 1045px; }
|
||
.c_tihtk { align-content: flex-start; align-items: flex-start; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
|
||
.c_ru432 { align-items: center; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; flex: 1 0 0; padding: 15px 0; }
|
||
.c_gtoe9 { align-items: flex-start; align-self: stretch; display: flex; gap: 20px; padding: 0 99px; }
|
||
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; width: 1600px; }
|
||
}</style>
|
||
{{ footer.style() }}
|
||
{% endblock %} |