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

Fix word break in side messages

Browse Source
This commit is contained in:
balazs 2019-01-23 14:27:15 +01:00
parent 0e5a8fca05
commit 7e6080e396
3 changed files with 14 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

@ -10,7 +10,7 @@
<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:'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 class="tfw-grid-message-body" [innerHtml]="message.message"></div>
</div> </div>
<div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container"> <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
<div class="jumping-circle" id="jc1"></div> <div class="jumping-circle" id="jc1"></div>

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

@ -2,6 +2,7 @@
// All Rights Reserved. See LICENSE file for details. // All Rights Reserved. See LICENSE file for details.
@import "../../assets/scss/variables.scss"; @import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout";
.tfw-next-button { .tfw-next-button {
text-align: center; text-align: center;
@ -84,3 +85,7 @@
opacity: 0.37; opacity: 0.37;
} }
} }
.tfw-grid-message-body {
@include word-break()
}

8
src/assets/scss/mixins/_layout.scss
View File

@ -144,3 +144,11 @@ $layouts: (
min-height: #{$rows-count / $grid-rows-count * 100}vh; min-height: #{$rows-count / $grid-rows-count * 100}vh;
} }
} }
@mixin word-break() {
/* For Firefox */
white-space: pre-wrap;
word-break: break-all;
/* For Chrome and IE */
word-wrap: break-word;
}