diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html index 487742179..608ca302f 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html +++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.html @@ -229,7 +229,7 @@
{{ 'apptocsinglepage.summary' | translate }}
- +
 {{ 'apptocsinglepage.viewLess' | translate }}
@@ -254,7 +254,8 @@
{{ 'apptocsinglepage.description' | translate }}
- + +
 {{ 'apptocsinglepage.viewLess' | translate }}
diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss index 867216d90..d5a8ca4c3 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss +++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.scss @@ -19,13 +19,13 @@ font-size: 16px; } -.desc { - ::ng-deep span { - p { - margin: 0px !important; - } - } -} +// .desc { + +// ::ng-deep .mob-text p { +// margin: 0px !important; + +// } +// } .themes-button { border-radius: 20px; @@ -78,12 +78,20 @@ } } -.mob-text { +.mob-text{ word-break: break-word; white-space: normal; // word-wrap: break-word; overflow-wrap: break-word; text-align: left; +} +::ng-deep .mob-text p { + word-break: break-word!important; + white-space: normal!important; + word-wrap: break-word!important; + overflow-wrap: break-word!important; + text-align: left; + // margin: 0px !important; // hyphens: auto; } @@ -170,6 +178,14 @@ $title-line-count: 3; word-break: break-word; } +.desc { + word-break: break-word; + white-space: normal; + // word-wrap: break-word; + overflow-wrap: break-word; + text-align: left; +} + .desc-ellipsis { @extend .text-ellipsis; min-height: $title-line-count * 24px; diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts index cfeb92d8c..8aa582d0b 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts +++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-about/app-toc-about.component.ts @@ -82,7 +82,7 @@ export class AppTocAboutComponent implements OnInit, OnChanges, AfterViewInit, O public router: Router, private reviewDataService: ReviewComponentDataService, private handleClaimService: HandleClaimService, - private resetRatingsService: ResetRatingsService + private resetRatingsService: ResetRatingsService, ) { this.resetRatingsService.resetRatings$.subscribe((_res: any) => { this.fetchRatingSummary() diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.html b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.html index e4b3408c5..e007d6a68 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.html +++ b/library/ws-widget/collection/src/lib/_common/content-toc/app-toc-content-card-v2/app-toc-content-card-v2.component.html @@ -72,7 +72,7 @@

- {{ content?.name | truncate:8 }} + {{ content?.name | truncate:40 }}

{{ 'playerbrief.optional' | translate | titlecase}} @@ -234,7 +234,7 @@

- {{index}}. {{ content?.name | truncate:8 }} + {{index}}. {{ content?.name | truncate:40 }}

