mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-01-25 15:31:56 +00:00
Add next button for instructions and finally the terminal is responsive
This commit is contained in:
parent
bcd030e3d9
commit
f0ecdd31f2
src
app
dashboard
messages
terminal
assets/scss
@ -62,19 +62,14 @@
|
||||
}
|
||||
|
||||
.tfw-terminal {
|
||||
// overflow-y: hidden;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid $tao-plum-100;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.tfw-terminal-footer {
|
||||
background-color: $tao-gray-800;
|
||||
border: 1px solid $tao-plum-100;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
@if ($layout-template != 'vraw') {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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"/>
|
||||
|
@ -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 {
|
||||
|
@ -1,3 +1 @@
|
||||
<div class="tfw-xterm-container">
|
||||
<div #xterm class="tfw-xterm"></div>
|
||||
</div>
|
||||
<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>
|
||||
|
@ -1,6 +1,14 @@
|
||||
@import "../../assets/scss/mixins/layout.scss";
|
||||
@import "../../app/dashboard/dashboard.component.scss";
|
||||
|
||||
.tfw-xterm-container {
|
||||
@include set-component-size('terminal');
|
||||
|
||||
|
||||
|
||||
.tfw-xterm {
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -5,8 +5,7 @@ $default-layout: (
|
||||
'header': (1, 2, 1, 2),
|
||||
'messages': (1, 2, 2, 10),
|
||||
'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1),
|
||||
'terminal': (1, 4, 10, $grid-rows-count),
|
||||
'terminal-footer': (1, 4, $grid-rows-count, -1),
|
||||
'terminal': (1, 4, 10, $grid-rows-count+1),
|
||||
'web': (2, 4, 1, 10)
|
||||
);
|
||||
|
||||
@ -14,8 +13,7 @@ $vraw-layout: (
|
||||
'header': (1, 2, 1, 2),
|
||||
'messages': (1, 2, 2,$grid-rows-count+1),
|
||||
'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
|
||||
'terminal': (2, 4, 1,$grid-rows-count),
|
||||
'terminal-footer': (2, 4, $grid-rows-count, -1),
|
||||
'terminal': (2, 4, 1,$grid-rows-count+1),
|
||||
'web': (),
|
||||
);
|
||||
|
||||
@ -23,8 +21,7 @@ $hraw-layout: (
|
||||
'header': (1, 2, 1,$grid-rows-count+1),
|
||||
'messages': (1, 2, 2,$grid-rows-count+1),
|
||||
'webide': (2,$grid-rows-count+1, 1, 10),
|
||||
'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count),
|
||||
'terminal-footer': (2, $grid-rows-count+1, $grid-rows-count, -1),
|
||||
'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count+1),
|
||||
'web': (),
|
||||
);
|
||||
|
||||
@ -62,10 +59,4 @@ $layout: (
|
||||
|
||||
min-width: #{$columns-count / $grid-columns-count * 100}vw;
|
||||
min-height: #{$rows-count / $grid-rows-count * 100}vh;
|
||||
|
||||
width: #{$columns-count / $grid-columns-count * 100}vw;
|
||||
height: #{$rows-count / $grid-rows-count * 100}vh;
|
||||
|
||||
max-width: #{$columns-count / $grid-columns-count * 100}vw;
|
||||
max-height: #{$rows-count / $grid-rows-count * 100}vh;
|
||||
}
|
||||
|
@ -24,11 +24,18 @@
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover
|
||||
{
|
||||
background: initial;
|
||||
background-color: transparent;
|
||||
color: $tao-blue-500;
|
||||
box-shadow: inset 0 0 0 1px $tao-blue-500;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tao-btn-rainbow {
|
||||
|
Loading…
Reference in New Issue
Block a user