Skip to content

Commit 2641dff

Browse files
SambhuPegaSambhuPega
committed
Updated the Embedded section
1 parent 18e89be commit 2641dff

34 files changed

+534
-370
lines changed

‎projects/angular-test-app/src/app/_samples/embedded/EmbeddedStyles.scss‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* Card padding override */
2+
.mat-mdc-card {
3+
padding: 8px;
4+
}
5+
6+
/* Additional card content refinements */
7+
.mat-mdc-card-content:last-child {
8+
padding-bottom: 0px !important;
9+
}
10+
.mat-mdc-card-content:first-child {
11+
padding-top: 0px !important;
12+
}
13+
14+
.details-communication-field {
15+
color: var(--mat-sys-primary);
16+
}
17+
18+
/* Global reset */
19+
* {
20+
margin: 0;
21+
padding: 0;
22+
box-sizing: border-box;
23+
}
24+
25+
/* Body override */
26+
body {
27+
font-family: 'Poppins', sans-serif;
28+
background-color: var(--mat-sys-background);
29+
color: var(--mat-sys-on-background);
30+
line-height: 1.6;
31+
}
32+
33+
/* Container utility */
34+
.container {
35+
width: 90%;
36+
max-width: 1400px;
37+
margin: 0 auto;
38+
}
39+
40+
/* List and link styling */
41+
ul {
42+
list-style: none;
43+
}
44+
a {
45+
text-decoration: none;
46+
color: var(--mat-sys-on-background);
47+
transition: color 0.3s ease;
48+
}
49+
a:hover {
50+
color: var(--mat-sys-primary);
51+
}
52+
53+
/* Headings */
54+
h1,
55+
h2,
56+
h3 {
57+
color: var(--mat-sys-on-background);
58+
font-weight: 600;
59+
}
60+
61+
/* Button styling */
62+
.btn {
63+
display: inline-block;
64+
background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-secondary), var(--mat-sys-primary));
65+
background-size: 200% auto;
66+
color: var(--mat-sys-on-primary) !important;
67+
padding: 0.75rem 1.5rem;
68+
border-radius: 50px;
69+
text-align: center;
70+
font-weight: 600;
71+
border: none;
72+
transition:
73+
background-position 0.4s ease-in-out,
74+
transform 0.3s ease;
75+
}
76+
.btn:hover {
77+
background-position: right center;
78+
transform: scale(1.05);
79+
color: var(--mat-sys-on-primary);
80+
}

‎projects/angular-test-app/src/app/_samples/embedded/embedded.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<div *ngIf="bLoggedIn$; else loading">
66
<app-header></app-header>
7-
<app-main-screen *ngIf="bHasPConnect$" [pConn$]="pConn$"></app-main-screen>
7+
<app-main-screen class="pega-part-of-page" *ngIf="bHasPConnect$" [pConn$]="pConn$"></app-main-screen>
88
</div>
99

1010
<ng-template #loading>

‎projects/angular-test-app/src/app/_samples/embedded/header/header.component.html‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,33 @@
1-
<mat-toolbar color="primary" class="mc-toolbar">
2-
<mat-toolbar-row class="mc-toolbar-row">
3-
{{ applicationLabel }}
4-
<mat-icon class="mc-icon">router</mat-icon>
1+
<header>
2+
<nav class="container">
3+
<a href="/" class="logo">
4+
<img src="./assets/img/MediaCoLogo.png" alt="MediaCo Logo" />
5+
</a>
56

6-
<span class="toolbar-spacer"> </span>
7-
</mat-toolbar-row>
8-
</mat-toolbar>
7+
<div class="nav-menu" [ngClass]="isMenuOpen ? 'active' : ''">
8+
<ul class="nav-links">
9+
<li><a href="/">Mobile</a></li>
10+
<li><a href="/">Internet</a></li>
11+
<li><a href="/">Coverage</a></li>
12+
<li><a href="/">Deals</a></li>
13+
</ul>
14+
15+
<ul class="nav-extra">
16+
<li><a href="/">Contact and support</a></li>
17+
<li><a href="/">Find a store</a></li>
18+
<li><a href="/" class="cart-link">Cart</a></li>
19+
<li>
20+
<a class="profile-link" aria-label="User Profile">
21+
<img src="./assets/img/Frame 727.png" alt="User Profile" class="profile-avatar" />
22+
</a>
23+
</li>
24+
</ul>
25+
</div>
26+
27+
<button class="menu-toggle" (click)="toggleMenu()" aria-label="Open menu">
28+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path d="M4 6H20M4 12H20M4 18H20" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
30+
</svg>
31+
</button>
32+
</nav>
33+
</header>

‎projects/angular-test-app/src/app/_samples/embedded/header/header.component.scss‎

