mrtoth
/
frontend-tutorial-framework
mirror of https://github.com/avatao-content/frontend-tutorial-framework
1
0
Fork 0
Code Issues Releases Wiki Activity

Parametrize CSS grid

This commit is contained in:
balazs 2019-01-23 16:05:53 +01:00
parent 7e6080e396
commit 857a7ed892
1 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/assets/scss/mixins/_layout.scss
View File

@ -1,79 +1,79 @@
// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.
$grid-columns-count: 25;
$grid-rows-count: 25;
$grid-columns-count: 100;
$grid-rows-count: 30;
$terminal-ide-web-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 16),
'ide': (15,$grid-columns-count, 1, $grid-rows-count+1),
'terminal': (1, 15, 16, $grid-rows-count+1),
'web': (6, 15, 1, 16),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 60),
'ide': (56, 96, 0, 100),
'terminal': (0, 56, 60, 100),
'web': (20, 56, 0, 60),
'sidebar': (96, 100, 0, 100)
);
$terminal-web-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, $grid-columns-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (),
'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1),
'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'terminal': (56, 96, 0, 100),
'web': (20, 56, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$terminal-ide-vertical-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
'terminal': (6, 15, 1, $grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (56, 96, 0, 100),
'terminal': (20, 56, 0, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$terminal-ide-horizontal-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'ide': (6,$grid-columns-count, 1, 16),
'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 2, 100),
'ide': (20, 96, 0, 60),
'terminal': (20, 96, 60, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1),
'sidebar': (96, 100, 0, 100)
);
$ide-web-vertical-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, $grid-rows-count+1),
'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (56, 96, 0, 100),
'terminal': (),
'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'web': (20, 56, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$terminal-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (),
'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1),
'terminal': (20, 96, 0, 100),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$ide-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'ide': (6, $grid-columns-count, 1,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (20, 96, 0, 100),
'terminal': (),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'sidebar': (96, 100, 0, 100)
);
$web-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'header': (0, 20, 0, 4),
'messages': (0, 20, 4, 100),
'ide': (),
'terminal': (),
'web': (6, $grid-columns-count, 1,$grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
'web': (20, 96, 0, 100),
'sidebar': (96, 100, 0, 100)
);
$layouts: (
@ -111,6 +111,10 @@ $layouts: (
@return map_get($layouts, $layouts-key);
}
@function convert-ratio($ratio, $max) {
@return round(($ratio * $max) / 100) + 1;
}
@mixin position-grid-items($map, $sel) {
$sel: if($sel == '' and &, &, $sel);
@ -120,14 +124,11 @@ $layouts: (
@include hide-component();
}
@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);
@if ($k == 'ide') {
max-width: calc(100vw / #{$grid-columns-count} * (#{nth($v, 2)} - #{nth($v, 1)}));
}
grid-column-start: convert-ratio(nth($v, 1), $grid-columns-count);
grid-column-end: convert-ratio(nth($v, 2), $grid-columns-count);
grid-row-start: convert-ratio(nth($v, 3), $grid-rows-count);
grid-row-end: convert-ratio(nth($v, 4), $grid-rows-count);
max-width: calc(100vw / #{$grid-columns-count} * (#{convert-ratio(nth($v, 2), $grid-columns-count)} - #{convert-ratio(nth($v, 1), $grid-columns-count)}));
}
}
}
@ -137,8 +138,8 @@ $layouts: (
$tfw-component: map_get(get-layout($layouts-key), $layout-key);
@if (length($tfw-component) > 0) {
$columns-count: nth($tfw-component,2) - nth($tfw-component,1);
$rows-count: nth($tfw-component,4) - nth($tfw-component,3);
$columns-count: convert-ratio(nth($tfw-component,2), $grid-columns-count) - convert-ratio(nth($tfw-component,1), $grid-columns-count);
$rows-count: convert-ratio(nth($tfw-component,4), $grid-columns-count) - convert-ratio(nth($tfw-component,3), $grid-columns-count);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;