From b1b2ca49c359f1277931d65b317dffce126ab582 Mon Sep 17 00:00:00 2001
From: Mutugi <48474421+Mutugiii@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:02:02 +0300
Subject: [PATCH] courses: step view options (fixes #7522) (#7523)

Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                                  |  2 +-
 .../courses-step-view.component.html          |  6 +++++-
 .../courses-step-view.component.ts            |  1 +
 .../step-view-courses/courses-step-view.scss  | 21 +++++++++++++++++--
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2a51163bb6..135f6bc495 100755
--- 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
index 61e783a1b3..9d09162043 100644
--- 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
index 57a6542a8f..5fbe643f69 100644
--- 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
index 955d5c8d65..de43ff638d 100644
--- 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 * {