frontend-tutorial-framework/src/assets/scss/mixins/_layout.scss

// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
// All Rights Reserved. See LICENSE file for details.

$grid-columns-count: 100;
$grid-rows-count: 30;

$terminal-ide-web-layout: (
  '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': (0, 20, 0, 4),
  'messages': (0, 20, 2, 100),
  'ide': (),
  'terminal': (56, 96, 0, 100),
  'web': (20, 56, 0, 100),
  'sidebar': (96, 100, 0, 100)
);

$terminal-ide-vertical-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 2, 100),
  'ide': (56, 96, 0, 100),
  'terminal': (20, 56, 0, 100),
  'web': (),
  'sidebar': (96, 100, 0, 100)
);

$terminal-ide-horizontal-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 2, 100),
  'ide': (20, 96, 0, 60),
  'terminal': (20, 96, 60, 100),
  'web': (),
  'sidebar': (96, 100, 0, 100)
);

$ide-web-vertical-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 4, 100),
  'ide': (56, 96, 0, 100),
  'terminal': (),
  'web': (20, 56, 0, 100),
  'sidebar': (96, 100, 0, 100)
);

$terminal-only-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 4, 100),
  'ide': (),
  'terminal': (20, 96, 0, 100),
  'web': (),
  'sidebar': (96, 100, 0, 100)
);

$ide-only-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 4, 100),
  'ide': (20, 96, 0, 100),
  'terminal': (),
  'web': (),
  'sidebar': (96, 100, 0, 100)
);

$web-only-layout: (
  'header': (0, 20, 0, 4),
  'messages': (0, 20, 4, 100),
  'ide': (),
  'terminal': (),
  'web': (20, 96, 0, 100),
  'sidebar': (96, 100, 0, 100)
);

$layouts: (
  '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($layouts-key) {
  @if(index(map_keys($layouts), $layouts-key)) {
    $layout: map_get($layouts, $layouts-key)
  }
  @else {
    @error 'Invalid layout value: "#{$layouts-key}"'
  }
}

@mixin hide-component() {
  // We need to make sure the DOM element is displayed but not visible
  visibility: hidden;
  position: absolute;
  z-index: -10000000;
}

.hide-attribute {
  @include hide-component();
}

@function get-layout($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) {
  $sel: if($sel == '' and &, &, $sel);

  @each $k, $v in $map {
    #{$sel}#{$k} {
      @if (length($v) == 0) {
        @include hide-component();
      }
      @else {
        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)}));
      }
      /* A hack for Chrome, without this there is a white 1px strip on the left of the terminal */
      /* You have been warned: don't try to understand this */
      @if($sel == 'terminal-ide-web' & & $k == 'terminal') {
        transform: translateX(-1px);
      }
      /* End of hack */
    }
  }
}

@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: 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;
  }
}

@mixin word-break() {
  /* For Firefox */
  white-space: pre-wrap;
  word-break: break-word;
  /* For Chrome and IE */
  word-wrap: break-word;
}