add desktop view for dossier grades, refs #337

src/app/shared/components/student-dossier/dossier-course-tests/dossier-course-tests.component.html

@@ -6,13 +6,12 @@
   "
 ></erz-dossier-grades-final-grade>
 <div *ngIf="course.Tests?.length > 0; else noTests">
-  <div *ngFor="let test of course.Tests" class="test-entry">
-    <erz-dossier-single-test
-      [test]="test"
-      [studentId]="studentId"
-      [gradingScale]="getGradingScaleOfTest(test)"
-    ></erz-dossier-single-test>
-  </div>
+  <erz-dossier-single-test
+    *ngFor="let test of course.Tests"
+    [test]="test"
+    [studentId]="studentId"
+    [gradingScale]="getGradingScaleOfTest(test)"
+  ></erz-dossier-single-test>
 </div>
 <ng-template #noTests>
   <p class="p-3" data-testid="message-no-tests">

src/app/shared/components/student-dossier/dossier-course-tests/dossier-course-tests.component.scss

@@ -1,9 +0,0 @@
-@import "../../../../../bootstrap-variables";
-
-:host {
-  padding: $spacer;
-}
-
-.test-entry {
-  padding: $spacer;
-}

src/app/shared/components/student-dossier/dossier-grades-final-grade/dossier-grades-final-grade.component.scss

@@ -0,0 +1,7 @@
+@import "../../../../../bootstrap-variables";
+
+.final-entry {
+  padding: $spacer;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}

src/app/shared/components/student-dossier/dossier-grades-final-grade/dossier-grades-final-grade.component.ts

@@ -4,19 +4,15 @@ import { GradingScale } from 'src/app/shared/models/grading-scale.model';
 import * as Gradings from 'src/app/shared/utils/gradings';
 @Component({
   selector: 'erz-dossier-grades-final-grade',
-  template: `<div class="row mx-1">
-    <div class="col-6">{{ 'dossier.grade' | translate }}</div>
-    <div class="col-6">
-      <span data-testid="final-grade">{{ getGradeForStudent() || '-' }}</span>
-    </div>
-    <div class="col-6">{{ 'dossier.average' | translate }}</div>
-    <div class="col-6">
-      <span data-testid="average-test-results">{{
-        grading?.AverageTestResult | number: '1.0-3'
-      }}</span>
+  template: `<div class="final-entry">
+    <div>{{ 'dossier.grade' | translate }}</div>
+    <div data-testid="final-grade">{{ getGradeForStudent() || '-' }}</div>
+    <div>{{ 'dossier.average' | translate }}</div>
+    <div data-testid="average-test-results">
+      {{ grading?.AverageTestResult | number: '1.0-3' }}
     </div>
   </div>`,
-  styles: [],
+  styleUrls: ['./dossier-grades-final-grade.component.scss'],
 })
 export class DossierGradesFinalGradeComponent {
   @Input() finalGrade: Option<FinalGrading>;

src/app/shared/components/student-dossier/dossier-single-test/dossier-single-test.component.scss

@@ -1,5 +1,51 @@
 @import "../../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+.test-entry {
+  border-top: 1px solid $border-color;
+  padding: $spacer;
+  display: grid;
+  grid-template-areas:
+    "designation designation grade factor"
+    "date date points ."
+    "teacher teacher . ."
+    "state state . .";
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.designation {
+  grid-area: designation;
+}
+
+.date {
+  grid-area: date;
+}
+
+.grade {
+  grid-area: grade;
+}
 
 .points {
+  grid-area: points;
   color: rgba($body-color, 0.5);
 }
+
+.teacher {
+  grid-area: teacher;
+}
+
+.state {
+  grid-area: state;
+}
+
+@include media-breakpoint-down(sm) {
+  .test-entry {
+    grid-template-areas:
+      "designation designation"
+      "date grade"
+      "factor points"
+      "teacher teacher"
+      "state state";
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

src/app/shared/components/student-dossier/dossier-single-test/dossier-single-test.component.ts

@@ -5,31 +5,30 @@ import { Test } from 'src/app/shared/models/test.model';
 
 @Component({
   selector: 'erz-dossier-single-test',
-  template: ` <div>
-    <span data-testid="test-designation">{{ test?.Designation }}</span>
-    <div class="row">
-      <div class="col-6" data-testid="test-date">
-        {{ test?.Date | date: 'mediumDate' }}
-      </div>
-      <div class="col-6" data-testid="test-grade">
-        {{ getGrading() || '-' }}
-      </div>
-      <div class="col-6" data-testid="test-factor">
-        {{ test | erzTestWeight }}
-      </div>
-      <div class="col-6 points" data-testid="test-points">
-        {{ test | erzTestPoints: studentId }}
-      </div>
-      <div class="col-6" data-testid="test-teacher">
-        {{ test?.Owner }}
-      </div>
-      <div class="col-6"></div>
-      <div class="col-6" data-testid="test-status">
-        {{
-          (test?.IsPublished ? 'tests.published' : 'tests.not-published')
-            | translate
-        }}
-      </div>
+  template: ` <div class="test-entry">
+    <div class="designation" data-testid="test-designation">
+      {{ test?.Designation }}
+    </div>
+    <div class="date" data-testid="test-date">
+      {{ test?.Date | date: 'mediumDate' }}
+    </div>
+    <div class="grade" data-testid="test-grade">
+      {{ getGrading() || '-' }}
+    </div>
+    <div class="factor" data-testid="test-factor">
+      {{ test | erzTestWeight }}
+    </div>
+    <div class="points" data-testid="test-points">
+      {{ test | erzTestPoints: studentId }}
+    </div>
+    <div class="teacher" data-testid="test-teacher">
+      {{ test?.Owner }}
+    </div>
+    <div class="state" data-testid="test-status">
+      {{
+        (test?.IsPublished ? 'tests.published' : 'tests.not-published')
+          | translate
+      }}
     </div>
   </div>`,
   styleUrls: ['./dossier-single-test.component.scss'],