Exam mode: Reduce whitespace in exercise overview table (#9095)

ls1intum · Jul 21, 2024 · 8960425 · 8960425
1 parent 2f64afc
commit 8960425
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/...m/participate/exercises/exercise-overview-page/exam-exercise-overview-page.component.html b/...m/participate/exercises/exercise-overview-page/exam-exercise-overview-page.component.html
@@ -1,62 +1,52 @@
-<h3 style="text-align: left; font-weight: normal">
-    <span>
-        {{ 'artemisApp.studentExamDetail.overview' | artemisTranslate }}
-    </span>
+<h3 class="text-left fw-normal">
+    <span jhiTranslate="artemisApp.studentExamDetail.overview"></span>
 </h3>
 <hr />
 
-<div class="container d-flex flex-column align-items-center justify-content-center">
+<div class="container d-flex flex-column align-items-center justify-content-center" [style.maxWidth.px]="1200">
     <table class="table table-striped table-bordered exercise-table">
         <thead>
             <tr>
-                <th style="max-width: 30px">
+                <th [style.width.%]="1">
                     <span>#</span>
                 </th>
-                <th style="max-width: 30px">
-                    <span>
-                        {{ 'artemisApp.examParticipation.exerciseType' | artemisTranslate }}
-                    </span>
+                <th [style.width.%]="1">
+                    <span jhiTranslate="artemisApp.examParticipation.exerciseType"></span>
                 </th>
-                <th>
-                    <span>
-                        {{ 'artemisApp.examParticipation.exerciseName' | artemisTranslate }}
-                    </span>
+                <th [style.width.%]="30">
+                    <span jhiTranslate="artemisApp.examParticipation.exerciseName"></span>
                 </th>
-                <th>
-                    <span>
-                        {{ 'artemisApp.examParticipation.exercisePoints' | artemisTranslate }}
-                    </span>
+                <th [style.width.%]="1">
+                    <span jhiTranslate="artemisApp.examParticipation.exercisePoints"></span>
                 </th>
-                <th style="max-width: 100px">
-                    <span>
-                        {{ 'artemisApp.examParticipation.examStatus' | artemisTranslate }}
-                    </span>
+                <th [style.width.%]="showResultWidth">
+                    <span jhiTranslate="artemisApp.examParticipation.examStatus"> </span>
                 </th>
             </tr>
         </thead>
         <tbody>
             @for (item of examExerciseOverviewItems; track item; let i = $index) {
                 <tr>
-                    <td style="max-width: 30px">
+                    <td>
                         {{ i + 1 }}
                     </td>
-                    <td style="max-width: 30px">
+                    <td>
                         <div>
                             <fa-icon [ngbTooltip]="getIconTooltip(item.exercise.type) | artemisTranslate" [icon]="getIcon(item.exercise.type)" placement="right auto" />
                         </div>
                     </td>
-                    <td style="max-width: 100px; font-weight: bold">
+                    <td class="fw-bold">
                         <a class="w-100" (click)="openExercise(item.exercise)">
                             {{ item.exercise.exerciseGroup?.title }}
                         </a>
                     </td>
-                    <td style="max-width: 30px">
+                    <td>
                         {{ item.exercise.maxPoints }}
                     </td>
-                    <td style="max-width: 50px; font-weight: bold">
-                        <div class="d-flex justify-content-between gap-3" style="align-items: center">
+                    <td class="fw-bold">
+                        <div class="d-flex align-items-center">
                             <div
-                                style="max-width: 10px; margin-right: 10px"
+                                class="me-3"
                                 [ngClass]="setExerciseIconStatus(item)"
                                 [ngbTooltip]="'artemisApp.examParticipation.' + getExerciseButtonTooltip(item.exercise) | artemisTranslate"
                             >
@@ -70,6 +60,7 @@ <h3 style="text-align: left; font-weight: normal">
                                 ) {
                                     <jhi-updating-result
                                         id="jhi-updating-result-{{ i }}"
+                                        (showResult)="updateShowResultWidth()"
                                         [exercise]="item.exercise"
                                         [showUngradedResults]="true"
                                         [showBadge]="true"

diff --git a/...xam/participate/exercises/exercise-overview-page/exam-exercise-overview-page.component.ts b/...xam/participate/exercises/exercise-overview-page/exam-exercise-overview-page.component.ts
@@ -19,6 +19,7 @@ export class ExamExerciseOverviewPageComponent extends ExamPageComponent impleme
     getIcon = getIcon;
     getIconTooltip = getIconTooltip;
     readonly ExerciseButtonStatus = ExerciseButtonStatus;
+    showResultWidth = 10;
 
     examExerciseOverviewItems: ExamExerciseOverviewItem[] = [];
 
@@ -44,6 +45,10 @@ export class ExamExerciseOverviewPageComponent extends ExamPageComponent impleme
         });
     }
 
+    updateShowResultWidth() {
+        this.showResultWidth = 35;
+    }
+
     openExercise(exercise: Exercise) {
         this.onPageChanged.emit({ overViewChange: false, exercise, forceSave: false });
     }

diff --git a/src/main/webapp/app/exercises/shared/result/updating-result.component.ts b/src/main/webapp/app/exercises/shared/result/updating-result.component.ts
@@ -34,6 +34,7 @@ export class UpdatingResultComponent implements OnChanges, OnDestroy {
     @Input() showBadge = false;
     @Input() showIcon = true;
     @Input() isInSidebarCard = false;
+    @Output() showResult = new EventEmitter<void>();
     /**
      * @property personalParticipation Whether the participation belongs to the user (by being a student) or not (by being an instructor)
      */
@@ -66,6 +67,10 @@ export class UpdatingResultComponent implements OnChanges, OnDestroy {
             if (this.exercise?.type === ExerciseType.PROGRAMMING) {
                 this.subscribeForNewSubmissions();
             }
+
+            if (this.result) {
+                this.showResult.emit();
+            }
         }
     }
 
@@ -101,6 +106,9 @@ export class UpdatingResultComponent implements OnChanges, OnDestroy {
                 tap((result) => {
                     this.result = result;
                     this.onParticipationChange.emit();
+                    if (result) {
+                        this.showResult.emit();
+                    }
                 }),
             )
             .subscribe();