feat: apply new Мои Товары design system across all templates
Replace Pico CSS with custom design: dark sidebar layout, Golos Text + JetBrains Mono fonts, orange accent (#FF5500), new component classes (cards, tables, buttons, tags, toggles, alerts, tabs, login split-panel). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mguschin
@@ -1,52 +1,53 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Альбомы ВК — ЭВОСИНК{% endblock %}
|
||||
{% block title %}Альбомы ВК — Мои Товары{% endblock %}
|
||||
{% block page_title %}Каталог ВКонтакте{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-between align-center mb-3">
|
||||
<h1 style="font-size:1.3rem; margin:0;"><i class="bi bi-badge-vr me-2"></i>Каталог ВКонтакте — Альбомы</h1>
|
||||
<span class="text-muted small">Всего: {{ albums | length }}</span>
|
||||
</div>
|
||||
<div class="pg-title">Каталог ВКонтакте — Альбомы</div>
|
||||
<div class="pg-sub">Альбомы из VK Market · Всего: {{ albums | length }}</div>
|
||||
|
||||
<article class="card">
|
||||
{% if not vk_conn %}
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="bi bi-plug" style="font-size:2rem;"></i>
|
||||
<p class="mt-2">ВКонтакте не подключён.<br><a href="/connections">Перейти к подключениям</a></p>
|
||||
</div>
|
||||
{% elif albums %}
|
||||
<div class="table-scroll">
|
||||
<table class="align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Название</th>
|
||||
<th>Товаров</th>
|
||||
<th>ID</th>
|
||||
<th>Обновлено</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for a in albums %}
|
||||
<tr>
|
||||
<td><i class="bi bi-collection me-1 text-muted"></i> <strong>{{ a.title }}</strong></td>
|
||||
<td class="text-muted">{{ a.count if a.count is not none else '—' }}</td>
|
||||
<td class="text-muted small">{{ a.album_id }}</td>
|
||||
<td class="text-muted small">{{ a.fetched_at | datefmt }}</td>
|
||||
<td>
|
||||
<a href="/vk-catalog/albums/{{ a.album_id }}/products" role="button" class="outline sm">
|
||||
<i class="bi bi-box-seam"></i> Товары
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="bi bi-collection" style="font-size:2rem;"></i>
|
||||
<p class="mt-2">Альбомы ещё не загружены.<br>Синхронизация выполняется каждые {{ refresh_interval }} сек. автоматически.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
<div class="card" style="padding:0;">
|
||||
{% if not vk_conn %}
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-plug"></i>
|
||||
<p>ВКонтакте не подключён.<br><a href="/connections" style="color:#FF5500;">Перейти к подключениям</a></p>
|
||||
</div>
|
||||
{% elif albums %}
|
||||
<div class="table-wrap">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Название</th>
|
||||
<th>Товаров</th>
|
||||
<th>ID</th>
|
||||
<th>Обновлено</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for a in albums %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="tbl-name"><i class="bi bi-collection" style="color:#9EA8BE;margin-right:6px;"></i>{{ a.title }}</div>
|
||||
</td>
|
||||
<td><span class="mono" style="font-size:12px;">{{ a.count if a.count is not none else '—' }}</span></td>
|
||||
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ a.album_id }}</span></td>
|
||||
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ a.fetched_at | datefmt }}</span></td>
|
||||
<td>
|
||||
<a href="/vk-catalog/albums/{{ a.album_id }}/products" class="btn btn-outline btn-xs">
|
||||
<i class="bi bi-box-seam"></i> Товары
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-collection"></i>
|
||||
<p>Альбомы ещё не загружены.<br>Синхронизация выполняется каждые {{ refresh_interval }} сек. автоматически.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,75 +1,72 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Товары ВК — {{ album.title }} — ЭВОСИНК{% endblock %}
|
||||
{% block title %}Товары ВК — {{ album.title }} — Мои Товары{% endblock %}
|
||||
{% block page_title %}Каталог ВКонтакте{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/vk-catalog/albums">Альбомы ВК</a></li>
|
||||
<li>{{ album.title }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/vk-catalog/albums">Альбомы ВК</a></li>
|
||||
<li>{{ album.title }}</li>
|
||||
</ol>
|
||||
|
||||
<div class="d-flex justify-between align-center mb-3">
|
||||
<h1 style="font-size:1.3rem; margin:0;"><i class="bi bi-box-seam me-2"></i>{{ album.title }}</h1>
|
||||
<span class="text-muted small">Всего: {{ products | length }}</span>
|
||||
<div class="pg-title">{{ album.title }}</div>
|
||||
<div class="pg-sub">Товары из VK Market · Всего: {{ products | length }}</div>
|
||||
|
||||
<div class="card" style="padding:0;">
|
||||
{% if products %}
|
||||
<div class="table-wrap">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:56px;"></th>
|
||||
<th>Название</th>
|
||||
<th>Цена</th>
|
||||
<th>Статус</th>
|
||||
<th>ID</th>
|
||||
<th>Обновлено</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in products %}
|
||||
<tr>
|
||||
<td>
|
||||
{% if p.thumb_url %}
|
||||
<img src="{{ p.thumb_url }}" alt="" style="width:40px;height:40px;object-fit:cover;border-radius:6px;">
|
||||
{% else %}
|
||||
<div style="width:40px;height:40px;border-radius:6px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;color:#9EA8BE;">
|
||||
<i class="bi bi-image"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="tbl-name">{{ p.name }}</div>
|
||||
{% if p.description %}
|
||||
<div class="tbl-sub">{{ p.description[:80] }}{% if p.description|length > 80 %}…{% endif %}</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><span class="mono">{% if p.price is not none %}{{ p.price | price }}{% else %}—{% endif %}</span></td>
|
||||
<td>
|
||||
{% if p.availability == 0 %}
|
||||
<span class="tag tag-gr"><span class="dot g"></span>В наличии</span>
|
||||
{% elif p.availability == 1 %}
|
||||
<span class="tag tag-dim"><span class="dot d"></span>Удалён</span>
|
||||
{% elif p.availability == 2 %}
|
||||
<span class="tag tag-yl"><span class="dot y"></span>Недоступен</span>
|
||||
{% else %}
|
||||
<span style="color:#9EA8BE;font-size:12px;">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ p.vk_product_id }}</span></td>
|
||||
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ p.fetched_at | datefmt }}</span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
<p>Товары в этом альбоме не найдены.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<article class="card">
|
||||
{% if products %}
|
||||
<div class="table-scroll">
|
||||
<table class="align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Название</th>
|
||||
<th>Цена</th>
|
||||
<th>Статус</th>
|
||||
<th>ID</th>
|
||||
<th>Обновлено</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in products %}
|
||||
<tr>
|
||||
<td style="width:48px;">
|
||||
{% if p.thumb_url %}
|
||||
<img src="{{ p.thumb_url }}" alt="" style="width:40px;height:40px;object-fit:cover;border-radius:4px;">
|
||||
{% else %}
|
||||
<span class="text-muted"><i class="bi bi-image" style="font-size:1.5rem;"></i></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ p.name }}</strong>
|
||||
{% if p.description %}
|
||||
<br><span class="text-muted small">{{ p.description[:80] }}{% if p.description|length > 80 %}…{% endif %}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-muted">
|
||||
{% if p.price is not none %}{{ p.price | price }}{% else %}—{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if p.availability == 0 %}
|
||||
<span class="badge badge-success">В наличии</span>
|
||||
{% elif p.availability == 1 %}
|
||||
<span class="badge badge-secondary">Удалён</span>
|
||||
{% elif p.availability == 2 %}
|
||||
<span class="badge badge-warning">Недоступен</span>
|
||||
{% else %}
|
||||
<span class="text-muted small">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-muted small">{{ p.vk_product_id }}</td>
|
||||
<td class="text-muted small">{{ p.fetched_at | datefmt }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="bi bi-box-seam" style="font-size:2rem;"></i>
|
||||
<p class="mt-2">Товары в этом альбоме не найдены.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user