This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
@@ -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">✓ {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>
|
<span style="font-size:0.82rem;color:#34d399">✓ {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>
|
||||||
|
|||||||
111
backlogger/templates/backlogger/live.html
Normal file
111
backlogger/templates/backlogger/live.html
Normal 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 %}
|
||||||
@@ -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'),
|
||||||
|
|||||||
@@ -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:
|
||||||
|
|||||||
Reference in New Issue
Block a user