From c5a13be4faf5c710e7a66f6e81acc87437656338 Mon Sep 17 00:00:00 2001 From: JasonGrace2282 Date: Sat, 4 May 2024 23:53:21 -0400 Subject: [PATCH 1/4] Basic revamp of ui --- tin/apps/assignments/forms.py | 69 +++++++++++++ tin/static/css/edit.css | 109 +++++++++++++++++++++ tin/templates/assignments/edit_create.html | 73 ++++++++++---- 3 files changed, 234 insertions(+), 17 deletions(-) create mode 100644 tin/static/css/edit.css diff --git a/tin/apps/assignments/forms.py b/tin/apps/assignments/forms.py index 41486ea0..4c5929a1 100644 --- a/tin/apps/assignments/forms.py +++ b/tin/apps/assignments/forms.py @@ -1,9 +1,16 @@ +from __future__ import annotations + +from logging import getLogger +from typing import Dict, Iterable, Tuple + from django import forms from django.conf import settings from ..submissions.models import Submission from .models import Assignment, Folder, MossResult +logger = getLogger(__name__) + class AssignmentForm(forms.ModelForm): QUIZ_ACTIONS = (("-1", "No"), ("0", "Log only"), ("1", "Color Change"), ("2", "Lock")) @@ -23,6 +30,26 @@ def __init__(self, course, *args, **kwargs): "issues." ) + # prevent description from getting too bix + self.fields["description"].widget.attrs.update({"id": "description"}) + + def get_sections(self) -> Iterable[Dict[str, str | Tuple[str, ...] | bool]]: + for section in self.Meta.sections: + if section["name"]: + # operate on copy so errors on refresh don't happen + section = section.copy() + section["fields"] = tuple(self[field] for field in section["fields"]) + yield section + + def get_main_section(self) -> Dict[str, str | Tuple[str, ...]]: + for section in self.Meta.sections: + if section["name"] == "": + section = section.copy() + section["fields"] = tuple(self[field] for field in section["fields"]) + return section + logger.error(f"Could not find main section for assignment {self}") + return {"fields": ()} + class Meta: model = Assignment fields = [ @@ -57,6 +84,45 @@ class Meta: "submission_limit_cooldown": "Rate limit cooldown period (minutes)", "is_quiz": "Is this a quiz?", } + sections = ( + { + "name": "", + "fields": ( + "name", + "description", + "markdown", + "due", + "points_possible", + "is_quiz", + "hidden", + ), + }, + { + "name": "Environment Setup", + "description": "", + "fields": ( + "folder", + "language", + "filename", + "venv", + ), + "collapsed": False, + }, + { + "name": "Submissions", + "description": "", + "fields": ( + "enable_grader_timeout", + "grader_timeout", + "has_network_access", + "grader_has_network_access", + "submission_limit_count", + "submission_limit_interval", + "submission_limit_cooldown", + ), + "collapsed": True, + }, + ) help_texts = { "filename": "Clarify which file students need to upload (including the file " "extension). For Java assignments, this also sets the name of the " @@ -81,6 +147,9 @@ class Meta: } widgets = {"description": forms.Textarea(attrs={"cols": 30, "rows": 4})} + def __str__(self) -> str: + return f"AssignmentForm(\"{self['name'].value()}\")" + class GraderScriptUploadForm(forms.Form): grader_file = forms.FileField( diff --git a/tin/static/css/edit.css b/tin/static/css/edit.css new file mode 100644 index 00000000..2afaf672 --- /dev/null +++ b/tin/static/css/edit.css @@ -0,0 +1,109 @@ +.collapsible { + background-color: #777; + color: white; + cursor: pointer; + padding: 18px; + max-width: 90%; + width: 90%; + border: none; + border-radius: 10px; + text-align: center; + outline: none; + font-size: 15px; + box-shadow: 6px 6px 12px #777, + -6px -6px 12px #ffffff; +} + +.active, .collapsible:hover { + background-color: #555; +} + +.active { + border-radius: 10px 10px 0px 0px; +} + +.content { + display: none; + max-width: 90%; + width: 90%; + padding-top: 18px; + overflow: hidden; + background-color: #F2F2F4; + border-radius: 0px 0px 10px 10px; + box-shadow: inset 6px 6px 12px #d9d9d9, + inset -6px -6px 12px #ffffff; +} + +.block { + display: block; +} + +.collapsible:after { + content: '+'; /* Unicode character for "plus" sign (+) */ + font-size: 20px; + float: left; + margin-right: 5px; + color: white; +} + +.active:after { + content: "-"; /* Unicode character for "minus" sign (-) */ + color: white; + font-size: 20px; +} + +.padding-div { + background: transparent; + height: 20px; + width: auto; +} + +/* This should be aligned to the right vertically stacked */ +.right-col { + width: 50%; + float: right; +} + +/* This is the text that's not in a collapsible */ +#required { + width: 50%; + float: left; + padding-bottom: 50px; +} + +/* Style the description box */ +#description { + max-width: 90%; + width: 90%; + height: 300px; +} + +@media (max-width: 900.02px) { + + .right-col { + width: 90%; + float: left; + } + + #required { + width: 90%; + float: left; + padding-bottom: 20px; + } +} + +.field { + display: flex; + flex-direction: row; + width: 90%; + padding-bottom: 15px; +} + +.tag { + width: 30%; + padding-left: 18px; +} + +.field-input { + width: 70%; +} diff --git a/tin/templates/assignments/edit_create.html b/tin/templates/assignments/edit_create.html index b27c05b9..bc44ec38 100644 --- a/tin/templates/assignments/edit_create.html +++ b/tin/templates/assignments/edit_create.html @@ -8,6 +8,7 @@ {% block head %} + {% endblock %} {% block main %} @@ -46,24 +61,48 @@

