mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2024-07-06 10:28:47 +00:00
Expose layout mixins to a new file and use it accordingly to have control over component positioning from shadow DOM elements
This commit is contained in:
Gabor PEK
parent
174a1dd9a2
commit
ba2e2ace6d
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>
|
||||
<div #xterm class="tfw-xterm"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
@import "../../assets/scss/mixins/layout.scss";
|
||||
|
||||
|
||||
.tfw-xterm {
|
||||
.xterm {
|
||||
@include set-component-size('terminal');
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +34,6 @@
|
|||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row-container">
|
||||
<div class="iframe-container">
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
62
src/assets/scss/mixins/_layout.scss
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user