UI data binding changes
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { IPost } from "../models/post.model";
|
||||
|
||||
export interface IBlog{
|
||||
posts: IPost[];
|
||||
}
|
||||
Reference in New Issue
Block a user