128 cms integration responsive

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss

@@ -7,21 +7,24 @@
   border-bottom: 1px solid $border-color;
 }
 
+.filters {
+  display: block;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
 .form-group {
   flex: 1;
   margin-right: $spacer;
-  margin-bottom: 0;
+  margin-bottom: 0.5rem;
+  float: left;
 }
-
 .buttons {
   flex: none;
   margin-right: 0;
-}
-
-.filters {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
+  padding-top: 31px;
+  float: left;
+  margin-bottom: 1rem;
 }
 
 .extended-filters-header {

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.html

@@ -38,7 +38,7 @@
             <i class="material-icons">edit</i>
           </a>
         </div>
-        <table class="table">
+        <table class="table table-striped">
           <thead>
             <tr>
               <th>
@@ -74,7 +74,10 @@
           </thead>
           <tbody>
             <tr *ngFor="let entry of data.entries">
-              <td (click)="onCheckboxCellClick($event, checkbox)">
+              <td
+                class="edit-absences-checkbox"
+                (click)="onCheckboxCellClick($event, checkbox)"
+              >
                 <input
                   #checkbox
                   type="checkbox"
@@ -84,38 +87,70 @@
                   (change)="selectionService.toggle(entry.lessonPresence)"
                 />
               </td>
-              <td class="presence-category">
+              <td
+                [attr.data-label]="
+                  'edit-absences.list.header.presence' | translate
+                "
+                class="presence-category"
+              >
                 <span [className]="entry.presenceCategory">
                   <i class="material-icons">{{ entry.presenceCategoryIcon }}</i>
                 </span>
               </td>
-              <td>
+              <td
+                [attr.data-label]="
+                  'edit-absences.list.header.mobil-student-module-instance-study-class'
+                    | translate
+                "
+              >
                 {{ entry.lessonPresence.StudentFullName }}
                 <br />
                 {{ entry.lessonPresence.EventDesignation }},
                 {{ entry.lessonPresence.StudyClassNumber }}
               </td>
-              <td>
+              <td
+                [attr.data-label]="'edit-absences.list.header.time' | translate"
+              >
                 {{
                   entry.lessonPresence.LessonDateTimeFrom | date: 'shortTime'
                 }}–{{
                   entry.lessonPresence.LessonDateTimeTo | date: 'shortTime'
                 }}
               </td>
-              <td>{{ entry.confirmationState?.Value }}</td>
-              <td class="designation-comment">
+              <td
+                [attr.data-label]="
+                  'edit-absences.list.header.confirmation-state' | translate
+                "
+              >
+                {{ entry.confirmationState?.Value }}
+              </td>
+              <td
+                [attr.data-label]="
+                  'edit-absences.list.header.mobil-presence-type-comment'
+                    | translate
+                "
+                class="designation-comment"
+              >
                 <ng-container *ngIf="!entry.canChangePresenceType">{{
                   entry.presenceType?.Designation
                 }}</ng-container
                 ><br />
                 <span class="comment">{{ entry.lessonPresence.Comment }}</span>
               </td>
-              <td>
+              <td
+                [attr.data-label]="'edit-absences.list.header.date' | translate"
+              >
                 {{
                   entry.lessonPresence.LessonDateTimeFrom | date: 'mediumDate'
                 }}
               </td>
-              <td>{{ entry.lessonPresence.TeacherInformation }}</td>
+              <td
+                [attr.data-label]="
+                  'edit-absences.list.header.teacher' | translate
+                "
+              >
+                {{ entry.lessonPresence.TeacherInformation }}
+              </td>
             </tr>
           </tbody>
         </table>

src/app/edit-absences/components/edit-absences/edit-absences.component.scss

@@ -2,5 +2,4 @@
 
 :host {
   display: block;
-  min-width: $erz-edit-absences-min-width;
 }

src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.html

@@ -1,29 +1,31 @@
-<div class="form-group">
-  <label>{{ 'evaluate-absences.header.student' | translate }}</label>
-  <erz-typeahead
-    [typeaheadService]="studentsService"
-    [(value)]="filter.student"
-  ></erz-typeahead>
-</div>
+<div class="filters mb-2">
+  <div class="form-group">
+    <label>{{ 'evaluate-absences.header.student' | translate }}</label>
+    <erz-typeahead
+      [typeaheadService]="studentsService"
+      [(value)]="filter.student"
+    ></erz-typeahead>
+  </div>
 
-<div class="form-group">
-  <label>{{ 'evaluate-absences.header.module-instance' | translate }}</label>
-  <erz-typeahead
-    [typeaheadService]="moduleInstancesService"
-    [(value)]="filter.moduleInstance"
-  ></erz-typeahead>
-</div>
+  <div class="form-group">
+    <label>{{ 'evaluate-absences.header.module-instance' | translate }}</label>
+    <erz-typeahead
+      [typeaheadService]="moduleInstancesService"
+      [(value)]="filter.moduleInstance"
+    ></erz-typeahead>
+  </div>
 
-<div class="form-group">
-  <label>{{ 'evaluate-absences.header.study-class' | translate }}</label>
-  <erz-typeahead
-    [typeaheadService]="studyClassesService"
-    [(value)]="filter.studyClass"
-  ></erz-typeahead>
-</div>
+  <div class="form-group">
+    <label>{{ 'evaluate-absences.header.study-class' | translate }}</label>
+    <erz-typeahead
+      [typeaheadService]="studyClassesService"
+      [(value)]="filter.studyClass"
+    ></erz-typeahead>
+  </div>
 
-<div class="buttons">
-  <button type="button" class="btn btn-primary" (click)="show()">
-    {{ 'evaluate-absences.header.show' | translate }}
-  </button>
+  <div class="buttons">
+    <button type="button" class="btn btn-primary" (click)="show()">
+      {{ 'evaluate-absences.header.show' | translate }}
+    </button>
+  </div>
 </div>

src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss

@@ -8,13 +8,22 @@
   border-bottom: 1px solid $border-color;
 }
 
+.filters {
+  display: block;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
 .form-group {
   flex: 1;
   margin-right: $spacer;
-  margin-bottom: 0;
+  margin-bottom: 0.5rem;
+  float: left;
 }
-
 .buttons {
   flex: none;
   margin-right: 0;
+  padding-top: 31px;
+  float: left;
+  margin-bottom: 1rem;
 }

src/app/evaluate-absences/components/evaluate-absences-list/evaluate-absences-list.component.html

@@ -1,7 +1,11 @@
 <div class="p-3" *erzLet="state.entries$ | async as entries">
   <ng-container *ngIf="!(state.loading$ | async); else loading">
     <ng-container *ngIf="entries && entries.length > 0; else noEntries">
-      <table class="table">
+      <table
+        class="table table-striped"
+        matSort
+        (matSortChange)="sortData($event)"
+      >
         <thead>
           <tr>
             <th scope="col">
@@ -23,15 +27,55 @@
         </thead>
         <tbody>
           <tr *ngFor="let entry of entries">
-            <td>{{ entry.StudentFullName }}</td>
-            <td>{{ entry.TotalAbsences }}</td>
-            <td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.student' | translate
+              "
+            >
+              {{ entry.StudentFullName }}
+            </td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.total' | translate
+              "
+            >
+              {{ entry.TotalAbsences }}
+            </td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.valid-excuse' | translate
+              "
+            >
               {{ entry.TotalAbsencesValidExcuse }}
             </td>
-            <td>{{ entry.TotalAbsencesWithoutExcuse }}</td>
-            <td>{{ entry.TotalAbsencesUnconfirmed }}</td>
-            <td>{{ entry.TotalIncidents }}</td>
-            <td>{{ entry.TotalHalfDays }}</td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.without-excuse' | translate
+              "
+            >
+              {{ entry.TotalAbsencesWithoutExcuse }}
+            </td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.unconfirmed' | translate
+              "
+            >
+              {{ entry.TotalAbsencesUnconfirmed }}
+            </td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.late' | translate
+              "
+            >
+              {{ entry.TotalIncidents }}
+            </td>
+            <td
+              [attr.data-label]="
+                'evaluate-absences.list.header.halfday' | translate
+              "
+            >
+              {{ entry.TotalHalfDays }}
+            </td>
           </tr>
         </tbody>
       </table>

src/app/evaluate-absences/components/evaluate-absences/evaluate-absences.component.scss

@@ -2,5 +2,4 @@
 
 :host {
   display: block;
-  min-width: $erz-evaluate-absences-min-width;
 }

src/app/open-absences/components/open-absences-edit/open-absences-edit.component.scss

@@ -0,0 +1,3 @@
+.erz-container > form > div > button .spinner-border {
+  margin-top: 0 !important;
+}

src/app/presence-control/components/presence-control-header/presence-control-header.component.scss

@@ -6,7 +6,6 @@
   display: flex;
   flex-direction: column;
   padding: 0.75 * $spacer $spacer;
-  background-color: $gray-100;
 }
 
 /**

src/app/shared/components/spinner/spinner.component.scss

@@ -1,9 +1,11 @@
 .spinner-container {
-  margin-top: 20vh;
   text-align: center;
+  top: -131px;
+  min-height: 200px;
 }
 
 .spinner-border {
   width: 3rem;
   height: 3rem;
+  margin-top: 100px;
 }

src/app/shared/styles/container.scss

@@ -1,5 +1,4 @@
 .erz-container {
-  max-width: $erz-container-max-width;
   margin: 0 auto;
   padding: 0 $erz-container-padding-x;
 }
@@ -8,3 +7,12 @@
   padding-top: $erz-container-padding-y;
   padding-bottom: $erz-container-padding-y;
 }
+
+.form-check-label {
+  margin-left: 0.5rem;
+}
+
+.ngb-dp-months {
+  padding: 5px 30px 5px 29px;
+  background: #f8f9fa;
+}