Skip to content

Commit d84ba61

Browse files
piyush140104piyush140104
committed
deselecting group chip reselects All teams
1 parent 47283a7 commit d84ba61

13 files changed

Lines changed: 879 additions & 20 deletions

‎src/app/component/activity-description/activity-description.component.css‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -448,4 +448,114 @@ mat-icon.mat-icon {
448448
.level-3 { background-color: #f57c00; color: #fff8e1; }
449449
.level-4 { background-color: #ef6c00; color: #fff3e0; }
450450
.level-5 { background-color: #c62828; color: #ffebee; }
451-
}
451+
}
452+
/* ── Activity Intelligence Panel ── */
453+
.intelligence-panel {
454+
background: #f8fffe;
455+
border: 1px solid #c8e6c9;
456+
border-radius: 8px;
457+
padding: 12px 16px;
458+
margin: 10px 0 16px;
459+
display: flex;
460+
flex-direction: column;
461+
gap: 10px;
462+
}
463+
464+
.intel-row {
465+
display: flex;
466+
align-items: center;
467+
gap: 10px;
468+
}
469+
470+
.intel-label {
471+
font-size: 11px;
472+
font-weight: 700;
473+
color: #666;
474+
text-transform: uppercase;
475+
letter-spacing: 0.5px;
476+
width: 70px;
477+
flex-shrink: 0;
478+
}
479+
480+
.intel-useful-badge {
481+
font-size: 11px;
482+
font-weight: 700;
483+
padding: 3px 10px;
484+
border-radius: 10px;
485+
}
486+
487+
.u-high { background: #c8e6c9; color: #1b5e20; }
488+
.u-med { background: #fff9c4; color: #f57f17; }
489+
.u-low { background: #ffe0b2; color: #e65100; }
490+
.u-vlow { background: #ffcdd2; color: #b71c1c; }
491+
492+
.intel-diff-row {
493+
display: flex;
494+
flex-direction: column;
495+
gap: 5px;
496+
}
497+
498+
.intel-bar-item {
499+
display: flex;
500+
align-items: center;
501+
gap: 8px;
502+
}
503+
504+
.intel-bar-label {
505+
font-size: 10px;
506+
color: #888;
507+
width: 64px;
508+
flex-shrink: 0;
509+
}
510+
511+
.intel-bar-track {
512+
flex: 1;
513+
height: 6px;
514+
background: #e8f5e9;
515+
border-radius: 3px;
516+
overflow: hidden;
517+
}
518+
519+
.intel-bar-fill {
520+
height: 100%;
521+
border-radius: 3px;
522+
transition: width 0.3s;
523+
}
524+
525+
.bar-low { background: #66bb6a; }
526+
.bar-med { background: #ffa726; }
527+
.bar-high { background: #ef5350; }
528+
.bar-vhigh { background: #b71c1c; }
529+
530+
.intel-bar-val {
531+
font-size: 10px;
532+
color: #888;
533+
width: 52px;
534+
flex-shrink: 0;
535+
}
536+
537+
.intel-tools-row {
538+
display: flex;
539+
align-items: flex-start;
540+
gap: 10px;
541+
flex-wrap: wrap;
542+
}
543+
544+
.intel-chips {
545+
display: flex;
546+
flex-wrap: wrap;
547+
gap: 5px;
548+
}
549+
550+
.intel-chip {
551+
font-size: 10px;
552+
background: #e3f2fd;
553+
color: #1565c0;
554+
border: 1px solid #90caf9;
555+
border-radius: 12px;
556+
padding: 3px 10px;
557+
text-decoration: none;
558+
transition: background 0.15s;
559+
}
560+
561+
.intel-chip:hover { background: #bbdefb; }

‎src/app/component/activity-description/activity-description.component.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,57 @@ <h1>
2424
<span class="uuid-label">id: </span><span class="uuid-value">{{ currentActivity.uuid }}</span>
2525
</div>
2626
</div>
27+
<!-- Activity Intelligence Panel -->
28+
<div class="intelligence-panel" *ngIf="currentActivity.difficultyOfImplementation">
29+
<div class="intel-row" *ngIf="currentActivity.usefulness">
30+
<span class="intel-label">Usefulness</span>
31+
<span class="intel-useful-badge" [class]="getUsefulnessClass(currentActivity.usefulness!)">
32+
{{ currentActivity.usefulness }}/4
33+
</span>
34+
</div>
35+
<div class="intel-row">
36+
<span class="intel-label">Difficulty</span>
37+
<div class="intel-diff-row">
38+
<div class="intel-bar-item">
39+
<span class="intel-bar-label">Knowledge</span>
40+
<div class="intel-bar-track">
41+
<div class="intel-bar-fill"
42+
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.knowledge)"
43+
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.knowledge)"></div>
44+
</div>
45+
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.knowledge }}/4</span>
46+
</div>
47+
<div class="intel-bar-item">
48+
<span class="intel-bar-label">Time</span>
49+
<div class="intel-bar-track">
50+
<div class="intel-bar-fill"
51+
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.time)"
52+
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.time)"></div>
53+
</div>
54+
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.time }}/4</span>
55+
</div>
56+
<div class="intel-bar-item">
57+
<span class="intel-bar-label">Resources</span>
58+
<div class="intel-bar-track">
59+
<div class="intel-bar-fill"
60+
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.resources)"
61+
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.resources)"></div>
62+
</div>
63+
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.resources }}/4</span>
64+
</div>
65+
</div>
66+
</div>
67+
<div class="intel-tools-row" *ngIf="currentActivity.implementation?.length">
68+
<span class="intel-label">Top Tools</span>
69+
<div class="intel-chips">
70+
<a *ngFor="let tool of currentActivity.implementation!.slice(0, 4)"
71+
class="intel-chip"
72+
[href]="tool.url || '#'"
73+
target="_blank">{{ tool.name }}</a>
74+
</div>
75+
</div>
76+
</div>
77+
2778
<mat-accordion class="activity-details" multi="true">
2879
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
2980
<mat-expansion-panel-header>

