Right align grades on mobile & improve layout #721

bkd-mba-fbi · Dec 11, 2024 · e657aee · e657aee
1 parent 753ed2b
commit e657aee
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 13 deletions.
diff --git a/src/app/events/components/grade/grade.component.scss b/src/app/events/components/grade/grade.component.scss
@@ -6,7 +6,7 @@
 }
 
 :host ::ng-deep select {
-  min-width: 13ch;
+  width: 127px; // 13ch
 }
 
 @include media-breakpoint-up(sm) {

diff --git a/src/app/events/components/grades/grade-select/grade-select.component.ts b/src/app/events/components/grades/grade-select/grade-select.component.ts
@@ -14,7 +14,7 @@ export class GradeSelectComponent {
   @Input() valueId: Option<number>; // the selected key from the options list
   @Input() gradeId: Option<number>; // the id of the grade itself
   @Input() disabled: boolean = false;
-  @Input() width: string = "13ch";
+  @Input() width: string = "127px"; // 13ch
 
   @Output() gradeIdSelected = new EventEmitter<{
     id: number;

diff --git a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html
@@ -44,7 +44,7 @@
   }
   <th class="filler"></th>
 </tr>
-<tr>
+<tr [ngClass]="{ 'test-point-grading': selectedTest?.IsPointGrading }">
   <th class="sticky student-name" (click)="state.sortBy('FullName')">
     <div class="d-flex">
       <div class="column-title">
@@ -90,7 +90,7 @@
     >
       <div class="d-flex">
         @if (test.IsPointGrading) {
-          <div class="column-title me-3 point-input-container">
+          <div class="column-title point-input-container me-2 me-md-3">
             <span (click)="state.sortBy(test)"
               >{{ "tests.points" | translate }}
             </span>

diff --git a/src/app/events/components/test-edit-grades/test-edit-grades-common.scss b/src/app/events/components/test-edit-grades/test-edit-grades-common.scss
@@ -1,15 +1,26 @@
 @import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
 
 /**
  * Common table styles for the TestEditGradesComponent & the TestEditGradesHeaderComponent
  */
 
 :host {
+  --spacer: 16px;
+
+  --point-input-size: 4em;
+  --grade-input-size: 127px; // 13ch
+  --points-grade-gap: 1rem;
+
   --student-name-column-width: 225px;
-  --student-grade-column-width: 147px;
+  --student-grade-column-width: calc(
+    var(--spacer) + var(--grade-input-size) + var(--spacer)
+  );
   --student-average-column-width: 100px;
-  --test-grade-column-width: 300px;
-  --point-input-size: 4em;
+  --test-grade-column-width: calc(
+    var(--spacer) + var(--point-input-size) + var(--points-grade-gap) +
+      var(--grade-input-size) + var(--spacer)
+  );
 
   --student-grade-column-offset: var(--student-name-column-width);
   --student-average-column-offset: calc(
@@ -30,6 +41,12 @@ $student-average-breakpoint: 1200px;
   }
 }
 
+@include media-breakpoint-down(md) {
+  :host {
+    --points-grade-gap: calc(0.5 * var(--spacer));
+  }
+}
+
 th,
 td {
   padding: $spacer;
@@ -46,28 +63,44 @@ td {
 }
 
 tr:not(.header-collapsible) th.test-grade,
-td.test-grade,
-th.student-grade,
-td.student-grade {
-  width: calc(var(--point-input-size) + 13ch + 3 * $spacer);
+td.test-grade {
+  width: var(--test-grade-column-width);
+  min-width: var(--test-grade-column-width);
+  max-width: var(--test-grade-column-width);
+}
+@media (max-width: ($bkd-tests-mobile-breakpoint)) {
+  tr:not(.header-collapsible):not(.test-point-grading) th.test-grade,
+  tr:not(.test-point-grading) th.student-grade,
+  table:not(.test-point-grading) td.test-grade,
+  table:not(.test-point-grading) td.student-grade {
+    width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
+    min-width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
+    max-width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
+  }
 }
 
 /**
  * Column at the end of the table that eats up all the remaining space such that
  * the all other (fixed-width) columns don't get stretched.
  */
 th.filler,
+.header-collapsible th.filler,
 td.filler {
   padding: 0;
   width: auto;
 }
 @media (max-width: ($bkd-tests-mobile-breakpoint)) {
   th.filler,
+  .header-collapsible th.filler,
   td.filler {
     width: 0;
   }
 }
 
+th.test-grade .column-title.point-input-container {
+  width: var(--point-input-size);
+}
+
 // Mobile view
 @media (max-width: ($bkd-tests-mobile-breakpoint)) {
   .desktop:not(.selected),
@@ -98,6 +131,7 @@ td.filler {
   .student-name {
     flex: 1;
     display: block;
+    padding-right: 0;
   }
 
   .test-grade {
@@ -131,6 +165,7 @@ td.filler {
   }
 
   .test-grade {
+    width: var(--test-grade-column-width);
     min-width: var(--test-grade-column-width);
     max-width: var(--test-grade-column-width);
   }

diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.html b/src/app/events/components/test-edit-grades/test-edit-grades.component.html
@@ -5,6 +5,7 @@
 <div class="table-responsive-wrapper">
   <table
     class="table table-hover h-100"
+    [ngClass]="{ 'test-point-grading': selectedTest?.IsPointGrading }"
     bkdTestEditGradesHeaderSticky
     [inlineHeader]="inlineHeader"
     [stickyHeader]="stickyHeader"

diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.scss b/src/app/events/components/test-edit-grades/test-edit-grades.component.scss
@@ -3,8 +3,6 @@
 @import "./test-edit-grades-common";
 
 tbody td.student-name {
-  padding-right: 0;
-
   &,
   * {
     white-space: nowrap;