From 405a81935c4e0358669348f8548ad852b5b4fbf0 Mon Sep 17 00:00:00 2001
From: Claudia Asti <asti@puzzle.ch>
Date: Wed, 18 May 2022 15:29:57 +0200
Subject: [PATCH] improve mobile layout, refs #333

---
 .../events/components/grade/grade.component.html   |  5 ++++-
 .../events/components/grade/grade.component.scss   | 11 ++++++++++-
 .../average-grades/average-grades.component.scss   | 12 ++++++++++++
 .../average-grades/average-grades.component.ts     |  4 ++--
 .../test-edit-grades.component.html                |  6 ++----
 .../test-edit-grades.component.scss                | 14 ++++++++++++++
 6 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 src/app/events/components/grades/average-grades/average-grades.component.scss

diff --git a/src/app/events/components/grade/grade.component.html b/src/app/events/components/grade/grade.component.html
index 24d59d8d9..49183098e 100644
--- a/src/app/events/components/grade/grade.component.html
+++ b/src/app/events/components/grade/grade.component.html
@@ -1,6 +1,9 @@
 <div class="d-flex flex-column w-100">
   <div class="d-flex flex-row" [class.is-invalid]="pointsInput.errors">
-    <div *ngIf="grade.test.IsPointGrading" class="point-input-container mr-3">
+    <div
+      *ngIf="grade.test.IsPointGrading"
+      class="point-input-container mr-2 mr-md-3"
+    >
       <input
         #pointInput
         class="form-control"
diff --git a/src/app/events/components/grade/grade.component.scss b/src/app/events/components/grade/grade.component.scss
index e26388143..a75b70156 100644
--- a/src/app/events/components/grade/grade.component.scss
+++ b/src/app/events/components/grade/grade.component.scss
@@ -1,7 +1,16 @@
+@import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
 .point-input-container {
-  width: 5em;
+  width: 4em;
 }
 
 :host ::ng-deep select {
   min-width: 13ch;
 }
+
+@include media-breakpoint-up(sm) {
+  .point-input-container {
+    width: 5em;
+  }
+}
diff --git a/src/app/events/components/grades/average-grades/average-grades.component.scss b/src/app/events/components/grades/average-grades/average-grades.component.scss
new file mode 100644
index 000000000..426d13b5c
--- /dev/null
+++ b/src/app/events/components/grades/average-grades/average-grades.component.scss
@@ -0,0 +1,12 @@
+@import "../../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+.average-points {
+  min-width: 4em;
+}
+
+@include media-breakpoint-up(sm) {
+  .average-points {
+    min-width: 5em;
+  }
+}
diff --git a/src/app/events/components/grades/average-grades/average-grades.component.ts b/src/app/events/components/grades/average-grades/average-grades.component.ts
index 46db84dc7..ee45cfb2a 100644
--- a/src/app/events/components/grades/average-grades/average-grades.component.ts
+++ b/src/app/events/components/grades/average-grades/average-grades.component.ts
@@ -7,13 +7,13 @@ import { Test } from 'src/app/shared/models/test.model';
   template: `<div class="d-flex flex-row w-100">
     <span
       *ngIf="test.IsPointGrading"
-      class="mr-3 average-points"
+      class="mr-2 mr-md-3 average-points"
       data-testid="average-points"
       >{{ calculatePointsAverage(test) }}</span
     >
     <span data-testid="average-grade">{{ calculateGradeAverage(test) }}</span>
   </div>`,
-  styles: ['.average-points {min-width: 9ch;}'],
+  styleUrls: ['./average-grades.component.scss'],
 })
 export class AverageGradesComponent {
   @Input() test: Test;
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
index 42ee8568c..561d6d1f7 100644
--- 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
@@ -141,11 +141,9 @@
             trackBy: trackStudentGrade
           "
         >
-          <td class="primary-column-width sticky">
+          <td class="primary-column-width sticky name">
             <a [routerLink]="['student', studentGrade.student.Id, 'grades']">
-              <span class="text-body text-truncate">{{
-                studentGrade.student.FullName
-              }}</span>
+              <span class="text-body">{{ studentGrade.student.FullName }}</span>
               <span class="mobile mean">
                 {{ 'tests.mean' | translate }}:
                 {{ studentGrade.finalGrade.average | number: '1.0-3' }}
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
index 06cf07956..794cb650a 100644
--- 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
@@ -51,6 +51,15 @@ table th {
   padding: $spacer;
 }
 
+table td.name,
+table td.average {
+  max-width: 18ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0;
+}
+
 .point-input-container {
   width: 5em;
 }
@@ -80,6 +89,11 @@ table th {
     display: table-cell !important;
   }
 
+  table td.name {
+    max-width: auto;
+    overflow: visible;
+  }
+
   thead tr th {
     border-top: none;
     padding-top: calc($spacer / 4);