Skip to content

Commit

Permalink
Merge pull request #2392 from venkykandagaddala/kp-enhancements
Browse files Browse the repository at this point in the history 
Karma programs - Enhancements
  • Loading branch information
@venkykandagaddala
venkykandagaddala authored Aug 5, 2024
2 parents 8668837 + 614ef93 commit 29406fe
Show file tree
Hide file tree
Showing 17 changed files with 595 additions and 51 deletions.
0 ...e/karma-programs-microsite.component.html → ...arma-programs-microsite-v1.component.html
View file
File renamed without changes.
0 ...e/karma-programs-microsite.component.scss → ...arma-programs-microsite-v1.component.scss
View file
File renamed without changes.
25 changes: 25 additions & 0 deletions .../karma-programs/karma-programs-microsite-v1/karma-programs-microsite-v1.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'

import { KarmaProgramsMicrositeV1Component } from './karma-programs-microsite-v1.component'

describe('KarmaProgramsMicrositeV1Component', () => {
let component: KarmaProgramsMicrositeV1Component
let fixture: ComponentFixture<KarmaProgramsMicrositeV1Component>

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KarmaProgramsMicrositeV1Component],
})
.compileComponents()
}))

beforeEach(() => {
fixture = TestBed.createComponent(KarmaProgramsMicrositeV1Component)
component = fixture.componentInstance
fixture.detectChanges()
})

