[Feature:InstructorUI] Automatic Height for Input Cells#12287
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #12287 +/- ##
=========================================
Coverage 21.67% 21.67%
Complexity 9618 9618
=========================================
Files 268 268
Lines 36158 36158
Branches 486 486
=========================================
Hits 7837 7837
Misses 27839 27839
Partials 482 482
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
williamschen23
left a comment
There was a problem hiding this comment.
Pretty sure that's not what Barb said in the issue description (don't know if she said something different in person). She said that on page load the box should automatically resize to fit the content. This should be the default behavior of every markdown cell (not within the scope of the PR but yeah)
Rkoester47
left a comment
There was a problem hiding this comment.
The changes made on this branch made the desired changes described in the PR. On main, if I tried to fill up a text box on either type of gradeable, the text box would become too large and behave unhelpfully. I also encountered an error after entering too many characters and had to refresh the page.
On this branch, I am able to add multiple lines of text and have the text box reset to one single line when I click out of it. The new max character limit of 150 also seems to prevent the error I described earlier. The text box and scroll bar now look and behave much better than on main. On reload, the text in the single line of text box is still visible, resolving the linked issue.
I tested these changes in Firefox, and it seems that everything is working as desired.
hyeenaa
left a comment
There was a problem hiding this comment.
On the main branch for the submitty vm this behaves as outlined in the initial issue #12278 made by Barb. I fill up the text box with hundreds of line and it becomes unhelpfully large, covering the page.
After testing it on the branch, it works better, only expanding up to 150px height and adding a scrollbar.
The previous implementation of this PR left more to be desired. In this commit, I added a toggle (saved with a cookie) that allows the user to switch between expanded cell heights, and collapsed. I have also given the user the freedom to expand the row as much as possible, rather than capping it.
.cell-grade is used in the js logic to ensure changes persist. I had adjusted the styles in this PR, and as a result, text was no longer persisting on reload. Now cell-grade is in the correct places, and other CSS logic has been abstracted to new classes.
Why is this Change Important & Necessary?
fixes #12278
The
<textarea>for simple gradeables is set to 1 line of text (unless you click on it). If an instructor wants to view all of the comments, they have to manually expand each box, and when they click away, it collapses.What is the New Behavior?
Auto-Expand Rowstoggle, allowing the user to choose between an expanded text view, and the standard one line of text.server.css, when they should have been insimple-grading.css, so I moved them over.cursor: pointerand Text hover iscursor: textBefore Clicking (Numeric/Text Gradeable)
After Clicking (Numeric/Text Gradeable)
Note that the functionality should be the same for both gradeable types.
What steps should a reviewer take to reproduce or test the bug or new feature?
Create 2 different types of gradeables:
For each, verify:
Automated Testing & Documentation
There is no automated testing for this new change. If this PR is determined to be the best solution for this issue, I will make one.
Other information
This is not a breaking change.