Codiki/codiki
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Refactor the post-card component html.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2019-08-08 20:25:27 +02:00
parent 6027878622
commit 6bbb618f12
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/main/ts/src/app/core/post-card/post-card.component.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="post-card hoverable" routerLink="/posts/{{post.key}}">
<mdb-card>
<!-- Picture -->
<mdb-card-img [src]="post.image" alt="Article"></mdb-card-img>
<!-- Body -->
<mdb-card-body>
<!-- Title -->
<mdb-card-title>
<h4>{{post.title}}</h4>
</mdb-card-title>
<!-- Description -->
<mdb-card-text>
{{post.description}}
</mdb-card-text>
</mdb-card-body>
<!-- Footer -->
<div class="card-footer text-muted mt-4">
<img [src]="getAvatarUrl()"
class="author-img"
[alt]="post.author.name"
[mdbTooltip]="post.author.name"
placement="bottom"/>
Article écrit par {{post.author.name}}
<span class="creation-date-area">({{post.creationDate | date:'yyyy-MM-dd HH:mm:ss'}})</span>
</div>
</mdb-card>
</div>

30
src/main/ts/src/app/core/post-card/post-card.component.ts
View File

@@ -3,35 +3,11 @@ import { Post } from '../entities';
@Component({ @Component({
selector: 'app-post-card', selector: 'app-post-card',
template: ` templateUrl: './post-card.component.html',
<div class="card hoverable">
<div class="view hm-white-slight waves-light" mdbRippleRadius>
<img id="post-image" class="img-fluid" [src]="post.image" alt="Article" />
<a routerLink="/posts/{{post.key}}">
<div class="mask"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">{{post.title}}</h4>
<p class="card-text">{{post.description}}</p>
</div>
<div class="card-data">
<img [src]="getAvatarUrl()"
class="author-img"
[alt]="post.author.name"
[mdbTooltip]="post.author.name"
placement="bottom"/>
Article écrit par {{post.author.name}}
<span class="creation-date-area">({{post.creationDate | date:'yyyy-MM-dd HH:mm:ss'}})</span>
</div>
</div>`,
styles: [` styles: [`
div.card { .post-card {
margin-bottom: 50px; margin-bottom: 50px;
} cursor: pointer;
.card .card-data {
padding: 15px;
background-color: #f5f5f5;
} }
.creation-date-area { .creation-date-area {
color: #bdbdbd; color: #bdbdbd;