mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-28 23:55:13 +00:00
Code Issues Releases Wiki Activity

Use fix sidebar to instrument and control layout changes

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:21:20 +02:00
committed by Kristóf Tóth
parent b460c429e6
commit 959a0df3d6
16 changed files with 487 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/images/IDE.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

1
src/assets/images/IDE_active.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

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

@ -158,3 +158,6 @@ $font-size-h5: floor(($font-size-base * 1.1));
$tao-navbar-height: 67px;
$company-logo-width: 130px;

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

@ -1,72 +1,102 @@
$grid-columns-count: 25;
$grid-rows-count: 25;
$layout-key: 'vraw-open';
$default-open-layout: (
$terminal-ide-web-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 10),
'webide': (15,$grid-columns-count+1, 1, $grid-rows-count+1),
'terminal': (1, 15, 10, $grid-rows-count+1),
'web': (6, 15, 1, 10),
'sidebar': ()
'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)
);
$default-closed-layout: (
$terminal-web-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 10),
'webide': (16,$grid-columns-count+1, 1, $grid-rows-count+1),
'terminal': (1, 16, 10, $grid-rows-count+1),
'ide': (),
'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1),
'web': (6, 15, 1, 10),
'sidebar': ()
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$vraw-open-layout: (
$terminal-ide-vertical-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'webide': (16, $grid-columns-count+1, 1,$grid-rows-count+1),
'terminal': (6, 16, 1, $grid-rows-count+1),
'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
'terminal': (6, 15, 1, $grid-rows-count+1),
'web': (),
'sidebar': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$vraw-closed-layout: (
$terminal-ide-horizontal-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'webide': (),
'ide': (6,$grid-columns-count, 1, 16),
'terminal': (6, $grid-columns-count, 16, $grid-rows-count+1),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1),
);
$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),
'terminal': (),
'web': (6, 15, 10, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$terminal-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'ide': (),
'terminal': (6, $grid-columns-count, 1,$grid-rows-count+1),
'web': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$hraw-layout: (
'header': (1, 4, 1,$grid-rows-count+1),
'messages': (1, 4, 2,$grid-rows-count+1),
'webide': (4,$grid-columns-count+1, 1, 10),
'terminal': (4, $grid-columns-count+1, 10, $grid-rows-count+1),
$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),
'terminal': (),
'web': (),
'sidebar': (),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
);
$web-only-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'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)
);
$layouts: (
'default-open': $default-open-layout,
'default-closed': $default-closed-layout,
'vraw-open': $vraw-open-layout,
'vraw-closed': $vraw-closed-layout,
'hraw': $hraw-layout
'terminal-ide-web': $terminal-ide-web-layout,
'terminal-web': $terminal-web-layout,
'terminal-ide-vertical': $terminal-ide-vertical-layout,
'terminal-ide-horizontal': $terminal-ide-horizontal-layout,
'ide-web-vertical': $ide-web-vertical-layout,
'terminal-only': $terminal-only-layout,
'ide-only': $ide-only-layout,
'web-only': $web-only-layout
);
@mixin set-layout($layout_key) {
@if(index(map_keys($layouts), $layout_key)) {
$layout: map_get($layouts, $layout_key)
@mixin set-layout($layouts-key) {
@if(index(map_keys($layouts), $layouts-key)) {
$layout: map_get($layouts, $layouts-key)
}
@else {
@error 'Invalid layout value: "#{$layout_key}"'
@error 'Invalid layout value: "#{$layouts-key}"'
}
}
@function get-layout(){
@return map_get($layouts, $layout_key);
@function get-layout($layouts-key){
@return map_get($layouts, $layouts-key);
}
@mixin position-grid-items($map, $sel) {
@ -87,8 +117,8 @@ $layouts: (
}
}
@mixin set-component-size($key) {
$tfw-component: map_get(get-layout(), $key);
@mixin set-component-size($layouts-key, $layout-key) {
$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);
@ -100,22 +130,3 @@ $layouts: (
}
[tfw-layout='vraw-open'] {
@include position-grid-items(map_get($layouts,'vraw-open'),'.tfw-');
}
[tfw-layout='vraw-closed'] {
@include position-grid-items(map_get($layouts,'vraw-closed'),'.tfw-');
}
[tfw-layout='hraw'] {
@include position-grid-items(map_get($layouts,'hraw'),'.tfw-');
}
[tfw-layout='default-open'] {
@include position-grid-items(map_get($layouts, 'default-open'),'.tfw-');
}
[tfw-layout='default-closed'] {
@include position-grid-items(map_get($layouts,'default-closed'),'.tfw-');
}