mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-07-04 17:46:23 +00:00
Code Issues Releases Wiki Activity

Add sidebar component that is ready to be designed and instrumented

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:19:42 +02:00
committed by Kristóf Tóth
parent 97d1a58fbf
commit b460c429e6
13 changed files with 169 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,62 +1,121 @@
$grid-columns-count: 5;
$grid-rows-count: 15;
$grid-columns-count: 25;
$grid-rows-count: 25;
$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)
$layout-key: 'vraw-open';
$default-open-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': ()
);
$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),
$default-closed-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),
'web': (6, 15, 1, 10),
'sidebar': ()
);
$vraw-open-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),
'web': (),
'sidebar': (),
);
$vraw-closed-layout: (
'header': (1, 6, 1, 2),
'messages': (1, 6, 2,$grid-rows-count+1),
'webide': (),
'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, 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),
'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),
'web': (),
'sidebar': (),
);
$layout: (
'default': $default-layout,
'vraw': $vraw-layout,
$layouts: (
'default-open': $default-open-layout,
'default-closed': $default-closed-layout,
'vraw-open': $vraw-open-layout,
'vraw-closed': $vraw-closed-layout,
'hraw': $hraw-layout
);
@mixin set-layout($layout_key) {
@if(index(map_keys($layouts), $layout_key)) {
$layout: map_get($layouts, $layout_key)
}
@else {
@error 'Invalid layout value: "#{$layout_key}"'
}
}
@function get-layout(){
@return map_get($layouts, $layout_key);
}
@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);
}
@each $k, $v in $map {
#{$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);
$tfw-component: map_get(get-layout(), $key);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
@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);
min-width: #{$columns-count / $grid-columns-count * 100}vw;
min-height: #{$rows-count / $grid-rows-count * 100}vh;
}
}
[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-');
}