UI data binding changes
This commit is contained in:
parent
5c04faad2a
commit
ad3df7c6b5
16
angular.json
16
angular.json
@ -48,7 +48,13 @@
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
"outputHashing": "all",
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.production.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
@ -56,7 +62,13 @@
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
"namedChunks": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.development.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { environment } from "src/environments/environment";
|
||||
import { ICv } from "../models/cv.model";
|
||||
import { CvService } from "../services/cv.service";
|
||||
|
||||
export abstract class BaseComponent<T extends object> {
|
||||
public model: T = <T>{};
|
||||
candidateId: number = 1;
|
||||
imagesOrigin: string = environment.imagesUrl + '/images/';
|
||||
|
||||
constructor(public svc: CvService) {
|
||||
}
|
||||
|
||||
|
||||
@ -8,174 +8,33 @@
|
||||
|
||||
<ul class="blog-posts-list">
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
<li class="blog-post-item" *ngFor="let post of model.posts">
|
||||
<a [href]="post.postUrl" target="_blank">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-1.jpg" alt="Design conferences in 2022" loading="lazy">
|
||||
<figure class="blog-banner-box" *ngIf="post.image">
|
||||
<img src="{{blogImageUrl + post.image}}" [alt]="post.title" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
<p class="blog-category">{{post.category}}</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
<time>{{post.createdDate}}</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">Design conferences in 2022</h3>
|
||||
<h3 class="h3 blog-item-title">{{post.title}}</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
|
||||
{{post.description}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-2.jpg" alt="Best fonts every designer" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">Best fonts every designer</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-3.jpg" alt="Design digest #80" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">Design digest #80</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-4.jpg" alt="UI interactions of the week" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">UI interactions of the week</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-5.jpg" alt="The forgotten art of spacing" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">The forgotten art of spacing</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blog-post-item">
|
||||
<a href="#">
|
||||
|
||||
<figure class="blog-banner-box">
|
||||
<img src="./assets/images/blog-6.jpg" alt="Design digest #79" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<div class="blog-content">
|
||||
|
||||
<div class="blog-meta">
|
||||
<p class="blog-category">Design</p>
|
||||
|
||||
<span class="dot"></span>
|
||||
|
||||
<time datetime="2022-02-23">Fab 23, 2022</time>
|
||||
</div>
|
||||
|
||||
<h3 class="h3 blog-item-title">Design digest #79</h3>
|
||||
|
||||
<p class="blog-text">
|
||||
Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
.blog-posts { margin-bottom: 10px; }
|
||||
|
||||
.blog-posts-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.blog-post-item > a {
|
||||
position: relative;
|
||||
background: var(--border-gradient-onyx);
|
||||
height: 100%;
|
||||
box-shadow: var(--shadow-4);
|
||||
border-radius: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.blog-post-item > a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: inherit;
|
||||
background: var(--eerie-black-1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.blog-banner-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-banner-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition-1);
|
||||
}
|
||||
|
||||
.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
|
||||
|
||||
.blog-content { padding: 15px; }
|
||||
|
||||
.blog-meta {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.blog-meta :is(.blog-category, time) {
|
||||
color: var(--light-gray-70);
|
||||
font-size: var(--fs-6);
|
||||
font-weight: var(--fw-300);
|
||||
}
|
||||
|
||||
.blog-meta .dot {
|
||||
background: var(--light-gray-70);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blog-item-title {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
transition: var(--transition-1);
|
||||
}
|
||||
|
||||
.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
|
||||
|
||||
.blog-text {
|
||||
color: var(--light-gray);
|
||||
font-size: var(--fs-6);
|
||||
font-weight: var(--fw-300);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { IBlog } from './blog.model';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog',
|
||||
templateUrl: './blog.component.html',
|
||||
styleUrl: './blog.component.scss'
|
||||
})
|
||||
export class BlogComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
export class BlogComponent extends BaseComponent<IBlog> implements OnInit{
|
||||
blogImageUrl: string = environment.blogImagesUrl;
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
5
src/app/blog/blog.model.ts
Normal file
5
src/app/blog/blog.model.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { IPost } from "../models/post.model";
|
||||
|
||||
export interface IBlog{
|
||||
posts: IPost[];
|
||||
}
|
||||
@ -19,4 +19,5 @@ export interface ICv{
|
||||
experiences: IExperience[];
|
||||
hobbies: IHobby[];
|
||||
projects: IProject[];
|
||||
projectsCategories: string[];
|
||||
}
|
||||
@ -8,4 +8,7 @@ export interface IPost{
|
||||
likes: number;
|
||||
views: number;
|
||||
comments: number;
|
||||
image: string;
|
||||
createdDate: string;
|
||||
modifiedDate: string;
|
||||
}
|
||||
@ -9,31 +9,23 @@
|
||||
<ul class="filter-list">
|
||||
|
||||
<li class="filter-item">
|
||||
<button class="active" data-filter-btn>All</button>
|
||||
<button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web development</button>
|
||||
<li class="filter-item" *ngFor="let category of model.projectsCategories">
|
||||
<button (click)="filterProjects(category)" [ngClass]="{active: filter === category}" (click)="filter = category">{{category}}</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="filter-select-box">
|
||||
<div class="filter-select-box" (click)="categoryClicked = !categoryClicked">
|
||||
|
||||
<button class="filter-select" data-select>
|
||||
<button class="filter-select" [ngClass]="{active: categoryClicked}" >
|
||||
|
||||
<div class="select-value" data-selecct-value>Select category</div>
|
||||
<div class="select-value">{{filter}}</div>
|
||||
|
||||
<div class="select-icon">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
<i class="fa-regular fa-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
@ -41,186 +33,32 @@
|
||||
<ul class="select-list">
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>All</button>
|
||||
<button (click)="filterProjects('All')">All</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web development</button>
|
||||
<li class="select-item" *ngFor="let category of model.projectsCategories">
|
||||
<button (click)="filterProjects(category)">{{category}}</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
<li class="project-item active" *ngFor="let project of projects">
|
||||
<a>
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<!-- <div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
|
||||
<img src="{{imagesOrigin + project.imagePath}}" [alt]="project.category" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Finance</h3>
|
||||
<h3 class="project-title">{{project.name}}</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Orizon</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Fundo</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Brawlhalla</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">DSM.</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">MetaSpark</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-7.png" alt="summary" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Summary</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Task Manager</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Arrival</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
<p class="project-category">{{project.category}}</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,19 +1,47 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { IProjects } from './projects.model';
|
||||
import { IProject } from '../models/project.model';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ICv } from '../models/cv.model';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-projects',
|
||||
templateUrl: './projects.component.html',
|
||||
styleUrl: './projects.component.scss'
|
||||
})
|
||||
export class ProjectsComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
constructor(svc: CvService){
|
||||
export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit, OnDestroy{
|
||||
filter: string = 'All';
|
||||
projects: IProject[] = this.model.projects;
|
||||
subscription: Subscription = <Subscription>{};
|
||||
categoryClicked: boolean = false;
|
||||
constructor(svc: CvService, public http: HttpClient){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
|
||||
this.projects = this.model.projects;
|
||||
});
|
||||
this.init();
|
||||
}
|
||||
|
||||
filterProjects(category: string) {
|
||||
this.filter = category;
|
||||
this.projects = this.filter === 'All'
|
||||
? this.model.projects
|
||||
: this.model.projects.filter(
|
||||
(project: IProject) => project.category === this.filter
|
||||
);
|
||||
}
|
||||
|
||||
isCategoryActive(category: string){
|
||||
return this.filter === category;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
6
src/app/projects/projects.model.ts
Normal file
6
src/app/projects/projects.model.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { IProject } from "../models/project.model";
|
||||
|
||||
export interface IProjects{
|
||||
projects: IProject[];
|
||||
projectsCategories: string[];
|
||||
}
|
||||
4
src/environments/environment.development.ts
Normal file
4
src/environments/environment.development.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const environment = {
|
||||
imagesUrl: 'https://localhost:7013',
|
||||
blogImagesUrl: 'https://bangararaju.kottedi.in/blog/assets/img/posts/'
|
||||
};
|
||||
4
src/environments/environment.ts
Normal file
4
src/environments/environment.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const environment = {
|
||||
imagesUrl: 'https://localhost:7013',
|
||||
blogImagesUrl: 'https://bangararaju.kottedi.in/blog/assets/img/posts/'
|
||||
};
|
||||
@ -2,5 +2,9 @@
|
||||
"/api": {
|
||||
"target": "https://localhost:7013",
|
||||
"secure": false
|
||||
},
|
||||
"/images": {
|
||||
"target": "https://localhost:7013",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
@ -1755,7 +1755,7 @@
|
||||
* BLOG
|
||||
*/
|
||||
|
||||
.blog-banner-box { height: 230px; }
|
||||
//.blog-banner-box { height: 230px; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user