fix: 改善任务编辑器布局与无障碍体验

- 调整任务编辑器的字号和文本框高度,使其更适合笔记本视口
- 将表单标签与控件正确关联,并应用 Bootstrap 标签样式
- 使用语义化表单元素优化复选框、进度显示和导入模式结构
This commit is contained in:
eddy
2026-08-01 14:53:43 +08:00
parent f014e37325
commit 4997c14bda
2 changed files with 86 additions and 40 deletions
+19
View File
@@ -273,6 +273,25 @@ body {
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
/* Task editor */
/* Compact type scale, scoped to the editor: at the board's default 1rem the form runs
past a laptop viewport and every textarea loses a visible line of text. */
#taskModal .modal-title {
font-size: 1.1rem;
}
#taskModal .form-label,
#taskModal .form-control,
#taskModal .form-select,
#taskModal .form-check-label,
#taskModal .modal-footer .btn {
font-size: 0.85rem;
}
/* Height comes from each textarea's rows attribute; this only stops horizontal
dragging, which would otherwise break the modal grid. */
#taskModal .task-editor-textarea {
resize: vertical;
}
/* Timeline */ /* Timeline */
.timeline-toggle { .timeline-toggle {
cursor: pointer; cursor: pointer;
+67 -40
View File
@@ -128,11 +128,11 @@
<input type="hidden" id="taskId" /> <input type="hidden" id="taskId" />
<div class="row g-3"> <div class="row g-3">
<div class="col-md-8"> <div class="col-md-8">
<label data-key="taskTitleLabel"></label <label for="taskTitle" class="form-label" data-key="taskTitleLabel"></label
><input id="taskTitle" class="form-control" required /> ><input id="taskTitle" class="form-control" required />
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label data-key="statusLabel"></label <label for="taskStatus" class="form-label" data-key="statusLabel"></label
><select id="taskStatus" class="form-select"> ><select id="taskStatus" class="form-select">
<option value="todo" data-key="todo"></option> <option value="todo" data-key="todo"></option>
<option value="inProgress" data-key="inProgress"></option> <option value="inProgress" data-key="inProgress"></option>
@@ -140,25 +140,33 @@
</select> </select>
</div> </div>
<div class="col-12"> <div class="col-12">
<label data-key="progressNotesLabel"></label <label
for="taskProgressNotes"
class="form-label"
data-key="progressNotesLabel"
></label
><textarea ><textarea
id="taskProgressNotes" id="taskProgressNotes"
class="form-control" class="form-control task-editor-textarea"
rows="3" rows="4"
data-key-placeholder="progressNotesPlaceholder" data-key-placeholder="progressNotesPlaceholder"
></textarea> ></textarea>
</div> </div>
<div class="col-12"> <div class="col-12">
<label data-key="descriptionLabel"></label <label
for="taskDescription"
class="form-label"
data-key="descriptionLabel"
></label
><textarea ><textarea
id="taskDescription" id="taskDescription"
class="form-control" class="form-control task-editor-textarea"
rows="4" rows="6"
data-key-placeholder="descriptionPlaceholder" data-key-placeholder="descriptionPlaceholder"
></textarea> ></textarea>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label data-key="priorityLabel"></label <label for="taskPriority" class="form-label" data-key="priorityLabel"></label
><select id="taskPriority" class="form-select"> ><select id="taskPriority" class="form-select">
<option value="low" data-key="lowPriority"></option> <option value="low" data-key="lowPriority"></option>
<option value="medium" data-key="mediumPriority"></option> <option value="medium" data-key="mediumPriority"></option>
@@ -166,14 +174,14 @@
</select> </select>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label data-key="languageLabel"></label <label for="taskLanguage" class="form-label" data-key="languageLabel"></label
><select id="taskLanguage" class="form-select"> ><select id="taskLanguage" class="form-select">
<option value="zh">中文</option> <option value="zh">中文</option>
<option value="en">English</option> <option value="en">English</option>
</select> </select>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label data-key="assigneeLabel"></label <label for="taskAssignee" class="form-label" data-key="assigneeLabel"></label
><input ><input
id="taskAssignee" id="taskAssignee"
class="form-control" class="form-control"
@@ -181,11 +189,15 @@
/> />
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label data-key="dueDateLabel"></label <label for="taskDueDate" class="form-label" data-key="dueDateLabel"></label
><input id="taskDueDate" type="date" class="form-control" /> ><input id="taskDueDate" type="date" class="form-control" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label data-key="collaboratorsLabel"></label <label
for="taskCollaborators"
class="form-label"
data-key="collaboratorsLabel"
></label
><input ><input
id="taskCollaborators" id="taskCollaborators"
class="form-control" class="form-control"
@@ -193,7 +205,7 @@
/> />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label data-key="progressLabel"></label <label for="taskProgress" class="form-label" data-key="progressLabel"></label
><input ><input
id="taskProgress" id="taskProgress"
type="range" type="range"
@@ -202,13 +214,18 @@
value="0" value="0"
class="form-range" class="form-range"
/> />
<div id="progressDisplay" class="text-center">0%</div> <div class="text-center">
<small id="progressDisplay">0%</small>
</div>
</div> </div>
<div class="col-12 form-check ms-2"> <div class="col-12">
<input id="taskHidden" type="checkbox" class="form-check-input" /><label <div class="form-check">
for="taskHidden" <input id="taskHidden" type="checkbox" class="form-check-input" /><label
data-key="hiddenTaskLabel" for="taskHidden"
></label> class="form-check-label"
data-key="hiddenTaskLabel"
></label>
</div>
</div> </div>
</div> </div>
</form> </form>
@@ -229,26 +246,36 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div id="importInfo"></div> <div id="importInfo"></div>
<label data-key="importMode"></label> <fieldset>
<div class="form-check"> <legend class="form-label fs-6" data-key="importMode"></legend>
<input <div class="form-check">
id="importModeReplace" <input
name="importMode" id="importModeReplace"
type="radio" name="importMode"
value="replace" type="radio"
checked value="replace"
class="form-check-input" checked
/><label for="importModeReplace" data-key="replaceMode"></label> class="form-check-input"
</div> /><label
<div class="form-check"> for="importModeReplace"
<input class="form-check-label"
id="importModeMerge" data-key="replaceMode"
name="importMode" ></label>
type="radio" </div>
value="merge" <div class="form-check">
class="form-check-input" <input
/><label for="importModeMerge" data-key="mergeMode"></label> id="importModeMerge"
</div> name="importMode"
type="radio"
value="merge"
class="form-check-input"
/><label
for="importModeMerge"
class="form-check-label"
data-key="mergeMode"
></label>
</div>
</fieldset>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" data-key="cancel"></button <button class="btn btn-secondary" data-bs-dismiss="modal" data-key="cancel"></button