Lines changed: 81 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,96 @@
1-
.toolbar-spacer {
2-
flex: 1 1 auto;
1+
header {
2+
background-color: var(--mat-sys-surface);
3+
border-bottom: 1px solid var(--mat-sys-outline-variant);
4+
padding: 1rem 0;
5+
position: relative;
6+
z-index: 100;
37
}
48

5-
.example-container {
6-
min-height: 100%;
7-
height: 100%;
9+
nav.container {
10+
display: flex;
11+
align-items: center;
12+
gap: 1.5rem;
813
}
914

10-
.psdk-aside {
11-
height: calc(100% - 64px);
12-
width: 12.5rem;
13-
border-right: 1px solid var(--mat-sys-outline-variant);
15+
.logo img {
16+
height: 35px;
17+
width: auto;
18+
vertical-align: middle;
1419
}
1520

16-
.psdk-main {
17-
height: calc(100% - 64px);
18-
width: calc(100% - 12.5rem);
21+
.nav-menu {
22+
flex-grow: 1;
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
1926
}
2027

21-
.mc-toolbar {
22-
position: fixed;
23-
height: 100px;
24-
z-index: 5;
25-
top: 0;
26-
left: 0;
27-
font-size: 40px;
28+
.nav-links,
29+
.nav-extra {
30+
display: flex;
31+
gap: 1.5rem;
32+
align-items: center;
2833
}
2934

30-
.mc-toolbar-row {
31-
height: 100px;
35+
.profile-avatar {
36+
height: 32px;
37+
width: 32px;
38+
border-radius: 50%;
3239
}
3340

34-
.mc-main {
35-
display: flex;
36-
height: calc(100% - 100px);
37-
top: 100px;
38-
position: relative;
41+
.menu-toggle {
42+
display: none;
43+
background: none;
44+
border: none;
45+
color: var(--mat-sys-on-surface);
46+
font-size: 1.5rem;
47+
cursor: pointer;
48+
margin-left: auto;
3949
}
4050

41-
.mc-icon {
42-
padding: 0px 10px 0px 20px;
43-
font-size: 60px;
44-
height: 80px;
45-
width: 60px;
51+
/* --- Responsive Mobile Menu --- */
52+
@media (max-width: 768px) {
53+
/* Hide the full nav menu on mobile */
54+
.nav-links,
55+
.nav-extra {
56+
display: none;
57+
}
58+
59+
.menu-toggle {
60+
display: block;
61+
z-index: 1001;
62+
}
63+
64+
.nav-menu {
65+
position: fixed;
66+
top: 0;
67+
right: -100%;
68+
width: 80%;
69+
max-width: 320px;
70+
height: 100vh;
71+
background: var(--mat-sys-surface-container-highest);
72+
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
73+
74+
display: flex;
75+
flex-direction: column;
76+
align-items: center;
77+
justify-content: center;
78+
gap: 3rem;
79+
80+
transition: right 0.3s ease-in-out;
81+
z-index: 1000;
82+
}
83+
84+
.nav-menu.active {
85+
right: 0;
86+
}
87+
88+
.nav-menu.active .nav-links,
89+
.nav-menu.active .nav-extra {
90+
display: flex;
91+
flex-direction: column;
92+
gap: 2rem;
93+
width: 100%;
94+
text-align: center;
95+
}
4696
}

‎projects/angular-test-app/src/app/_samples/embedded/header/header.component.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component, OnInit } from '@angular/core';
3-
import { MatButtonModule } from '@angular/material/button';
4-
import { MatIconModule } from '@angular/material/icon';
5-
import { MatToolbarModule } from '@angular/material/toolbar';
2+
import { Component } from '@angular/core';
63

74
@Component({
85
selector: 'app-header',
6+
standalone: true,
97
templateUrl: './header.component.html',
10-
styleUrls: ['./header.component.scss'],
11-
imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule]
8+
styleUrls: ['./header.component.scss', '../EmbeddedStyles.scss'],
9+
imports: [CommonModule]
1210
})
13-
export class HeaderComponent implements OnInit {
14-
applicationLabel: string | undefined;
15-
16-
ngOnInit() {
17-
this.applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
11+
export class HeaderComponent {
12+
isMenuOpen = false;
13+
toggleMenu(): void {
14+
this.isMenuOpen = !this.isMenuOpen;
1815
}
1916
}

‎projects/angular-test-app/src/app/_samples/embedded/main-screen/main-screen.component.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
<div class="mc-main-div">
2-
<div class="mc-main-screen" *ngIf="showTriplePlayOptions$">
3-
<div class="mc-banner">Combine TV, Internet, and Voice for the best deal</div>
1+
<div class="main-content-area">
2+
<main class="container" *ngIf="showTriplePlayOptions$">
3+
<section class="hero">
4+
<div class="hero-text">
5+
<h1>Keeping you connected<br />to what matters.</h1>
6+
</div>
7+
<div class="hero-image">
8+
<img src="./assets/img/SDKdevicesImage 2.png" alt="Smartphone, Tablet, and Laptop" />
9+
</div>
10+
</section>
411

5-
<div style="display: flex; justify-content: space-evenly">
6-
<ng-container *ngFor="let option of shoppingOptionsList">
7-
<app-shopping-card [option]="option" (onShopNowButtonClick)="onShopNow($event)"></app-shopping-card>
8-
</ng-container>
9-
</div>
10-
</div>
11-
<div [hidden]="!showPega$">
12-
<div class="mc-info">
13-
<div class="mc-info-pega">
14-
<component-mapper name="RootContainer" [props]="{ pConn$, displayOnlyFA$: true }"></component-mapper>
15-
<div style="padding-left: 50px">* - required fields</div>
12+
<section class="plans-section">
13+
<div class="plans-intro">
14+
<h2>The phones you want at prices you'll <span class="highlight">love.</span></h2>
1615
</div>
17-
<div class="mc-info-banner">
18-
<div class="mc-info-banner-text">We need to gather a little information about you.</div>
19-
<div>
20-
<img src="constellation/assets/cableinfo.jpg" class="mc-info-image" />
21-
</div>
16+
<div class="plans-container">
17+
<app-shopping-card *ngFor="let option of shoppingOptionsList" [option]="option" (buyNowClick)="onShopNow(option.name)"></app-shopping-card>
2218
</div>
23-
</div>
19+
</section>
20+
</main>
21+
22+
<div *ngIf="showPega$">
23+
<component-mapper name="RootContainer" [props]="{ pConn$: pConn$, displayOnlyFA$: true }"></component-mapper>
2424
</div>
25+
2526
<div *ngIf="showResolution$">
2627
<app-resolution-screen></app-resolution-screen>
2728
</div>

0 commit comments

Comments
 (0)