it('should create', () => {
expect(component).toBeTruthy()
})
})
8 changes: 4 additions & 4 deletions ...ite/karma-programs-microsite.component.ts → .../karma-programs-microsite-v1.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { EventService, WsEvents, MultilingualTranslationsService, Configurations
import { TranslateService } from '@ngx-translate/core'

@Component({
selector: 'ws-app-karma-programs-microsite',
templateUrl: './karma-programs-microsite.component.html',
styleUrls: ['./karma-programs-microsite.component.scss'],
selector: 'ws-app-karma-programs-microsite-v1',
templateUrl: './karma-programs-microsite-v1.component.html',
styleUrls: ['./karma-programs-microsite-v1.component.scss'],
})
export class KarmaProgramsMicrositeComponent implements OnInit {
export class KarmaProgramsMicrositeV1Component implements OnInit {
programName = ''
playListKey = ''
orgId = ''
Expand Down
130 changes: 130 additions & 0 deletions ...tes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<ws-widget-btn-page-back [widgetData]="{ url: 'home', titles: titles }">
</ws-widget-btn-page-back>

<div class="container-fluid" id="section-micro-sites">
<div class="flex flex-col flex-1">
<ng-container *ngIf="sectionList?.length">
<ng-container *ngFor="let section of sectionList">
<ng-container *ngIf="section?.enabled">
<section id="{{section?.key}}" class="w-full grid grid-cols-12 gap-4 " [ngClass]="{'container': section.wrapperClass}">
<ng-container *ngFor="let column of section.column">
<div id="{{column?.key}}" class="col-span-{{column.colspan || 12}} {{column?.background}} ">
<ng-container *ngIf="column?.enabled" [ngSwitch]="column?.key">
<ng-container *ngSwitchCase="'banner'" [ngTemplateOutlet]="banner"
[ngTemplateOutletContext]="{data: column.data}"></ng-container>
<ng-container *ngSwitchCase="'contentSearch'" [ngTemplateOutlet]="contentWithSearch"
[ngTemplateOutletContext]="{competency: column}"></ng-container>
</ng-container>
</div>
</ng-container>
</section>
</ng-container>
</ng-container>
</ng-container>
</div>
</div>

<!-- banner start -->
<ng-template #banner let-data="data">
<ng-container *ngIf="!data?.versioning">
<div class="hidden md:block">
<div class="flex items-center justify-center" [ngStyle]="{'background': data.background}">
<div class="container">
<div class="grid grid-cols-12 gap-4 padding-top-l mb-6">
<div class="col-span-12 md:col-span-6">
<div class="flex-1 flex flex-col mr-4 ws-mat-white-text">
<div class="mt-6 pt-6">
<h1 class=" txt-ellipsis-2 break-words">{{data.title || programName}}</h1>
<p class="mat-body-1">
{{data?.description | slice:0:descriptionMaxLength}}
<span *ngIf="data?.description?.length > descriptionMaxLength">...</span>
</p>
<ng-container *ngIf="data?.referenceLinks && data?.referenceLinks?.length">
<ng-container *ngFor="let ref of data?.referenceLinks">
<p >
{{ref?.label}} : <a href="{{ref?.value}}" class=" ref-links " target="_blank"> {{'contentstripmultiple.clickHere' | translate}}</a>
</p>
</ng-container>
</ng-container>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 zindex">
<div class="slider slider-box" *ngIf="data.sliderData && data.sliderData.sliders">
<sb-uic-sliders [widgetData]="data.sliderData.sliders" [styleData]="data.sliderData.styleData" ></sb-uic-sliders>
</div>
</div>
</div>
</div>
<img class="absolute comp-back-img" src="assets/icons/microsite/competency.svg" alt="">
</div>
</div>
<div class="block md:hidden">
<div class="col-span-12">
<div class="slider slider-box" *ngIf="data.sliderData && data.sliderData.sliders">
<sb-uic-sliders [widgetData]="data.sliderData.sliders" [styleData]="data.sliderData.styleData" ></sb-uic-sliders>
</div>
</div>
<div class="container px-4 py-4 flex flex-col mob-comp-back-img">
<div class="w-full md:w-9/12 flex-1 flex flex-col ws-mat-white-text">
<h1 class=" txt-ellipsis-2 break-words">{{data?.title}}</h1>
<p class="mat-body-2">
{{data?.description | slice:0:descriptionMaxLength}}
<span *ngIf="data?.description?.length > descriptionMaxLength">...</span>
</p>
<ng-container *ngIf="data?.referenceLinks && data?.referenceLinks?.length">
<ng-container *ngFor="let ref of data?.referenceLinks">
<p >
{{ref?.label}} : <a href="{{ref?.value}}" class=" ref-links " target="_blank">{{'contentstripmultiple.clickHere' | translate}}</a>
</p>
</ng-container>
</ng-container>

</div>
</div>
</div>
</ng-container>

<ng-container *ngIf="data?.versioning">
<div>
<img i18n-alt alt="Page Banner"
[src]="data.bannerImagesV2"
wsUtilsImageResponsive
class="banner-image-v2"/>
</div>
<div class="container-balanced mobile-container">
<div class="description-v2" [innerHTML]="richTextContent(data?.descriptionV2)"></div>
</div>
</ng-container>
</ng-template>
<!-- banner end -->

<!-- karma program data with search -->
<ng-template #contentWithSearch let-data="data">
<div class="container-balanced px-4 pt-8 pb-8 ">
<div class="flex-1 flex flex-col text-white" >
<div class="w-full">
<mat-form-field appearance="outline" class="w-full mat-form-search">
<input name="search" (keyup.enter)="handleSearchQuery($event)" matInput placeholder="Search">
</mat-form-field>
</div>
</div>
<ng-container *ngIf="contentDataList?.length;else noData">
<div class="flex flex-row flex-wrap content-container mt-5 mb-10 ng-star-inserted">
<div class="mr-2 mb-5 flex" *ngFor="let c of contentDataList">
<sb-uic-cards [widgetData]="c.widgetData" (triggerTelemetry)="raiseTelemetryInteratEvent($event)"> </sb-uic-cards>
</div>
</div>
</ng-container>

<ng-template #noData>
<div class="flex justify-center w-full">
<div class="margin-xl text-center" >
<img src="/assets/common/error-pages/empty_search.svg" wsUtilsImageResponsive alt="No results"
class="margin-top-l margin-bottom-s">
<h2 class="mat-h2" i18n="search route no result">{{'learnsearch.noResults' | translate}}</h2>
</div>
</div>
</ng-template>
</div>
</ng-template>
120 changes: 120 additions & 0 deletions ...tes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
@import 'ws-mixins';
@import 'ws-common';

.container-balanced {
@extend %page-center;
}

.container {
max-width: 1200px;
}
.infra-background {
background: #1B4CA1;
align-items: center;
justify-content: center;
display: flex;
}

.banner-container{
align-items: center;
background: #eee;
padding: 16px;
gap: 2.5rem;
justify-content: center;
}

.logo-box {
vertical-align: middle;
max-width: 250px;
background: #f5fdf1;
padding: 8px;
border: 1px solid rgba(0,0,0,0.5);
}
.slider-box {
// max-width: 30%;
}

.slider-background {
height: 160px;
}

.slider-background1 {
height: 195px;
}

.slider-background-2 {
position: relative;
}

.info-slider{
position: absolute;
top: -180px;
padding: 25px;
}

::ng-deep .mat-form-search {

.mat-form-field-infix {
border-top: 0.2em solid transparent !important;
}

.mat-form-field-wrapper {
padding-bottom: 0
}

.mat-select-panel .mat-optgroup-label,
.mat-select-panel .mat-option {
font-size: inherit;
line-height: 3em;
height: 4em;
padding-top: 8px;
}

// .mat-select-arrow {
// margin-top: 12px;
// }
}

.comp-back-img {
position: absolute;
filter: brightness(100);
left: 0;
right: 0;
top: 178px;
margin-left: auto;
margin-right: auto;
width: 100%;
}

.mob-comp-back-img {
background-image: url("/assets/icons/microsite/competency.svg");
filter: brightness(100);
}

.zindex {
z-index: 99
}

.ref-links {
font-weight: 700 !important;
text-decoration: underline !important;
color: #F3962F !important;
position: relative;
z-index: 999999;
}

.banner-new {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 457px;
}

.banner-image-v2 {
width: 100%;
height: 100%;
}
.mobile-container {
padding: 15px 15px 0 15px;
}
25 changes: 25 additions & 0 deletions .../karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'

import { KarmaProgramsMicrositeV2Component } from './karma-programs-microsite-v2.component'

describe('KarmaProgramsMicrositeV2Component', () => {
let component: KarmaProgramsMicrositeV2Component
let fixture: ComponentFixture<KarmaProgramsMicrositeV2Component>

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KarmaProgramsMicrositeV2Component],
})
.compileComponents()
}))

beforeEach(() => {
fixture = TestBed.createComponent(KarmaProgramsMicrositeV2Component)
component = fixture.componentInstance
fixture.detectChanges()
})

it('should create', () => {
expect(component).toBeTruthy()
})
})
Loading

0 comments on commit 29406fe

Please sign in to comment.