mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-16 03:01:56 +00:00
Code Issues Releases Wiki Activity

Add vertical scrolling to messages

Browse Source
This commit is contained in:
Gabor PEK 2018-03-08 14:04:40 +01:00
parent c9f0600689
commit 62052b8383
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/messages/messages.component.html
View File

@ -4,7 +4,7 @@
<div class="tao-grid-message-header"> <div class="tao-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/> <img class="tao-grid-center-left" src="images/avataobot.svg"/>
<div class="tao-grid-center-left originator">{{message.originator}}</div> <div class="tao-grid-center-left originator">{{message.originator}}</div>
<div class="timestamp tao-grid-center-right">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</div> <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
</div> </div>
<div [innerHtml]="message.message"></div> <div [innerHtml]="message.message"></div>
</div> </div>

5
src/app/messages/messages.component.scss
View File

@ -150,12 +150,17 @@ $font-size-base: 14px;
.tao-messages-main { .tao-messages-main {
max-height: 50vmin;
overflow-y: scroll;
h5 { h5 {
margin-bottom: $small; margin-bottom: $small;
color: $tao-blue-500; color: $tao-blue-500;
font-weight: 500; font-weight: 500;
} }
} }
.tao-grid-message { .tao-grid-message {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;