Bangara Raju Kottedi
55b436c7d2
- Added DynamicField interface to define form field structure. - Created DynamicFormConfig interface for form configuration. - Developed DynamicFormComponent to handle dynamic form rendering and validation. - Implemented DynamicPopupComponent for displaying forms in a modal dialog. - Added HTML and SCSS for dynamic form and popup styling. - Integrated Material Design components for form inputs and buttons. - Implemented form submission logic with API integration. - Added tests for DynamicForm and DynamicPopup components. - Updated global styles for Material components in themed popups. - Included Material Icons in index.html for better UI representation.
80 lines
2.5 KiB
HTML
80 lines
2.5 KiB
HTML
<article class="projects" data-page="projects">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Projects</h2>
|
|
</header>
|
|
|
|
<section class="projects">
|
|
|
|
<ul class="filter-list">
|
|
|
|
<li class="filter-item">
|
|
<button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
|
|
</li>
|
|
|
|
@for (category of projectsCategories; track category) {
|
|
<li class="filter-item">
|
|
<button (click)="filterProjects(category)"
|
|
[ngClass]="{active: filter === category}">{{category}}</button>
|
|
</li>
|
|
}
|
|
|
|
</ul>
|
|
|
|
<div class="filter-select-box" (click)="categoryClicked = !categoryClicked" tabindex="0"
|
|
(keyup.enter)="categoryClicked = !categoryClicked">
|
|
|
|
<button class="filter-select" [ngClass]="{active: categoryClicked}">
|
|
|
|
<div class="select-value">{{filter}}</div>
|
|
|
|
<div class="select-icon">
|
|
<i class="fa-regular fa-chevron-down"></i>
|
|
</div>
|
|
|
|
</button>
|
|
|
|
<ul class="select-list">
|
|
|
|
<li class="select-item">
|
|
<button (click)="filterProjects('All')">All</button>
|
|
</li>
|
|
|
|
@for (category of projectsCategories; track category) {
|
|
<li class="select-item">
|
|
<button (click)="filterProjects(category)">{{category}}</button>
|
|
</li>
|
|
}
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="project-list">
|
|
|
|
@for (project of projects; track project) {
|
|
<li class="project-item active">
|
|
<a>
|
|
|
|
<figure class="project-img">
|
|
<div class="project-item-icon-box">
|
|
<ion-icon name="eye-outline"></ion-icon>
|
|
</div>
|
|
|
|
<img src="{{imagesOrigin + project.imagePath}}" alt="{{project.name}}" loading="lazy">
|
|
</figure>
|
|
|
|
<h3 class="project-title">{{project.name}}</h3>
|
|
<div class="project-category">
|
|
@for (responsibility of project.responsibilities; track responsibility; let i = $index) {
|
|
<span class="inline">{{i > 0 ? ', ' + responsibility : responsibility}}</span>
|
|
}
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
</article> |