courses: step view options (fixes #7522) (#7523)

Co-authored-by: dogi <dogi@users.noreply.github.com>
open-learning-exchange · Aug 1, 2024 · b1b2ca4 · b1b2ca4
1 parent fa1b4c9
commit b1b2ca4
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.14.58",
+  "version": "0.14.59",
   "myplanet": {
     "latest": "v0.17.37",
     "min": "v0.16.37"

diff --git a/src/app/courses/step-view-courses/courses-step-view.component.html b/src/app/courses/step-view-courses/courses-step-view.component.html
@@ -10,6 +10,9 @@ <h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{
     </button>
     <span class="toolbar-fill"></span>
     <div>
+      <button mat-icon-button (click)="this.isGridView = !this.isGridView">
+        <mat-icon>{{isGridView ? 'view_list' : 'view_column'}}</mat-icon>
+      </button>
       <span class="margin-lr-10" *ngIf="attempts && !parent" i18n>Past attempts: {{attempts}}</span>
       <a
         mat-raised-button
@@ -73,10 +76,11 @@ <h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{
       <button mat-raised-button *ngIf="stepNum === maxStep && maxStep !== 1" [disabled]="!parent && stepDetail?.exam?.questions.length > 0 && !attempts" (click)="backToCourseDetail()" i18n>Finish</button>
     </div>
   </mat-toolbar>
-  <div class="view-container view-full-height" *ngIf="stepDetail?.description || resource?._attachments; else emptyRecord">
+  <div class="view-container view-full-height" [ngClass]="{'flex-view': !isGridView}" *ngIf="stepDetail?.description || resource?._attachments; else emptyRecord">
     <planet-chat-window *ngIf="stepDetail?.description && showChat" [context]="{type: 'coursestep', data: localizedStepInfo}"></planet-chat-window>
     <planet-markdown *ngIf="stepDetail?.description" class="description img-resize" [content]="stepDetail.description"></planet-markdown>
     <planet-resources-viewer
+      [ngClass]="{'center-resource': resource?.mediaType !== 'pdf'}"
       *ngIf="resource?._attachments"
       [fetchRating]="false"
       [resourceId]="resource._id"

diff --git a/src/app/courses/step-view-courses/courses-step-view.component.ts b/src/app/courses/step-view-courses/courses-step-view.component.ts
@@ -34,6 +34,7 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
   parent = false;
   canManage = false;
   countActivity = true;
+  isGridView = true;
   showChat = false;
   @ViewChild(MatMenuTrigger) previewButton: MatMenuTrigger;
 

diff --git a/src/app/courses/step-view-courses/courses-step-view.scss b/src/app/courses/step-view-courses/courses-step-view.scss
@@ -5,11 +5,28 @@
     grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
     grid-template-rows: 1fr;
     grid-column-gap: 1rem;
+  }
+
+  .view-container > * {
+    overflow-y: auto;
+  }
 
-    > * {
-      overflow-y: auto;
+  .view-container.flex-view > * {
+    overflow-y: visible;
+  }
+
+  .flex-view {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    > *:nth-child(2) {
+      order: -1;
     }
+  }
 
+  .center-resource {
+    align-self: center;
   }
 
   planet-resources-viewer * {