Merge pull request #219 from makeopensource/#37-updated-Student-Gradebook

#37 updated student gradebook

Author: dvcabiya

devU-client/src/components/pages/gradebook/gradebookPage.scss

@@ -1,11 +1,12 @@
 @import 'variables';
 
-
+// Category Styling
 .categoryName {
   color: $text-color;
   font-size: 1.25rem;
 }
 
+// Table Wrapper for layout consistency
 .tableWrapper {
   padding: 0 100px;
 }
@@ -16,12 +17,11 @@
 }
 
 table {
-  border-radius: 20px;
-  // margin: 15px auto;
-  border-collapse: collapse;
   width: 100%;
+  border-collapse: collapse;
 }
 
+// Alternating Row Colors
 tr.evenRow {
   background-color: $table-row-even;
 }
@@ -30,18 +30,19 @@ tr.oddRow {
   background-color: $table-row-odd;
 }
 
+// Table Header & Cell Styling
 th {
-  background-color: $primary;
-  color: #FFF;
-  font-weight: 600;
+  background-color: #5a3d8a;
+  color: white;
 }
 
-td,
-th {
+th, td {
   padding: 10px;
-  text-align: center;
+  border-bottom: 1px solid #ccc;
+  text-align: left;
 }
 
+// Table Borders & Rounded Corners
 th:first-of-type {
   border-top-left-radius: 10px;
 }
@@ -58,12 +59,20 @@ tr:last-of-type td:last-of-type {
   border-bottom-right-radius: 10px;
 }
 
+// Table Options Section
 .tableOptions {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.topSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Text Colors for Status Indicators
 .tableOptions span:first-child,
 span.yellow {
   color: $yellowText;
@@ -74,42 +83,163 @@ span.red {
   color: $redText;
 }
 
-// STUDENT GRADEBOOK STYLING
-
-// .header {
-//   color: $text-color;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   // margin-bottom: 20px;
-// }
-
+// Student Gradebook Styling
 .assignmentName {
   text-align: left;
 }
 
-.gradebook-container {
+.gradebookContainer {
   display: flex;
+  flex-direction: column;
   gap: 20px;
-  flex-wrap: wrap;
 }
 
-.category {
-  width: calc(100%/3 - 14px);
+// Section Styling
+.section {
+  background-color: white;
+  padding: -3px;
+  border-radius: 10px;
+  border: 2px solid #5a3d8a;
+}
+
+.categoryRow {
+  font-weight: bold;
 }
 
+.categoryValue {
+  text-align: right;
+  padding-right: 10px;  // 🟢 Fix: Align value to the left
+}
+
+.categoryText {
+  text-align: left;
+  padding-left: 10px;  // 🟢 Fix: Align "Category Average" text to the right
+}
+
+// Assignment Link Styling
+.assignmentLink {
+  color: blue;
+  text-decoration: underline;
+}
+
+// Category Average Styling (Adjusted for spacing)
+.categoryAverage {
+  font-size: 14px;
+  text-align: right;
+  padding: 10px;
+  font-weight: bold;
+  margin-top: 10px;  // 🟢 FIX: Added spacing so it doesn’t overlap
+}
+
+// Page Wrapper & Title
+.pageWrapper {
+  padding: 20px;
+}
+
+.gradebookTitle {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+// 🟢 FIX: "Back to Course" Button Alignment
+.backToCourseButton {
+  background-color: #5a3d8a;
+  color: white;
+  padding: 8px 15px;
+  border-radius: 30px;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 137px;
+  right: 30px;
+}
+
+// Section Headers (Purple Background)
+.sectionHeader {
+  background-color: #5a3d8a;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px 8px 0 0;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;  // 🟢 FIX: Ensures Late Days & Score are in the same row
+  align-items: center;
+}
+
+.headerRight {
+  display: flex;
+  gap: 20px;  // 🟢 FIX: Adds spacing between Late Days and Score
+}
+
+// Gradebook Layout (Using Grid)
+.gradebookGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+  width: 100%;  // 🟢 FIX: Ensures the grid container spans full width
+}
+
+// 🟢 FIX: Project Section Width Adjusted
+.sectionLeft {
+  grid-column: 1;
+}
+
+.sectionRight {
+  grid-column: 2;
+}
+
+.sectionFull {
+  grid-column: 1 / span 1;  // 🟢 FIX: Project is same width as Homeworks
+}
+
+// Empty Assignments Text
+.noAssignments {
+  text-align: center;
+  padding: 10px;
+  font-style: italic;
+}
+
+// Course Average Box Styling
+.courseAverage {
+  border: 2px solid #5a3d8a;
+  padding: 14px;
+  display: flex;
+  justify-content: space-between;  // 🟢 FIX: Pushes the value to the rightmost side
+  font-weight: bold;
+  width: 99.01%;
+  grid-column: span 2;
+  margin-top: 20px;
+  border-radius: 13px;
+}
+
+// 🟢 FIX: Mobile Responsive Adjustments
 @media (max-width: 650px) {
   .pageWrapper {
     padding: 0 20px;
   }
 
   .category {
-    width: calc(100%/2 - 14px);
+    width: calc(100% / 2 - 14px);
+  }
+
+  .gradebookGrid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .section {
+    width: 100%;
   }
 }
 
 @media (max-width: 450px) {
   .category {
     width: 100%;
   }
+
+  .backToCourseButton {
+    position: relative;  // 🟢 FIX: Prevents it from overlapping content on small screens
+    margin-top: 10px;
+  }
 }