fix: 改善任务编辑器布局与无障碍体验
- 调整任务编辑器的字号和文本框高度,使其更适合笔记本视口 - 将表单标签与控件正确关联,并应用 Bootstrap 标签样式 - 使用语义化表单元素优化复选框、进度显示和导入模式结构
This commit is contained in:
@@ -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
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user