mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-16 05:11:56 +00:00
Code Issues Releases Wiki Activity

Set web component iframe size properly

Browse Source
This commit is contained in:
Gabor PEK 2018-03-13 11:11:46 +01:00
parent adff2c5e1b
commit 174a1dd9a2
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,9 @@
// Change this to switch template. Options: 'default', 'vraw', 'hraw' // Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'default'; $layout-template: 'default';
$grid-columns-count: 5;
$grid-rows-count: 15;
$default-layout: ( $default-layout: (
'header': (1, 2, 1, 2), 'header': (1, 2, 1, 2),
'messages': (1, 2, 2, 10), 'messages': (1, 2, 2, 10),
@ -55,6 +58,14 @@ $layout: (
} }
} }
@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 { .tfw-grid-main-components {
// overflow-y: visible; // overflow-y: visible;
display: grid; display: grid;
@ -62,8 +73,8 @@ $layout: (
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat($grid-columns-count, 1fr);
grid-template-rows: repeat(15, 1fr); grid-template-rows: repeat($grid-rows-count, 1fr);
@include position-grid-items(map_get($layout,$layout-template),'.tfw-'); @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
@ -89,12 +100,8 @@ $layout: (
.row-container { .row-container {
display: flex; display: flex;
width: 100%;
height: 100%;
flex-direction: column;
min-height: 65vmin;
min-width: 65vmin;
overflow: hidden; overflow: hidden;
@include set-web-component-size();
} }
.iframe-row { .iframe-row {
@ -103,7 +110,6 @@ $layout: (
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
.tfw-webide { .tfw-webide {