‎src/app/component/activity-description/activity-description.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,22 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
138138
this.closeRequested.emit();
139139
}
140140

141+
getUsefulnessClass(val: number): string {
142+
const classes: Record<number, string> = { 4: 'u-high', 3: 'u-med', 2: 'u-low', 1: 'u-vlow' };
143+
return classes[val] || 'u-med';
144+
}
145+
146+
getDifficultyWidth(val: number): string {
147+
return `${(val / 4) * 100}%`;
148+
}
149+
150+
getDifficultyBarClass(val: number): string {
151+
if (val <= 1) return 'bar-low';
152+
if (val === 2) return 'bar-med';
153+
if (val === 3) return 'bar-high';
154+
return 'bar-vhigh';
155+
}
156+
141157
// Check if screen is narrow and update property
142158
private checkWidthForActivityPanel(): void {
143159
let elemtn: HTMLElement | null = document.querySelector('app-activity-description');

‎src/app/pages/about-us/about-us.component.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
.about-page {
2+
max-width: 960px;
3+
padding: 24px 28px;
4+
}
5+
6+
/* Hero */
7+
.hero-section {
8+
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8ff 100%);
9+
border: 1px solid #c8e6c9;
10+
border-radius: 12px;
11+
padding: 36px 32px;
12+
margin-bottom: 24px;
13+
}
14+
15+
.hero-badge {
16+
display: inline-block;
17+
background: #2e7d32;
18+
color: #fff;
19+
font-size: 11px;
20+
font-weight: 700;
21+
letter-spacing: 0.8px;
22+
text-transform: uppercase;
23+
padding: 4px 12px;
24+
border-radius: 10px;
25+
margin-bottom: 12px;
26+
}
27+
28+
.hero-title {
29+
font-size: 28px;
30+
font-weight: 700;
31+
color: #1a1a1a;
32+
margin: 0 0 10px;
33+
}
34+
35+
.hero-subtitle {
36+
font-size: 15px;
37+
color: #555;
38+
line-height: 1.6;
39+
max-width: 680px;
40+
margin: 0 0 24px;
41+
}
42+
43+
.hero-actions {
44+
display: flex;
45+
gap: 10px;
46+
flex-wrap: wrap;
47+
}
48+
49+
.hero-btn {
50+
display: inline-flex;
51+
align-items: center;
52+
gap: 6px;
53+
padding: 9px 18px;
54+
border-radius: 6px;
55+
font-size: 13px;
56+
font-weight: 600;
57+
text-decoration: none;
58+
transition: opacity 0.15s, transform 0.1s;
59+
}
60+
61+
.hero-btn:hover { opacity: 0.88; transform: translateY(-1px); }
62+
63+
.hero-btn-primary {
64+
background: #2e7d32;
65+
color: #fff;
66+
}
67+
68+
.hero-btn-secondary {
69+
background: #fff;
70+
color: #2e7d32;
71+
border: 1px solid #a5d6a7;
72+
}
73+
74+
.btn-icon { font-size: 14px; }
75+
76+
/* Quick Links Grid */
77+
.links-grid {
78+
display: grid;
79+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
80+
gap: 12px;
81+
margin-bottom: 20px;
82+
}
83+
84+
.link-card {
85+
display: flex;
86+
align-items: center;
87+
gap: 12px;
88+
padding: 14px 16px;
89+
background: #fff;
90+
border: 1px solid #e0e0e0;
91+
border-radius: 8px;
92+
text-decoration: none;
93+
color: inherit;
94+
transition: border-color 0.15s, box-shadow 0.15s;
95+
}
96+
97+
.link-card:hover {
98+
border-color: #a5d6a7;
99+
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
100+
}
101+
102+
.link-card-icon { font-size: 24px; flex-shrink: 0; }
103+
104+
.link-card-title {
105+
font-size: 13px;
106+
font-weight: 600;
107+
color: #1a1a1a;
108+
margin-bottom: 2px;
109+
}
110+
111+
.link-card-desc {
112+
font-size: 11px;
113+
color: #888;
114+
}
115+
116+
/* Contribute Callout */
117+
.contribute-callout {
118+
display: flex;
119+
align-items: center;
120+
gap: 12px;
121+
background: #fff8e1;
122+
border: 1px solid #ffe082;
123+
border-radius: 8px;
124+
padding: 14px 18px;
125+
font-size: 13px;
126+
color: #5d4037;
127+
margin-bottom: 28px;
128+
}
129+
130+
.callout-icon { font-size: 22px; flex-shrink: 0; }
131+
132+
.contribute-callout a {
133+
color: #2e7d32;
134+
font-weight: 600;
135+
text-decoration: none;
136+
}
137+
138+
.contribute-callout a:hover { text-decoration: underline; }
139+
140+
/* README section */
141+
.readme-section {
142+
border-top: 1px solid #e0e0e0;
143+
padding-top: 20px;
144+
}

0 commit comments

Comments
 (0)