new page and nav system

2026-04-03 21:03:52 +03:00
parent 65e029a417
commit c1230c0c86
6 changed files with 132 additions and 5 deletions
--- a/backlogger/static/backlogger/style.css
+++ b/backlogger/static/backlogger/style.css
@@ -23,6 +23,7 @@ a { color: inherit; text-decoration: none; }
 .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:hover { color: #e2e8f0; }
+.site-header nav a.nav-active { color: #e2e8f0; font-weight: 500; }

 /* ── Buttons ───────────────────────────────────────────────────── */
 .btn {
--- a/backlogger/templates/backlogger/base.html
+++ b/backlogger/templates/backlogger/base.html
@@ -4,15 +4,19 @@
 <head>
  <meta charset="UTF-8">
  <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' %}">
  {% block styles %}{% endblock %}
 </head>
 <body data-theme="{{ request.session.theme|default:'dark' }}">

 <header class="site-header">
-  <a class="brand" href="/">{% block brand %}k-boris.tech{% endblock %}</a>
-  <nav>{% block nav %}{% endblock %}</nav>
+  <a class="brand" href="{% url 'backlogger:list' %}">Kill My Backlog</a>
+  <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>

 {% block content %}{% endblock %}
--- a/backlogger/templates/backlogger/list.html
+++ b/backlogger/templates/backlogger/list.html
@@ -1,6 +1,6 @@
 {% extends 'backlogger/base.html' %}

-{% block title %}Backlogger — k-boris.tech{% endblock %}
+{% block title %}Library — Kill My Backlog{% endblock %}

 {% block styles %}
 <style>
@@ -70,7 +70,7 @@
 {% block content %}
 <div class="container">
  <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">
      {% if request.GET.imported %}
      <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>
--- a/backlogger/templates/backlogger/live.html
+++ b/backlogger/templates/backlogger/live.html
@@ -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 %}
--- a/backlogger/urls.py
+++ b/backlogger/urls.py
@@ -4,6 +4,7 @@ from . import views
 app_name = 'backlogger'
 urlpatterns = [
    path('', views.item_list, name='list'),
+    path('live/', views.live, name='live'),
    path('add/', views.item_add, name='add'),
    path('<int:pk>/edit/', views.item_edit, name='edit'),
    path('<int:pk>/delete/', views.item_delete, name='delete'),
--- a/backlogger/views.py
+++ b/backlogger/views.py
@@ -194,6 +194,16 @@ def steam_import(request):
    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
 def debug_delete_all(request):
    if not settings.DEBUG: