Finalized stylesheet and htmls for assignments

assignments/templates/assignments/assignment.html

@@ -8,19 +8,18 @@
 {% block app_header %}Assignments Per Course{% endblock %}
 
 {% block content %}
-<ul>
-    {% for c in course_list|dictsort:"course_code" %}
-        <li><p class="course_section">{{ c.course_code }} {{ c.course_title }} {{ c.section }}</p>
-            <ul class="course_assignments">
-                {% for a in assignment_list %}
-                    {% if a.course.course_code == c.course_code %}
-                        {% if a.course.section == c.section %}
-                        <li><a href="{% url 'assignments:assignment-detail' pk=a.pk %}">{{ a.name }}</a></li>
-                        {% endif %}
+{% for c in course_list|dictsort:"course_code" %}
+    <div class="course_block">
+        <p class="course_section">{{ c.course_code }} {{ c.course_title }} {{ c.section }}</p>
+        <ul class="course_assignments">
+            {% for a in assignment_list %}
+                {% if a.course.course_code == c.course_code %}
+                    {% if a.course.section == c.section %}
+                    <li><a href="{% url 'assignments:assignment-detail' pk=a.pk %}">{{ a.name }}</a></li>
                     {% endif %}
-                {% endfor %}
-            </ul>
-        </li>
-    {% endfor %}
-</ul>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+{% endfor %}
 {% endblock %}
\ No newline at end of file

assignments/templates/assignments/assignment_detail.html

@@ -5,13 +5,19 @@
 <link rel="stylesheet" href="{% static 'css/assignments_stylesheet.css' %}">
 {% endblock %}
 
+{% block app_header %}
+    {{ object.name }}
+{% endblock %}
+
 {% block content %}
-    <p class="course">{{ object.course.course_code }} {{ object.course.course_title }} {{ object.course.section }}</p>
-    <p class="title">{{ object.name }}</p>
-    <img src= "{{ object.image.url }}">
-    <div class="assign_details">
-        <p class="desc">{{ object.description }}</p>
-        <p class="score">Perfect Score: {{ object.max_points }}</p>
-        <p class="score">Passing Score: {{ object.passing_score }}</p>
+    <div class="assignment_page">
+        <p class="course">{{ object.course.course_code }} {{ object.course.course_title }} {{ object.course.section }}</p>
+        <img class="assign_img" src= "{{ object.image.url }}">
+        <div class="assign_details">
+            <p class="instructions">Instructions:</p>
+            <p>{{ object.description }}</p>
+            <p class="score">Perfect Score: {{ object.max_points }}</p>
+            <p class="score">Passing Score: {{ object.passing_score }}</p>
+        </div>
     </div>
 {% endblock %}
\ No newline at end of file

widget_group_23/static/css/assignments_stylesheet.css

 body {
     font-family: Tahoma, sans-serif;
+
+    background-color: darkgray;
 }
 
 header {
-    font-size: 25px;
+    font-size: 50px;
     font-weight: bold;
+
+    padding: 1vh 2vw;
+
+    text-align: center;
+}
+
+.course_block {
+    border: 1px solid black;
+    background-color: aliceblue;
+
+    padding: 1vh 2vw;
+    margin: 2vh 2vw;
 }
 
 .course_section {
     font-weight: bold;
 }
 
-.course, .title {
+.assignment_page {
+    border: 1px solid black;
+    background-color: aliceblue;
+
+    padding: 1vh 2vw;
+    margin: 2vh 2vw;
+
+    display: grid;
+}
+
+.course {
+    grid-column: 1 / 3;
+    grid-row: 1;
+    
+    text-align: center;
+    font-weight: bold;
+}
+
+.assign_img {
+    grid-column: 1;
+    grid-row: 2;
+
+    padding: 1vh 1vw;
+    margin: 1vh 1vw;
+
+    width: 40vw;
+}
+
+.assign_details {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.instructions {
+    font-weight: bold;
+}
+
+.score {
     font-weight: bold;
 }
\ No newline at end of file