Merge pull request #2351 from vishnubansaltarento/cios-mweb-issue-fix

Cios mweb issue fix
sunbird-cb · Jul 25, 2024 · 0285bd0 · 0285bd0
2 parents 3eab7c0 + 9c7f548
commit 0285bd0
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 11 deletions.
diff --git a/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html b/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html
@@ -76,7 +76,7 @@
     </div>
 </ng-template>
 
-<div class="flex flex-col gap-10 my-4 px-4" [class.mt60]="sticky">
+<div class="flex flex-col my-4 px-4" [class.mt60]="sticky" [ngClass]="isMobile ? '' : 'gap-10'">
 
     <ng-container *ngIf="content?.completionStatus === 2 || content?.certificateObj?.certData">
         <div class="certificate-container" *ngIf="!skeletonLoader">
@@ -181,7 +181,7 @@
                 <ws-widget-skeleton-loader [width]="'60px'" [height]="'60px'" [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
             </div>
         </ng-container>
-        <ng-container *ngIf="!skeletonLoader">
+        <ng-container *ngIf="!skeletonLoader && !fromMarketPlace">
             <ws-widget-toc-kpi-values [content]="content" [tocStructure]="tocStructure"
                 [isMobile]="isMobile"></ws-widget-toc-kpi-values>
         </ng-container>
@@ -403,7 +403,7 @@
         </div>
     </ng-container>
 
-    <ng-container *ngIf="!skeletonLoader">
+    <ng-container *ngIf="!skeletonLoader && !fromMarketPlace">
         <div class="flex flex-column gap-3" [ngClass]="{'hideAbove1200': !router.url.includes('/viewer/')}" >
             <div class="text-base font-bold">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>
             <div class="flex flex-col gap-4">

diff --git a/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss b/...-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss
@@ -73,6 +73,8 @@
 
     .mob-text {
         color: rgba($color: #000000, $alpha: 0.6);
+        word-wrap: break-word;
+        width: 100%;
     }
 }
 

diff --git a/...ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts b/...ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts
@@ -104,6 +104,7 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O
   @Input() fromViewer = false
   @Input() selectedBatchData: any
   @Input() selectedTabValue = 0
+  @Input() fromMarketPlace? = false
   @ViewChild('summaryElem', { static: false }) summaryElem !: ElementRef
   @ViewChild('objectivesElem', { static: false }) objectivesElem !: ElementRef
   @ViewChild('descElem', { static: false }) descElem !: ElementRef

diff --git a/...-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts b/...-widget/collection/src/lib/_common/content-toc/toc-kpi-values/toc-kpi-values.component.ts
@@ -13,7 +13,6 @@ export class TocKpiValuesComponent implements OnInit {
   @Input() content: NsContent.IContent | null = null
   @Input() isMobile = false
   @Input() showInstructorLedMsg = false
-
   constructor() { }
 
   ngOnInit() {

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
         "@project-sunbird/sb-styles": "0.0.7",
         "@project-sunbird/sunbird-quml-player": "0.0.6",
         "@project-sunbird/telemetry-sdk": "0.0.26",
-        "@sunbird-cb/consumption": "0.0.61",
+        "@sunbird-cb/consumption": "0.0.63",
         "@sunbird-cb/design-system": "0.0.2",
         "@sunbird-cb/discussions-ui-v8": "2.1.3",
         "@sunbird-cb/micro-surveys": "^2.0.17",

diff --git a/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html b/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html
@@ -79,9 +79,53 @@
     </div>
     </div>
 </div>
+<div *ngIf="isMobile">
+    <div class="flex flex-col gap-4 p-5 border-bottom position-bottom">
+        <!-- <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}'">
+            <div class="flex flex-row justify-end w-full ws-mat-black-text">
+                <span class="mat-body-2  ws-mat-black-text">
+                    {{userExtCourseEnroll.progress}}%</span>
+            </div>
+            <ws-widget-content-progress [contentId]="userExtCourseEnroll.progress"
+                                        [progress]="userExtCourseEnroll.progress"
+                                        [progressType]="'percentage'" [customClassName]="'viewer-progress'">
+                                    </ws-widget-content-progress>
+          </ng-container>   -->
+        <ng-container *ngIf="(userExtCourseEnroll | json) === '{}'">
+            <button class="flex action-button justify-center flex-middle resume" type="button" (click)="enRollToExtCourse(extContentReadData?.contentId)">
+              <ng-container >{{ 'apptochome.enroll' | translate }}
+              </ng-container>
+            </button>
+          </ng-container>
+        <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl">
+            <a class="flex action-button justify-center flex-middle resume" target="_blank" [href]="extContentReadData?.redirectUrl">
+              <ng-container >{{ 'apptochome.redirect' | translate }}
+                <mat-icon class="ml-2 ws-mat-white-text">open_in_new</mat-icon>
+              </ng-container>
+            </a>
+          </ng-container>
+          <ng-container *ngIf="(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll.issued_certificates?.length > 0 
+            && userExtCourseEnroll.progress === 100">
+            <button class="flex action-button justify-center flex-middle resume" type="button" (click)="downloadCert()">
+                <!-- <img src="fusion-assets/images/certificate-ico.svg" width="24" height="24"> -->
+                <span>Certificate</span>
+                <mat-icon  *ngIf="!downloadCertificateLoading" class="ml-2">arrow_downward</mat-icon>
+                <div class="center flex flex-middle certificate-loader margin-left-s" *ngIf="downloadCertificateLoading">
+                    <mat-spinner strokeWidth="2" stroke="'white'" class="white-spinner" [diameter]="24"></mat-spinner>
+                  </div>
+            </button>
+        </ng-container> 
+    </div>
+    <div>
+        <div class="flex flex-col px-8 py-4 gap-2" *ngIf="extContentReadData?.duration > 0">
+            <img src="/assets/icons/toc/timer.svg" width="20px" alt="web image" />
+            <div class="text-xs">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>
+        </div>
+    </div>
+</div>
 <div class="flex flex-row gap-6 fixed-width">
-    <div class="toc-content mt-8 mb-8">
-        <div class="flex flex-col mt-8 mb-8">
+    <div class="toc-content" [ngClass]="isMobile ? '':'mt-8 mb-8'">
+        <div class="flex flex-col" [ngClass]="isMobile ? '':'mt-8 mb-8'">
             <ng-container *ngIf="skeletonLoader">
                 <ws-widget-skeleton-loader [width]="'80px'" [height]="'16px'"
                     [bindingClass]="'rounded'"></ws-widget-skeleton-loader>
@@ -95,7 +139,7 @@
                 </div>
             </ng-container>
             <ng-container *ngIf="!skeletonLoader">
-                <ws-widget-app-toc-about [content]="extContentReadData"></ws-widget-app-toc-about>
+                <ws-widget-app-toc-about [content]="extContentReadData" [fromMarketPlace]="true"></ws-widget-app-toc-about>
             </ng-container>
 
         </div>

diff --git a/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss b/.../app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.scss
@@ -63,6 +63,7 @@
 
     .banner-text {
       color: rgba(255, 255, 255, 0.95);
+      word-wrap: break-word;
     }
   }
 
@@ -820,7 +821,13 @@ ul{
   text-align: center;
 }
 
-.kpi-values[_ngcontent-feq-c30] img[_ngcontent-feq-c30] {
+.kpi-values img {
   height: 24px;
   width: 24px;
+}
+
+.position-bottom {
+  position: fixed;
+  width: 88%;
+  bottom: 0;
 }
diff --git a/...ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts b/...ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.ts
@@ -26,7 +26,7 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
   @ViewChild('rightContainer', { static: false }) rcElement!: ElementRef
   scrollLimit: any
   scrolled: boolean | undefined
-
+  isMobile = false
   @HostListener('window:scroll', ['$event'])
   handleScroll() {
 
@@ -74,6 +74,11 @@ export class AppTocCiosHomeComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+    if (window.innerWidth <= 1200) {
+      this.isMobile = true
+    } else {
+      this.isMobile = false
+    }
   }
 
   handleCapitalize(str: string, type?: string): string {

diff --git a/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html b/project/ws/app/src/lib/routes/see-all/components/see-all-home/see-all-home.component.html
@@ -14,7 +14,7 @@
                 </div>
             </ng-container>
             <ng-container *ngIf="isCoisContent">
-                <div class="mr-2 mb-5" *ngFor="let c of contentDataList">
+                <div class="mr-2" *ngFor="let c of contentDataList">
                     <sb-uic-card-portrait-ext [widgetData]="c.widgetData" (contentData)="takeExtClickAction($event)"></sb-uic-card-portrait-ext>
                 </div>
             </ng-container>