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

Parametrize CSS grid

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