mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-28 12:15:13 +00:00
Code Issues Releases Wiki Activity

Use grid layout for messages

Browse Source
This commit is contained in:
Gabor PEK
2018-03-07 14:18:51 +01:00
parent e1f0bdfb57
commit a7aa890019
3 changed files with 196 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/messages/messages.component.html Normal file → Executable file
View File

@ -1,11 +1,11 @@
<div>
<ul>
<li *ngFor="let message of messages.slice().reverse()">
<p>
<strong>{{message.originator}}</strong>
<span class="timestamp">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</span><br>
<span [innerHtml]="message.message"></span>
</p>
</li>
</ul>
<div class="tao-messages-main">
<h5>Instructions</h5>
<div class="tao-grid-message" *ngFor="let message of messages.slice().reverse()">
<div class="tao-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left">{{message.originator}}</div>
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</div>
</div>
<div [innerHtml]="message.message"></div>
</div>
</div>