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

Add next button for instructions and finally the terminal is responsive

Browse Source
This commit is contained in:
Gabor PEK
2018-03-14 16:43:44 +01:00
parent bcd030e3d9
commit f0ecdd31f2
7 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,8 @@
<div class="tfw-messages-main">
<h5>Instructions</h5>
<div class="tfw-grid-messages-header">
<div class="tao-grid-top-left"><span>Instructions</span></div>
<div class="tao-grid-center-right"><button class="tao-btn-rainbow">Next</button></div>
</div>
<div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
<div class="tfw-grid-message-header">
<img class="tao-grid-center-left" src="images/avataobot.svg"/>

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

@ -1,17 +1,21 @@
@import "../../assets/scss/variables.scss";
.tfw-grid-header-messages {
display: grid;
grid-template-rows: $tao-navbar-height auto;
}
.tfw-messages-main {
h5 {
.tfw-grid-messages-header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: $small;
color: $tao-blue-500;
font-weight: 500;
span {
color: $tao-blue-500;
font-weight: 500;
font-size: $font-size-h3;
}
}
}
.tfw-grid-message {