Internal
Public Access
Keith SmithandClaude Sonnet 4.5
8db9f99701
Root cause: The .app-layout.detail-closed class (2-class specificity) was overriding .app-layout (1-class specificity) at mobile, creating a 3-column grid "0 1fr 0" instead of single column "1fr". The task-pane was placed in column 1 (0 width), making it invisible. Fix: Explicitly override both .app-layout and .app-layout.detail-closed with equal specificity in the 768px breakpoint. Cache bust: v=6 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
147 lines
7.0 KiB
HTML
147 lines
7.0 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}KeepItGoing{% endblock %}</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
|
|
<link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml">
|
|
|
|
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=6">
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
{% block body %}
|
|
{% if user.is_authenticated %}
|
|
<div class="app-layout {% if not selected_task %}detail-closed{% endif %}" id="app">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div style="display: flex; align-items: center; gap: var(--space-md);">
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle sidebar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 12h18M3 6h18M3 18h18"/>
|
|
</svg>
|
|
</button>
|
|
<a href="{% url 'dashboard' %}" class="app-brand">KeepItGoing</a>
|
|
</div>
|
|
|
|
<div class="app-header-actions">
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme" title="Toggle dark/light mode">
|
|
<svg id="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
<svg id="theme-icon-dark" style="display: none;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="header-user">
|
|
<span>{{ user.email }}</span>
|
|
<a href="{% url 'profile' %}" class="btn btn-secondary btn-sm">Profile</a>
|
|
<a href="{% url 'logout' %}" class="btn btn-secondary btn-sm">Logout</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="app-sidebar" id="sidebar">
|
|
{% include 'tasks/_sidebar.html' %}
|
|
</aside>
|
|
|
|
<!-- Main Task Pane -->
|
|
<main class="task-pane">
|
|
{% if messages %}
|
|
<div class="messages">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Detail Panel -->
|
|
<aside class="detail-pane {% if not selected_task %}hidden{% endif %}" id="detail-pane">
|
|
{% block detail %}
|
|
{% if selected_task %}
|
|
{% include 'tasks/_task_detail.html' with task=selected_task %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>Select a task to view details</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
</aside>
|
|
|
|
<!-- Mobile overlay -->
|
|
<div class="mobile-overlay" id="mobile-overlay" onclick="closeMobileMenus()"></div>
|
|
</div>
|
|
|
|
<!-- Tag Edit/Create Modal (outside app-layout for proper fixed positioning) -->
|
|
<div class="modal-backdrop" id="tag-modal-backdrop">
|
|
<div class="modal" onclick="event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="tag-modal-title">New Tag</h2>
|
|
<button type="button" class="modal-close" onclick="closeTagModal()">
|
|
<svg style="width: 20px; height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="tag-form" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="tag-id" name="group_id" value="">
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="tag-name">Name</label>
|
|
<input type="text" class="form-input" id="tag-name" name="name" required placeholder="Tag name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Color</label>
|
|
<div class="color-presets">
|
|
<button type="button" class="color-preset" data-color="#3b82f6" style="background-color: #3b82f6"></button>
|
|
<button type="button" class="color-preset" data-color="#ef4444" style="background-color: #ef4444"></button>
|
|
<button type="button" class="color-preset" data-color="#10b981" style="background-color: #10b981"></button>
|
|
<button type="button" class="color-preset" data-color="#f59e0b" style="background-color: #f59e0b"></button>
|
|
<button type="button" class="color-preset" data-color="#8b5cf6" style="background-color: #8b5cf6"></button>
|
|
<button type="button" class="color-preset" data-color="#ec4899" style="background-color: #ec4899"></button>
|
|
<button type="button" class="color-preset" data-color="#06b6d4" style="background-color: #06b6d4"></button>
|
|
<button type="button" class="color-preset" data-color="#84cc16" style="background-color: #84cc16"></button>
|
|
</div>
|
|
<div class="color-custom-row">
|
|
<label class="color-custom-label">Custom:</label>
|
|
<input type="color" id="tag-color" name="color" value="#3b82f6" class="color-custom-input">
|
|
</div>
|
|
<input type="hidden" id="tag-color-hidden" name="color" value="#3b82f6">
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeTagModal()">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="tag-delete-btn" onclick="deleteTag()" style="display: none;">Delete</button>
|
|
<button type="submit" class="btn btn-primary" id="tag-submit-btn">Create</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Non-authenticated layout (auth pages) -->
|
|
<div class="auth-layout">
|
|
{% block auth_content %}{% endblock %}
|
|
</div>
|
|
<footer class="footer">
|
|
<p>© 2025 Firebug IT. All rights reserved.</p>
|
|
</footer>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
<script src="{% static 'js/app.js' %}?v=3"></script>
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|