ui: Redesign Homework Modal

close #173
MyHomeworkSpace · May 11, 2021 · 4927691 · 4927691
1 parent 32cfe87
commit 4927691
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 23 deletions.
diff --git a/app/homework/HomeworkModal.jsx b/app/homework/HomeworkModal.jsx
@@ -97,10 +97,7 @@ export default function HomeworkModal(props) {
 
 	const keydown = (shiftEnter) => {
 		return (e) => {
-			if (e.shiftKey && e.keyCode == 13 && shiftEnter) {
-				e.preventDefault();
-				return false;
-			} else if (e.keyCode == 13) {
+			if (e.keyCode == 13 && !(e.shiftKey && shiftEnter)) {
 				save();
 				e.preventDefault();
 				return false;
@@ -112,17 +109,30 @@ export default function HomeworkModal(props) {
 		<div class="modal-body">
 			{err && <div class="alert alert-danger">{err}</div>}
 
-			<PrefixedEdit class="homeworkModalName" placeholder="Name" value={name} onKeyDown={keydown(false)} onInput={(e) => setName(e.target.value)} />
-			<DatePicker value={due} change={setDue} />
-			<ClassPicker value={classId} change={setClassId} classes={props.classes} />
-			<label>
-				<input type="checkbox" checked={isComplete} onChange={(e) => setIsComplete(e.target.checked)} /> Done?
-			</label>
-			<textarea class="form-control homeworkModalDesc" placeholder="Description" onInput={(e) => setDesc(e.target.value)} onKeyDown={keydown(true)} value={desc}></textarea>
+			<div class="homeworkModalBody">
+
+				<div class="homeworkModalNameWrapper">
+					<PrefixedEdit class="homeworkModalName" placeholder="Name" value={name} onKeyDown={keydown(false)} onInput={(e) => setName(e.target.value)} />
+				</div>
+
+				<div class="doneCheckbox">
+					<label>
+						<input type="checkbox" checked={isComplete} onChange={(e) => setIsComplete(e.target.checked)} />&nbsp;Done
+					</label>
+				</div>
+				<div class="datePicker">
+					<DatePicker value={due} change={setDue} />
+				</div>
+				<div class="classPicker">
+					<ClassPicker value={classId} change={setClassId} classes={props.classes} />
+				</div>
+
+				<textarea class="form-control homeworkModalDesc" placeholder="Description" onInput={(e) => setDesc(e.target.value)} onKeyDown={keydown(true)} value={desc}></textarea>
+			</div>
 		</div>
 		<div class="modal-footer">
 			{!isNew && <button type="button" class="btn btn-danger" onClick={del}>Delete</button>}
-			<button type="button" class="btn btn-primary" onClick={save}>Save changes</button>
+			<button type="button" class="btn btn-primary" onClick={save}>{isNew ? "Add homework" : "Save changes"}</button>
 		</div>
 	</Modal>;
 }
diff --git a/app/homework/HomeworkModal.styl b/app/homework/HomeworkModal.styl
@@ -1,18 +1,41 @@
 .homeworkModal
 	.modal-body
-		.homeworkModalName, .pickerContainer, .pickerContainer .picker, .pickerContainer .pickerContents .datePickerCalendar, textarea
-			width: 300px
+		.homeworkModalBody
+			display: grid
+			grid: 1fr 1fr 4fr / 1fr 1fr 1fr 1fr 1fr 1fr // stylus doesn't support repeat() :(
+			gap: 5px
 
-		.homeworkModalName
-			font-size: 18px
-			height: 34px
+			.homeworkModalNameWrapper
+				grid-row: 1 / span 1
+				grid-column: 1 / span 5
 
-			input[type=text]
+			.doneCheckbox
+				display: flex
+				justify-content: center
+				align-items: center
+
+			.dueClassIdRow
+				display: grid
+				grid: 1fr / 1fr 1fr
+				width: 100%
+
+			.datePicker, .classPicker
+				grid-column: span 3
+
+			.homeworkModalName, .pickerContainer, .pickerContainer .picker, .pickerContainer .pickerContents .datePickerCalendar, textarea
+				width: 100%
+
+			.homeworkModalName
 				font-size: 18px
+				height: 34px
+
+				input[type=text]
+					font-size: 18px
 
-		.pickerContainer
-			display: block
+			.pickerContainer
+				display: block
 
-		.homeworkModalDesc
-			min-width: 400px
-			min-height: 150px
+			.homeworkModalDesc
+				min-width: 400px
+				min-height: 150px
+				grid-column: 1 / span 6