src/lib/elements/category-card/category-card.component.ts
OnInit
| selector | lib-category-card |
| styleUrls | ./category-card.component.scss |
| templateUrl | ./category-card.component.html |
Methods |
Inputs |
constructor()
|
| category | |
Type : any
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'lib-category-card',
templateUrl: './category-card.component.html',
styleUrls: ['./category-card.component.scss']
})
export class CategoryCardComponent implements OnInit {
// TODO: Create interface for type check
// TODO: replace mat-icon
@Input() category: any;
constructor() { }
ngOnInit() {
console.log(this.category);
}
}
<div class="category-card" tabindex="0" role="link">
<div class="category-card-header">
<div class="category-card-header-image">
<img src="./assets/discussion-ui/images/Buffer-512.webp" alt="category card icon" class="category-card-img">
</div>
<div class="category-card-header-label" [innerHTML]="category.name"></div>
</div>
<p class="category-card-header-text">{{category.description}}</p>
<div class="category-card-main">
<div class="category-card-main-content">
<div class="discussion-label">{{category.totalTopicCount}} Discussions</div>
<div class="post-label">{{category.totalPostCount}} Posts</div>
</div>
<div><img src="./assets/discussion-ui/images/eye-icon.png" class="eye-icon" alt="eye icon">
</div>
</div>
</div>
./category-card.component.scss
::ng-deep:root {
// --df-category-card-label: var(--black);
// --df-category-card-text:var(--gray-400);
--df-category-card-label: var(--df-text);
--df-category-card-text: var(--df-text);
}
.category-card {
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
background:var(--df-card-bg);
color: var(--df-text);
transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
display: block;
position: relative;
border-radius: 0.25rem;
height: 11rem;
width: auto;
padding: 1rem;
cursor: pointer;
.category-card-header {
display: flex;
flex-direction: row;
align-items: center;
.category-card-header-image {
border: 0.0625rem solid var(--red-0);
border-radius: 50%;
max-width: 3.125rem;
width: 100%;
height: 3.125rem;
position: relative;
.category-card-img{
position: absolute;
top: 0.5rem;
left: 0.5rem;
width: 2rem;
height: 2rem;
}
}
.category-card-header-label {
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--df-category-card-label);
word-break:break-word;
margin: 0 0.5rem;
font-weight: 700;
}
}
.category-card-header-text {
color: var(--df-category-card-text);
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
padding: 0.5rem 0;
font-size: 0.875rem;
}
.category-card-main {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--df-category-card-text);
margin: 0.5rem 0;
font-size: 0.875rem;
font-weight: 700;
.category-card-main-content{
display: flex;
}
.post-label{
margin: 0 1rem;
}
.eye-icon{
width: 1.4rem;
height: 1.4rem;
}
}
}