6b05ba3e2c
- Complete tasks now displayed in scroll view alongside unfinished tasks - Priority order: completed tasks first (by finished_time desc), then unfinished (by order asc) - Time picker-style scroll: wheel scroll snaps per task, center item gets visual focus - Landscape mode (>=1024px): scroll view + edit panel side by side, panel always visible - Portrait mode: edit panel slides in from right on tap - Fixed flex layout so scroll view and edit panel align perfectly in height
93 lines
3.5 KiB
HTML
93 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tasks - GoalsBreakDown{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/tasks.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="tasks-page">
|
|
<div class="tasks-header">
|
|
<h1>Tasks</h1>
|
|
<div class="goal-selector-container">
|
|
<label for="goal-selector">Select Goal:</label>
|
|
<select id="goal-selector"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tasks-main">
|
|
<div class="tasks-container">
|
|
<div id="scroll-view" class="scroll-view">
|
|
<div id="tasks-list" class="tasks-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="side-panel" class="side-panel">
|
|
<div class="side-panel-header">
|
|
<h2>Edit Task</h2>
|
|
<button class="side-panel-close" id="side-panel-close">×</button>
|
|
</div>
|
|
<div class="side-panel-content">
|
|
<div class="form-group">
|
|
<label for="edit-task-title">Title</label>
|
|
<input type="text" id="edit-task-title">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-task-desc">Description</label>
|
|
<textarea id="edit-task-desc" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-task-status">Status</label>
|
|
<select id="edit-task-status">
|
|
<option value="todo">To Do</option>
|
|
<option value="doing">Doing</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="done">Done</option>
|
|
</select>
|
|
</div>
|
|
<div id="side-panel-error" class="error-message"></div>
|
|
<div class="side-panel-actions">
|
|
<button class="btn-success" id="save-task-btn">Save</button>
|
|
<button class="btn-danger" id="delete-task-btn">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="create-task-container">
|
|
<button id="create-task-btn" class="btn-success">+ Create Task</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="task-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="task-modal-title">Create Task</h2>
|
|
<button class="modal-close" id="task-modal-close">×</button>
|
|
</div>
|
|
<form id="task-form">
|
|
<input type="hidden" id="task-id">
|
|
<div class="form-group">
|
|
<label for="task-title">Task Title</label>
|
|
<input type="text" id="task-title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-desc">Description</label>
|
|
<textarea id="task-desc" rows="3"></textarea>
|
|
</div>
|
|
<div id="task-error" class="error-message"></div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary">Save</button>
|
|
<button type="button" class="btn-secondary" id="task-modal-cancel">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/tasks.js') }}"></script>
|
|
{% endblock %}
|