call_to_action diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.module.ts b/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.module.ts index fd801b30e..e8d72ef3f 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.module.ts +++ b/library/ws-widget/collection/src/lib/_common/content-toc/content-toc.module.ts @@ -39,6 +39,7 @@ import { AppTocSessionCardNewComponent } from './app-toc-session-card-new/app-to import { AppTocSessionsNewComponent } from './app-toc-sessions-new/app-toc-sessions-new.component' import { AppTocContentCardV2SkeletonComponent } from './app-toc-content-card-v2-skeleton/app-toc-content-card-v2-skeleton.component' import { TruncatePipe } from './pipes/truncate.pipe' +import { ReplaceNbspPipe } from './pipes/replace-nbsp.pipe' @NgModule({ declarations: [ @@ -51,6 +52,7 @@ import { TruncatePipe } from './pipes/truncate.pipe' AppTocSessionsNewComponent, AppTocContentCardV2SkeletonComponent, TruncatePipe, + ReplaceNbspPipe, ], imports: [ CommonModule, diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.spec.ts b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.spec.ts new file mode 100644 index 000000000..37634c1a3 --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.spec.ts @@ -0,0 +1,8 @@ +import { ReplaceNbspPipe } from './replace-nbsp.pipe'; + +describe('ReplaceNbspPipe', () => { + it('create an instance', () => { + const pipe = new ReplaceNbspPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.ts b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.ts new file mode 100644 index 000000000..2c2dc301e --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/replace-nbsp.pipe.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core' + +@Pipe({ + name: 'replaceNbsp', +}) +export class ReplaceNbspPipe implements PipeTransform { + + transform(value: any): any { + if (value.includes(' ')) { + return value.replace(/ /g, ' ') + } + return value + } +} diff --git a/library/ws-widget/collection/src/lib/_common/content-toc/pipes/truncate.pipe.ts b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/truncate.pipe.ts index c91ff9eae..39063f54f 100644 --- a/library/ws-widget/collection/src/lib/_common/content-toc/pipes/truncate.pipe.ts +++ b/library/ws-widget/collection/src/lib/_common/content-toc/pipes/truncate.pipe.ts @@ -8,8 +8,10 @@ export class TruncatePipe implements PipeTransform { if (!value) { return '' } - const words = value.split(' ') - const newWord = words.slice(0, limit).join(' ') - return words.length > limit ? (`${newWord}...`) : value + // const words = value.split(' ') + // const newWord = words.slice(0, limit).join(' ') + const charLen = value.trim() + const newWord = value.substring(0, limit) + return charLen.length > limit ? (`${newWord}...`) : value } } diff --git a/library/ws-widget/collection/src/lib/_common/profile-card-stats/profile-card-stats.component.scss b/library/ws-widget/collection/src/lib/_common/profile-card-stats/profile-card-stats.component.scss index b47277ee3..7f398a686 100644 --- a/library/ws-widget/collection/src/lib/_common/profile-card-stats/profile-card-stats.component.scss +++ b/library/ws-widget/collection/src/lib/_common/profile-card-stats/profile-card-stats.component.scss @@ -94,6 +94,7 @@ } .profile-wrapper { margin-top: 32px; + position: relative; z-index: 10; @include breakpoint-xs { @@ -256,17 +257,18 @@ .expand-icon { width: 32px; height: 32px; - position: absolute; - background: black; - color: white; + position: relative; + background: #000; + color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; left: 50%; right: 50%; - top: -16px; + top: 13px; cursor: pointer; + z-index: 9999; } .republic-wrapper .collapse-expand-icon { diff --git a/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.html b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.html new file mode 100644 index 000000000..6644ba46e --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.html @@ -0,0 +1,30 @@ +
+ +
+ {{data.title}} + + close + +
+
+
+
+
+ +
+
+
+ {{data?.ImageUrl}} +
+
+

{{data?.content}}

+
+
+ +
+ {{data.btnTitle}} +
+
+ +
\ No newline at end of file diff --git a/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.scss b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.scss new file mode 100644 index 000000000..54c4be067 --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.scss @@ -0,0 +1,157 @@ +.tips-container { + background-color: #F9CB97; + padding: 16px; + padding-bottom: 0px; + border-radius: 8px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 1rem; + overflow: hidden; + width: 385px; + box-sizing: border-box; + + + } + + @media screen and (max-width: 1000px) { + .tips-container { + width: 100%; + + } + } + + .tips-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + z-index: 10; + } + + .tips-header h3 { + margin: 0; + font-size: 1.2em; + color: #000000; + font-family: Montserrat; + font-size: 16px; + z-index: 10; + } + + .tips-header button { + background: none; + border: none; + color: #01468f; + cursor: pointer; + font-family: Lato; + font-size: 14px; + z-index: 10; + } + + .tip-content { + display: flex; + // justify-content: space-between; + z-index: 10; + padding-top: 6px; + margin-bottom: 8px; + } + + .tip-content p { + margin-left: 12px; + margin-bottom: 4px; + color: #000000; + font-family: Lato; + font-size: 14px; + z-index: 10; + line-height: 16.8px; + } + + .tip-count { + display: flex; + justify-content: end; + align-items: center; + font-family: Lato !important; + font-size: 14px !important; + z-index: 10; + font-weight: 600; + line-height: 19.5px; + } + + // .tip-data { + // width: calc(100% - 110px); + // } + + + .background-circle { + position: absolute; + z-index: 1; + right: -6.5em; + top: 2.8em; + width: 178px; + height: 178px; + border-radius: 100%; + background-color: #fcd2a3; + } + + .circle-box { + position: relative; + width: 100%; + height: 0px; + } + + .book-icon { + width: 50px; + height: 50px; + padding: 6px; + box-sizing: border-box; + } + + .background { + background-color: white; + justify-content: center; + width: 100px; + height: 51px; + border-radius: 5px; + text-align: center; + } + .view-more { + display: flex; + align-items: center; + text-align: center; + height: 40px; + justify-content: center; + } + + .view-more:hover { + background-color: #DCDFE5; + } + .card-header { + display: flex; + justify-content: space-between; + } + + .card-title { + font-weight: 600; + width: 85%; + font-family: 'Montserrat'; + font-size: 16px; + line-height: 19.5px; + } + + .close-button { + cursor: pointer; + vertical-align: top; + color: #1b4ca1; + } + .btn-title { + color: #fff !important; + background-color: #1b4ca1; + border-radius: 16px; + padding: 8px 16px; + font-weight: 700; + font-size: 14px; + width: 102px; + text-align: center; + margin-bottom: 7px; + + } \ No newline at end of file diff --git a/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.spec.ts b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.spec.ts new file mode 100644 index 000000000..0c1f203f0 --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SurveyFormSectionComponent } from './survey-form-section.component'; + +describe('SurveyFormSectionComponent', () => { + let component: SurveyFormSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SurveyFormSectionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SurveyFormSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.ts b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.ts new file mode 100644 index 000000000..1393771b8 --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form-section/survey-form-section.component.ts @@ -0,0 +1,22 @@ +import { Component, Input, OnInit } from '@angular/core' + +@Component({ + selector: 'ws-widget-survey-form-section', + templateUrl: './survey-form-section.component.html', + styleUrls: ['./survey-form-section.component.scss'], +}) +export class SurveyFormSectionComponent implements OnInit { + isVisible = true + @Input() surveyFormData: any + surveyData: any + + constructor() { } + + ngOnInit() { + // this.surveyData = this.surveyFormData + } + + closeCard() { + this.isVisible = false + } +} diff --git a/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module.ts b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module.ts new file mode 100644 index 000000000..a656d8a49 --- /dev/null +++ b/library/ws-widget/collection/src/lib/_common/survey-form-left-section/survey-form/survey-form.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core' +import { CommonModule } from '@angular/common' +import { SurveyFormSectionComponent } from './survey-form-section/survey-form-section.component' +import { MatIconModule } from '@angular/material' +import { TranslateModule } from '@ngx-translate/core' + +@NgModule({ + declarations: [SurveyFormSectionComponent], + imports: [ + CommonModule, + MatIconModule, + TranslateModule, + ], + exports: [SurveyFormSectionComponent], +}) +export class SurveyFormModule { } diff --git a/library/ws-widget/collection/src/lib/registration.config.ts b/library/ws-widget/collection/src/lib/registration.config.ts index 32780c09f..09d194172 100644 --- a/library/ws-widget/collection/src/lib/registration.config.ts +++ b/library/ws-widget/collection/src/lib/registration.config.ts @@ -181,6 +181,7 @@ import { CardEventHubModule } from './card-event-hub/card-event-hub.module' import { CardCompetencyComponent } from './card-competency/card-competency.component' import { CardCompetencyModule } from './card-competency/card-competency.module' import { TipsForLearnerModule } from './_common/tips-for-learner/tips-for-learner.module' +import { SurveyFormModule } from './_common/survey-form-left-section/survey-form/survey-form.module' export const WIDGET_REGISTERED_MODULES = [ AvatarPhotoModule, @@ -273,6 +274,7 @@ export const WIDGET_REGISTERED_MODULES = [ CardEventHubModule, CardCompetencyModule, TipsForLearnerModule, + SurveyFormModule, ] export const WIDGET_REGISTRATION_CONFIG: NsWidgetResolver.IRegistrationConfig[] = [ diff --git a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html index 46e3e1a44..d668495d4 100644 --- a/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html +++ b/project/ws/app/src/lib/routes/app-toc/components/app-toc-cios-home/app-toc-cios-home.component.html @@ -84,7 +84,7 @@ && userExtCourseEnroll?.progress <= 100">
-

Progress and certificates for Cornell courses are visible only after you complete the course and pass the assessment.

+ Progress and certificates for Cornell courses are visible only after you complete the course and pass the assessment.
@@ -183,7 +183,7 @@
-
+