89 lines
3.1 KiB
HTML
89 lines
3.1 KiB
HTML
<article class="projects" data-page="projects">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Projects</h2>
|
|
<button class="edit-btn add-btn" (click)="openAddProject()" title="Add Project">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</button>
|
|
</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">
|
|
<button class="project-item-icon-box" (click)="openViewProject(project)" (keyup.enter)="openViewProject(project)" title="View Project">
|
|
<i class="fa-regular fa-eye"></i>
|
|
</button>
|
|
|
|
<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>
|
|
<button class="edit-btn project-edit-btn" (click)="openEditProject(project)" title="Edit Project">
|
|
<i class="fa-solid fa-pen-to-square"></i>
|
|
</button>
|
|
<button class="edit-btn project-delete-btn" (click)="deleteProject(project)" title="Delete Project">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</li>
|
|
}
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
</article> |