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

Add horizontal view, change header layout and fix webide position problems

Browse Source
This commit is contained in:
Gabor PEK
2018-03-12 10:32:01 +01:00
parent 822b65462d
commit 5e0e55eb16
12 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<app-header></app-header>
<div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div>
<div class="tfw-messages"><app-messages></app-messages></div>
<div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
<div class="tfw-webide"><app-webide></app-webide></div>

72
src/app/dashboard/dashboard.component.scss
View File

@ -1,29 +1,46 @@
$space: 24px;
$small: 0.75 * $space;
$tao-plum-900: #272F4C;
$tao-gray-50: #FAFAFA;
$tao-navbar-height: 67px;
$layout-template: "default"; // Change this to switch template
$tao-plum-900: #272F4C;
$tao-gray-50: #FAFAFA;
$tao-gray-100: #F2F2F2;
$tao-gray-500: #555555;
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'hraw';
$default-layout: (
'messages': (1, 2, 1, 4),
'header': (1, 2, 1, 2),
'messages': (1, 2, 2, 10),
'webide': (4, -1, 1, -1),
'terminal': (1, 4, 4, -1),
'web': (2, 4, 1, 4)
'terminal': (1, 4, 10, -1),
'web': (2, 4, 1, 10)
);
$raw-layout: (
'messages': (1, 2, 1, -1),
$vraw-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2, -1),
'webide': (4, -1, 1, -1),
'terminal': (2, 4, 1, -1),
'web': (),
);
$hraw-layout: (
'header': (1, 2, 1, -1),
'messages': (1, 2, 2, -1),
'webide': (2, -1, 1, 10),
'terminal': (2, -1, 10, -1),
'web': (),
);
$layout: (
"default": $default-layout,
"raw": $raw-layout
'default': $default-layout,
'vraw': $vraw-layout,
'hraw': $hraw-layout
);
@mixin position-grid-items($map, $sel) {
@ -48,25 +65,38 @@ $layout: (
}
.tfw-grid-main-components {
overflow-y: hidden;
// overflow-y: visible;
display: grid;
padding-top: $tao-navbar-height;
width: 100vw;
height: 100vh;
justify-content: center;
align-content: center;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-template-rows: repeat(15, 1fr);
@include position-grid-items(map_get($layout,$layout-template),'.tfw-');
.tfw-web {
padding: $space;
.tfw-header {
padding: $small;
background-color: $tao-gray-50;
height: $tao-navbar-height;
}
.tfw-messages {
padding: $space;
background-color: $tao-gray-50;
overflow-y: scroll;
@if ($layout-template != 'default') {
max-height: 95vmin;
}
@else {
max-height: 55vmin;
}
}
.tfw-web {
padding: $space;
}
.tfw-webide {
@ -74,6 +104,16 @@ $layout: (
}
.tfw-terminal {
}
border: 1px solid $tao-plum-900;
border-left: 0;
border-right: 0;
border-bottom: 0;
.xterm .xterm-viewport {
height: 100vmin;
}
}
}