Fix(courses): correct checkbox display on different screen sizes

This commit fixes the display of checkboxes in the courses component. It ensures that only one checkbox is displayed per course on larger screens, and that the checkbox is displayed on smaller screens.

Author: emmanuelbaa

src/app/courses/courses.component.html

@@ -123,7 +123,7 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header="courseTitle" i18n> Title </mat-header-cell>
         <mat-cell *matCellDef="let element" class="list-content-menu" [ngClass]="{'list-content-menu-auto': element.doc.courseTitle.length > 50 }">
           <h3 class="header">
-              <mat-checkbox (change)="$event ? selection.toggle(element._id) : null"
+              <mat-checkbox class="mobile-checkbox" (change)="$event ? selection.toggle(element._id) : null"
                 [checked]="selection.isSelected(element._id)">
               </mat-checkbox>
               <span class="margin-lr-5"></span>

src/app/courses/courses.scss

@@ -67,7 +67,15 @@ $label-height: 1rem;
   display: inline-block;
 }
 
+.mat-cell .mobile-checkbox {
+  display: none;
+}
+
 @media(max-width: $screen-sm) {
+  .mat-cell .mobile-checkbox {
+    display: inline-block;
+  }
+
   .created-label {
     display: inline-block;
   }

src/app/resources/resources.component.ts

@@ -133,6 +133,11 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
+    if (this.myView !== 'myPersonals') {
+      this.displayedColumns = [ 'select', 'title', 'info', 'createdDate', 'rating' ];
+    } else {
+      this.displayedColumns = [ 'title', 'createdDate' ];
+    }
     this.titleSearch = '';
     combineLatest(this.resourcesService.resourcesListener(this.parent), this.userService.shelfChange$).pipe(
       startWith([ [], null ]), skip(1), takeUntil(this.onDestroy$),