Please correct the errors below.

{% csrf_token %} -
- {% for field in assignment_form %} -
- {{ field.label_tag }} - {{ field }} - {% if field.help_text %}
{{ field.help_text }}{% endif %} + +
+
+ {% for field in assignment_form.get_main_section.fields %} +
+ {{ field.label_tag }} + {{ field }}{% if field.help_text %}
{{ field.help_text }}{% endif %} +
+ {% endfor %} +
+
+ {% if action == "add" %} + Note: You'll be able to upload a grader script after you create the assignment. + {% else %} + Note: You can upload a grader script with the "Upload grader" button on the assignment page. + {% endif %}
- {% endfor %} + + {% if action == "edit" %} +  Delete Assignment + {% endif %} + +
+ +
+ {% for category in assignment_form.get_sections %} + +
+ {% if category.description %} + {{ category.description }} +

+ {% endif %} + {% for field in category.fields %} +
+ {{ field.label_tag }} + {{ field }}{% if field.help_text %}
{{ field.help_text }}{% endif %} +
+ {% endfor %} +
+
+ {% endfor %} +
- {% if action == "add" %} -
Note: You'll be able to upload a grader script after you create the assignment.
- {% else %} -
Note: You can upload a grader script with the "Upload grader" button on the assignment page.
- {% endif %} - - {% if action == "edit" %} -  Delete Assignment - {% endif %} - {% endblock %} From cbd66a7ccc42fcdac77a3e3a9f67d581e2735013 Mon Sep 17 00:00:00 2001 From: JasonGrace2282 Date: Thu, 9 May 2024 21:25:37 -0400 Subject: [PATCH 2/4] feedback again --- tin/static/css/edit.css | 19 +++++++++++++------ tin/templates/assignments/edit_create.html | 20 ++++++-------------- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/tin/static/css/edit.css b/tin/static/css/edit.css index 2afaf672..c14a2098 100644 --- a/tin/static/css/edit.css +++ b/tin/static/css/edit.css @@ -5,20 +5,20 @@ padding: 18px; max-width: 90%; width: 90%; - border: none; border-radius: 10px; text-align: center; outline: none; font-size: 15px; + border: none; box-shadow: 6px 6px 12px #777, -6px -6px 12px #ffffff; } -.active, .collapsible:hover { +button.collapsible.active, .collapsible:hover { background-color: #555; } -.active { +button.collapsible.active { border-radius: 10px 10px 0px 0px; } @@ -46,7 +46,7 @@ color: white; } -.active:after { +button.collapsible.active:after { content: "-"; /* Unicode character for "minus" sign (-) */ color: white; font-size: 20px; @@ -72,10 +72,13 @@ } /* Style the description box */ -#description { - max-width: 90%; +textarea { width: 90%; height: 300px; + resize: vertical; + /* For legacy browsers without CSS 3 support */ + min-width: 90%; + max-width: 90%; } @media (max-width: 900.02px) { @@ -107,3 +110,7 @@ .field-input { width: 70%; } + +#id_description { + font-family: inherit; +} diff --git a/tin/templates/assignments/edit_create.html b/tin/templates/assignments/edit_create.html index bc44ec38..667712c5 100644 --- a/tin/templates/assignments/edit_create.html +++ b/tin/templates/assignments/edit_create.html @@ -11,21 +11,13 @@ - -