sam/goalsbreakdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tasks UI: scroll-to-focus picker, landscape layout, height alignment

Browse Source 
- 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
This commit is contained in:
Yuyao Huang
2026-05-08 15:47:25 +08:00
parent 79fde447e9
commit 6b05ba3e2c
4 changed files with 174 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/tasks.html
+37 -38
View File
@@ -16,18 +16,48 @@
</div>
</div>
<div class="tasks-container">
<div id="scroll-view" class="scroll-view">
<div id="tasks-list" class="tasks-list"></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="finished-section" class="finished-section">
<h2>Completed Tasks</h2>
<div id="finished-list" class="finished-list"></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">&times;</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>
<button id="create-task-btn" class="btn-success">+ Create Task</button>
<div class="create-task-container">
<button id="create-task-btn" class="btn-success">+ Create Task</button>
</div>
</div>
<div id="task-modal" class="modal">
@@ -54,37 +84,6 @@
</form>
</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">&times;</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>
{% endblock %}
{% block extra_js %}