new page and nav system
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

This commit is contained in:
2026-04-03 21:03:52 +03:00
parent 65e029a417
commit c1230c0c86
6 changed files with 132 additions and 5 deletions

View File

@@ -23,6 +23,7 @@ a { color: inherit; text-decoration: none; }
.site-header nav { display: flex; gap: 1.5rem; align-items: center; } .site-header nav { display: flex; gap: 1.5rem; align-items: center; }
.site-header nav a { color: #64748b; font-size: 0.85rem; } .site-header nav a { color: #64748b; font-size: 0.85rem; }
.site-header nav a:hover { color: #e2e8f0; } .site-header nav a:hover { color: #e2e8f0; }
.site-header nav a.nav-active { color: #e2e8f0; font-weight: 500; }
/* ── Buttons ───────────────────────────────────────────────────── */ /* ── Buttons ───────────────────────────────────────────────────── */
.btn { .btn {

View File

@@ -4,15 +4,19 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Backlogger{% endblock %}</title> <title>{% block title %}Kill My Backlog{% endblock %}</title>
<link rel="stylesheet" href="{% static 'backlogger/style.css' %}"> <link rel="stylesheet" href="{% static 'backlogger/style.css' %}">
{% block styles %}{% endblock %} {% block styles %}{% endblock %}
</head> </head>
<body data-theme="{{ request.session.theme|default:'dark' }}"> <body data-theme="{{ request.session.theme|default:'dark' }}">
<header class="site-header"> <header class="site-header">
<a class="brand" href="/">{% block brand %}k-boris.tech{% endblock %}</a> <a class="brand" href="{% url 'backlogger:list' %}">Kill My Backlog</a>
<nav>{% block nav %}{% endblock %}</nav> <nav>
<a href="{% url 'backlogger:list' %}" class="{% if request.resolver_match.url_name == 'list' %}nav-active{% endif %}">Library</a>
<a href="{% url 'backlogger:live' %}" class="{% if request.resolver_match.url_name == 'live' %}nav-active{% endif %}">Live</a>
{% block nav %}{% endblock %}
</nav>
</header> </header>
{% block content %}{% endblock %} {% block content %}{% endblock %}

View File

@@ -1,6 +1,6 @@
{% extends 'backlogger/base.html' %} {% extends 'backlogger/base.html' %}
{% block title %}Backlogger — k-boris.tech{% endblock %} {% block title %}Library — Kill My Backlog{% endblock %}
{% block styles %} {% block styles %}
<style> <style>
@@ -70,7 +70,7 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<div class="top-bar"> <div class="top-bar">
<h1>Backlogger <span class="count">{{ items|length }}</span></h1> <h1>Library <span class="count">{{ items|length }}</span></h1>
<div style="display:flex;gap:0.5rem;align-items:center"> <div style="display:flex;gap:0.5rem;align-items:center">
{% if request.GET.imported %} {% if request.GET.imported %}
<span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span> <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>

View File

@@ -0,0 +1,111 @@
{% extends 'backlogger/base.html' %}
{% block title %}Live — Kill My Backlog{% endblock %}
{% block styles %}
<style>
.container { max-width: 720px; margin: 0 auto; padding: 2rem; }
.top-bar { margin-bottom: 2rem; }
.top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
.top-bar p { color: #64748b; font-size: 0.85rem; margin-top: 0.35rem; }
.live-list { display: flex; flex-direction: column; gap: 0.75rem; }
.live-item {
background: #0a0f1e;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.live-rank {
font-size: 0.75rem;
color: #334155;
font-variant-numeric: tabular-nums;
width: 1.5rem;
flex-shrink: 0;
text-align: right;
}
.live-body { flex: 1; min-width: 0; }
.live-name {
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.4rem;
}
.live-meta { display: flex; align-items: center; gap: 0.6rem; }
.badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
.badge-games { background: #3b2f6a; color: #a78bfa; }
.badge-books { background: #064e3b; color: #34d399; }
.badge-films { background: #431407; color: #fb923c; }
.badge-other { background: #1e293b; color: #94a3b8; }
.live-stat { font-size: 0.78rem; color: #64748b; }
.progress-bar { height: 3px; background: #1e293b; border-radius: 2px; margin-top: 0.5rem; }
.progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; }
.live-time { font-size: 0.75rem; color: #334155; flex-shrink: 0; white-space: nowrap; }
.empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
.empty a { color: #38bdf8; }
body[data-theme="light"] .live-item { background: #ffffff; border-color: #e2e8f0; }
body[data-theme="light"] .progress-bar { background: #e2e8f0; }
body[data-theme="light"] .progress-fill { background: #0284c7; }
body[data-theme="light"] .live-time { color: #94a3b8; }
body[data-theme="light"] .live-rank { color: #94a3b8; }
</style>
{% endblock %}
{% block nav %}
<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
{% endblock %}
{% block content %}
<div class="container">
<div class="top-bar">
<h1>Live</h1>
<p>Your 10 most recently touched items.</p>
</div>
{% if items %}
<div class="live-list">
{% for item in items %}
<div class="live-item">
<div class="live-rank">{{ forloop.counter }}</div>
<div class="live-body">
<div class="live-name" title="{{ item.name }}">{{ item.name }}</div>
<div class="live-meta">
<span class="badge badge-{{ item.category }}">{{ item.get_category_display }}</span>
<span class="live-stat">
{% if item.category == 'games' %}
{% if item.hours_played is not None %}{{ item.hours_played|floatformat:1 }}h{% endif %}
{% elif item.category == 'books' %}
{% if item.pages_read is not None %}p. {{ item.pages_read }}{% if item.total_pages %}/{{ item.total_pages }}{% endif %}{% endif %}
{% elif item.category == 'films' %}
{% if item.watched %}watched{% else %}not watched{% endif %}
{% endif %}
</span>
<span class="live-stat">{{ item.get_status_display }}</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: {{ item.progress_percent }}%"></div>
</div>
</div>
<a href="{% url 'backlogger:edit' item.pk %}" class="live-time">{{ item.updated_at|date:"M j" }}</a>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty">
Nothing here yet. <a href="{% url 'backlogger:add' %}">Add your first item.</a>
</div>
{% endif %}
</div>
{% endblock %}

View File

@@ -4,6 +4,7 @@ from . import views
app_name = 'backlogger' app_name = 'backlogger'
urlpatterns = [ urlpatterns = [
path('', views.item_list, name='list'), path('', views.item_list, name='list'),
path('live/', views.live, name='live'),
path('add/', views.item_add, name='add'), path('add/', views.item_add, name='add'),
path('<int:pk>/edit/', views.item_edit, name='edit'), path('<int:pk>/edit/', views.item_edit, name='edit'),
path('<int:pk>/delete/', views.item_delete, name='delete'), path('<int:pk>/delete/', views.item_delete, name='delete'),

View File

@@ -194,6 +194,16 @@ def steam_import(request):
return redirect(f"{reverse('backlogger:list')}?category=games&imported={imported}") return redirect(f"{reverse('backlogger:list')}?category=games&imported={imported}")
@login_required
def live(request):
items = (
Item.objects
.filter(user=request.user)
.order_by('-updated_at')[:10]
)
return render(request, 'backlogger/live.html', {'items': items})
@login_required @login_required
def debug_delete_all(request): def debug_delete_all(request):
if not settings.DEBUG: if not settings.DEBUG: