170 lines
7.5 KiB
HTML
170 lines
7.5 KiB
HTML
{% load static ui_extras %}
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Каталог анкет</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link href="{% static 'style.css' %}" rel="stylesheet">
|
||
<style>
|
||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; margin:0; background:#f7f7fb; color:#111; }
|
||
.topbar { display:flex; gap:16px; align-items:center; padding:14px 18px; background:#111827; color:#fff; }
|
||
.topbar a { color:#cfe3ff; text-decoration:none; }
|
||
.container { max-width:1100px; margin:24px auto; padding:0 16px; }
|
||
|
||
.messages { list-style:none; padding:0; margin:0 0 16px; }
|
||
.messages li { padding:10px 12px; margin-bottom:8px; border-radius:10px; }
|
||
.messages li.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
|
||
.messages li.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
|
||
.messages li.info { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
|
||
|
||
.filters { display:grid; grid-template-columns: repeat(8, 1fr); gap:10px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; }
|
||
.filters input[type="text"], .filters select { width:100%; border:1px solid #d1d5db; border-radius:8px; padding:8px 10px; font:inherit; background:#fff; }
|
||
|
||
/* Фото‑карточки */
|
||
.list { margin-top:16px; display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
|
||
.card-photo { position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; background:#e5e7eb; }
|
||
.card-photo img { width:100%; height:280px; object-fit:cover; display:block; }
|
||
.card-photo__overlay {
|
||
position:absolute; left:0; right:0; bottom:0;
|
||
padding:12px 14px;
|
||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 90%);
|
||
color:#fff;
|
||
}
|
||
.card-photo__title { font-weight:700; font-size:18px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
|
||
|
||
.pagination { display:flex; gap:10px; margin:16px 0; align-items:center; }
|
||
.pagination a, .pagination span { padding:8px 12px; border-radius:10px; border:1px solid #d1d5db; text-decoration:none; color:#111; background:#fff; }
|
||
.pagination .disabled { opacity:.5; pointer-events:none; }
|
||
.btn { padding:9px 12px; border-radius:10px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-weight:600; }
|
||
.muted { color:#6b7280; font-size:14px; }
|
||
.pill { display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; margin:2px 6px 2px 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div style="flex:1 1 auto;">Каталог анкет (ADMIN)</div>
|
||
<nav style="display:flex; gap:14px;">
|
||
<a href="{% url 'ui:index' %}">Главная</a>
|
||
<a href="{% url 'ui:cabinet' %}">Кабинет</a>
|
||
<a href="{% url 'ui:profiles' %}">Каталог</a>
|
||
<a href="{% url 'ui:logout' %}">Выход</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container">
|
||
|
||
{% if messages %}
|
||
<ul class="messages">
|
||
{% for message in messages %}
|
||
<li class="{{ message.tags }}">{{ message }}</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
|
||
<!-- Фильтры оставил: админ всё ещё может искать/сортировать -->
|
||
<form class="filters" method="get" action="{% url 'ui:profiles' %}">
|
||
<div>
|
||
<label class="muted">Поиск</label>
|
||
<input type="text" name="q" value="{{ filters.q }}" placeholder="имя или email">
|
||
</div>
|
||
<div>
|
||
<label class="muted">Роль</label>
|
||
<select name="role">
|
||
<option value="">Любая</option>
|
||
<option value="CLIENT" {% if filters.role == "CLIENT" %}selected{% endif %}>CLIENT</option>
|
||
<option value="ADMIN" {% if filters.role == "ADMIN" %}selected{% endif %}>ADMIN</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="muted">Сортировка</label>
|
||
<select name="sort">
|
||
<option value="name" {% if filters.sort == "name" %}selected{% endif %}>Имя ↑</option>
|
||
<option value="name_desc" {% if filters.sort == "name_desc" %}selected{% endif %}>Имя ↓</option>
|
||
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="muted">На странице</label>
|
||
<select name="limit">
|
||
{% for n in page_sizes %}
|
||
<option value="{{ n }}"{% if filters.limit == n %} selected{% endif %}>{{ n }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="muted">Страница</label>
|
||
<input type="text" name="page" value="{{ filters.page }}" style="width:90px;">
|
||
</div>
|
||
<div style="display:flex; align-items:flex-end;">
|
||
<button class="btn" type="submit">Применить</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="pagination">
|
||
{% with q=filters.q role=filters.role active=filters.active domain=filters.domain sort=filters.sort limit=filters.limit %}
|
||
{% if page.has_prev %}
|
||
<a href="?q={{ q }}&role={{ role }}&active={{ active }}&domain={{ domain }}&sort={{ sort }}&limit={{ limit }}&page={{ page.page|add:"-1" }}">« Предыдущая</a>
|
||
{% else %}
|
||
<span class="disabled">« Предыдущая</span>
|
||
{% endif %}
|
||
<span>Стр. {{ page.page }}</span>
|
||
{% if page.has_next %}
|
||
<a href="?q={{ q }}&role={{ role }}&active={{ active }}&domain={{ domain }}&sort={{ sort }}&limit={{ limit }}&page={{ page.page|add:"1" }}">Следующая »</a>
|
||
{% else %}
|
||
<span class="disabled">Следующая »</span>
|
||
{% endif %}
|
||
{% endwith %}
|
||
</div>
|
||
|
||
{% if error %}
|
||
<div class="messages"><li class="error">{{ error }}</li></div>
|
||
{% endif %}
|
||
|
||
<!-- Фото‑плитка карточек -->
|
||
<div class="list">
|
||
{% for p in profiles %}
|
||
<a class="card-photo" href="{% url 'ui:profile_detail' p.id %}" aria-label="Открыть {{ p.name }}">
|
||
{% if p.photo_url %}
|
||
<img src="{{ p.photo_url }}" alt="{{ p.name }}">
|
||
{% elif p.photo %}
|
||
<img src="{{ p.photo }}" alt="{{ p.name }}">
|
||
{% elif p.email %}
|
||
<img src="{{ p.email|gravatar_url:600 }}" alt="{{ p.name }}">
|
||
{% else %}
|
||
<img src="{% static 'img/profile_placeholder.jpg' %}" alt="{{ p.name }}">
|
||
{% endif %}
|
||
<div class="card-photo__overlay">
|
||
<div class="card-photo__title">
|
||
{{ p.name }}{% if p.age %}, {{ p.age }}{% endif %}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
{% empty %}
|
||
<div class="card">
|
||
<div class="muted">Ничего не найдено. Попробуйте изменить фильтры.</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="pagination">
|
||
{% with q=filters.q role=filters.role active=filters.active domain=filters.domain sort=filters.sort limit=filters.limit %}
|
||
{% if page.has_prev %}
|
||
<a href="?q={{ q }}&role={{ role }}&active={{ active }}&domain={{ domain }}&sort={{ sort }}&limit={{ limit }}&page={{ page.page|add:"-1" }}">« Предыдущая</a>
|
||
{% else %}
|
||
<span class="disabled">« Предыдущая</span>
|
||
{% endif %}
|
||
<span>Стр. {{ page.page }}</span>
|
||
{% if page.has_next %}
|
||
<a href="?q={{ q }}&role={{ role }}&active={{ active }}&domain={{ domain }}&sort={{ sort }}&limit={{ limit }}&page={{ page.page|add:"1" }}">Следующая »</a>
|
||
{% else %}
|
||
<span class="disabled">Следующая »</span>
|
||
{% endif %}
|
||
{% endwith %}
|
||
</div>
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|