From 49276917c567f6dc1fb28cd2c514bdda354ef827 Mon Sep 17 00:00:00 2001
From: William Barkoff <william@barkoffusa.com>
Date: Mon, 10 May 2021 20:44:07 -0400
Subject: [PATCH] ui: Redesign Homework Modal

close #173
---
 app/homework/HomeworkModal.jsx  | 34 ++++++++++++++++---------
 app/homework/HomeworkModal.styl | 45 +++++++++++++++++++++++++--------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/app/homework/HomeworkModal.jsx b/app/homework/HomeworkModal.jsx
index dd489a8..b85118f 100644
--- 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>;
 }
\ No newline at end of file
diff --git a/app/homework/HomeworkModal.styl b/app/homework/HomeworkModal.styl
index f9795ab..d99ebd3 100644
--- 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
\ No newline at end of file
+			.homeworkModalDesc
+				min-width: 400px
+				min-height: 150px
+				grid-column: 1 / span 6