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

Expose layout mixins to a new file and use it accordingly to have control over component positioning from shadow DOM elements

Browse Source
This commit is contained in:
Gabor PEK
2018-03-13 18:19:59 +01:00
parent 174a1dd9a2
commit ba2e2ace6d
8 changed files with 101 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,16 @@
<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" [ngClass]="{ 'deploy-blur': deploying }">
<div class="row-container">
<iframe class="iframe-row"
<div class="tfw-web tao-grid-top-left"
[ngClass]="{ 'deploy-blur': deploying }">
<div class="iframe-container">
<iframe class="iframe"
scrolling="yes" frameborder="0"
src="http://localhost:9999"></iframe>
</div>
</div>
<div class="tfw-webide"><app-webide></app-webide></div>
<div class="tfw-terminal"><app-terminal></app-terminal></div>
<div class="tfw-terminal">
<app-terminal></app-terminal>
</div>
</div>

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

@@ -1,73 +1,8 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'default';
$grid-columns-count: 5;
$grid-rows-count: 15;
$default-layout: (
'header': (1, 2, 1, 2),
'messages': (1, 2, 2, 10),
'webide': (4, -1, 1, -1),
'terminal': (1, 4, 10, -1),
'web': (2, 4, 1, 10)
);
$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,
'vraw': $vraw-layout,
'hraw': $hraw-layout
);
@mixin position-grid-items($map, $sel) {
$sel: if($sel == '' and &, &, $sel);
@debug $sel;
#{$sel} {
@each $k, $v in $map {
@at-root #{$sel}#{$k} {
@if (length($v) == 0) {
display: none
}
@else {
grid-column-start: nth($v, 1);
grid-column-end: nth($v, 2);
grid-row-start: nth($v, 3);
grid-row-end: nth($v, 4);
}
}
}
}
}
@mixin set-web-component-size() {
$web-columns-count: nth(map_get($default-layout, 'web'),2) - nth(map_get($default-layout, 'web'),1);
$web-rows-count: nth(map_get($default-layout, 'web'),4) - nth(map_get($default-layout, 'web'),3);
min-width: #{$web-columns-count / $grid-columns-count * 100}vw;
min-height: #{$web-rows-count / $grid-rows-count * 100}vh;
}
.tfw-grid-main-components {
// overflow-y: visible;
display: grid;
width: 100vw;
height: 100vh;
@@ -78,6 +13,16 @@ $layout: (
@include position-grid-items(map_get($layout,$layout-template),'.tfw-');
.tfw-header,
.tfw-messages {
@if ($layout-template == 'default') {
border: 2px solid $tao-plum-100;
border-top: 0;
border-left: 0;
border-bottom: 0;
}
}
.tfw-header {
padding: $small;
background-color: $tao-gray-50;
@@ -97,18 +42,17 @@ $layout: (
}
.tfw-web {
.row-container {
.iframe-container {
display: flex;
overflow: hidden;
@include set-web-component-size();
@include set-component-size('web');
}
.iframe-row {
.iframe {
flex-grow: 1;
border: none;
margin: 0;
padding: 0;
padding: $small;
}
}
@@ -121,13 +65,7 @@ $layout: (
border-left: 0;
border-right: 0;
border-bottom: 0;
.xterm .xterm-viewport {
height: 100vmin;
}
background-color: black;
}
}

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

@@ -1 +1 @@
<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>
<div #xterm class="tfw-xterm"></div>

8
src/app/terminal/terminal.component.scss
View File

@@ -0,0 +1,8 @@
@import "../../assets/scss/mixins/layout.scss";
.tfw-xterm {
.xterm {
@include set-component-size('terminal');
}
}

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

@@ -34,6 +34,6 @@
</div>
</div>
-->
<div class="row-container">
<div class="iframe-container">
</div>

4
src/app/webide/webide.component.scss
View File

@@ -1,5 +1,4 @@
@import "../../assets/scss/variables.scss";
.tfw-grid-webide-statusbar {
display: grid;
height: $tao-navbar-height;
@@ -29,7 +28,10 @@
.disabled,
&:disabled {
background-color: $tao-plum-200;
font-weight: 500;
font-style: italic;
color: black;
border: 0;
}
}

3
src/assets/scss/_variables.scss
View File

@@ -159,3 +159,6 @@ $font-size-h5: floor(($font-size-base * 1.1));
$tao-navbar-height: 67px;
$company-logo-width: 130px;
// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'default';

62
src/assets/scss/mixins/_layout.scss Normal file
View File

@@ -0,0 +1,62 @@
$grid-columns-count: 5;
$grid-rows-count: 15;
$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+1),
'web': (2, 4, 1, 10)
);
$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+1),
'web': (),
);
$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+1),
'web': (),
);
$layout: (
'default': $default-layout,
'vraw': $vraw-layout,
'hraw': $hraw-layout
);
@mixin position-grid-items($map, $sel) {
$sel: if($sel == '' and &, &, $sel);
@debug $sel;
#{$sel} {
@each $k, $v in $map {
@at-root #{$sel}#{$k} {
@if (length($v) == 0) {
display: none
}
@else {
grid-column-start: nth($v, 1);
grid-column-end: nth($v, 2);
grid-row-start: nth($v, 3);
grid-row-end: nth($v, 4);
}
}
}
}
}
@mixin set-component-size($key) {
$columns-count: nth(map_get($default-layout, $key),2) - nth(map_get($default-layout, $key),1);
$rows-count: nth(map_get($default-layout, $key),4) - nth(map_get($default-layout, $key),3);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
}