Dashboard Layout | chattigo-webkit Documentation

.l-main

scss

.l-main {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  overflow: hidden;
  position: relative;

  @include media-breakpoint-up('tablet-landscape') {
    grid-template-columns: 220px 1fr;
  }

  @include element('side-menu') {
    background-image: use-color('gradients', balanced);
    box-shadow: $box-shadow-card-lvl-2;
    box-sizing: border-box;
    height: 100%;
    left: -220px;
    overflow: hidden;
    position: absolute;
    width: 220px;
    z-index: use-layer('side-menu');
    
    @include media-breakpoint-down('medium') {
      transition: all 0.4s;
    }

    @include media-breakpoint-up('tablet-landscape') {
      display: block;
      left: 0;
      // opacity: 1;
      position: relative;
      z-index: use-layer('content-2');
    }

    @include modifier('open') {
      // display: block;
      height: 100%;
      left: 0;
      // opacity: 1;
      position: absolute;
      // transition: all 0.4s;
      width: 220px;
      // z-index: use-layer('content-2');

      @include media-breakpoint-up('tablet-landscape') {
        position: relative;
      }
    }

    @include modifier('open-icon') {
      cursor: pointer;
      left: 4px;
      position: absolute;

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
        font-size: 20px;
      }
    }

    @include modifier('close-icon') {
      color: use-color('grey', 'light-i');
      cursor: pointer;
      left: 190px;
      position: absolute;
      text-decoration: none;
      top: 16px;
      z-index: use-layer('modal-2');

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        font-size: 16px;
      }
    }
  }

  @include element('content') {
    background-color: use-color('grey', light-iii);
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-gap: 16px;
    grid-template-columns: minmax(304px, 1fr);
    padding: 8px;
    // scroll-behavior: smooth;

    @include media-breakpoint-up('desktop') {
      grid-gap: 24px;
      // This almost do it!
      grid-template-columns: minmax(583px, 1fr) minmax(310px, 320px);
      padding: 24px 28px;

      @include if-block-has-modifier('l-main__content', 'one-pile', true) {
        grid-template-columns: 1fr;
      }

      @include if-block-has-modifier('l-main__content', 'two-piles', true) {
        grid-template-columns: 368px 368px;
      }

      @include if-block-has-modifier('l-main__content', 'two-halfs', true) {
        grid-template-columns: 1fr 1fr;
      }

      @include if-block-has-modifier('l-main__content', 'three-piles', true) {
        grid-template-columns: 1fr 1fr 1fr;
      }
      
      @include if-block-has-modifier('l-main__content', 'one-fr', true) {
        // grid-template-columns: 2fr minmax(320px, 1fr);
        grid-template-columns: 1fr;
      }
    }

    @include modifier('wrapper') {
      > div {
        margin-bottom: 16px;
      }
    }
  }

  @include element('overlay') {
    background-color: transparentize($color: use-color('base', 'black'), $amount: 0.2);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all 0.4s;
    width: 100%;
    z-index: use-layer('content-3');
  }

  @include element('wrapper') {
    .l-dashboard {
      &__row-section {
        margin-bottom: 0;

        @include media-breakpoint-up('stats-top') {
          margin-bottom: 8px;
        }
      }
    }
  }
}

Layout principal, hecha para contener un side-menu y el contenido del dashboard.

El modificador l-main__side-menu--close-icon debe ser usado dentro del elemento l-main__side-menu.

El modificador l-main__side-menu--open-icon debe ser usado dentro del elemento l-dashboard__header--title y despues del texto del titulo.

Se puede usar la clase modificadora .l-main__side-menu--open para mostrar el side-menu en mobile, Cuando se agregue esta clase modificadora hay que quitar el attributo display: none del elemento l-main__overlay.

El elemento l-main__overlay cumple la función de oscurecer el contenido detras del sidemenu en mobile.

Example

html

<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="l-main">
    <div class="l-main__overlay" style="display: none;"></div>
    
    <nav class="l-main__side-menu l-main__side-menu--open">
      <a class="l-main__side-menu--close-icon">
        <span class="icon-close"></span>
      </a>
    </nav>
    
    <div class="l-main__content">
      <h3 class="l-dashboard__header--title">
        Some Title

        <a class="l-main__side-menu--open-icon">
          <span class="icon-sidebar"></span>
        </a>
      </h3>

      <!-- all content -->
    </div>
  </div>

</div>

.l-dashboard

scss

.l-dashboard {
  @include element('header') {
    align-items: center;
    display: flex;
    grid-column: 1/-1;
    height: auto;
    justify-content: space-between;
    max-height: 32px;
    padding: 0 4px 0 32px;
    position: relative;

    @include media-breakpoint-up('tablet-landscape') {
      padding: 0 4px;
    }

    @include modifier('title') {
      @include use-font('h3', 'bold');
      margin: 0;

      &::first-letter {
        text-transform: uppercase;
      }
    }

    @include modifier('data-status') {
      @include use-font('body');
      color: use-color('grey', 'light');
      padding-left: 12px;
      position: relative;

      &::after {
        background-color: use-color('secondary');
        border-radius: 50%;
        content: '';
        height: 8px;
        left: 0;
        position: absolute;
        top: 7px;
        width: 8px;
      }

      &::first-letter {
        text-transform: uppercase;
      }
    }
  }

  @include element('row-section') {
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: scroll;
    padding: 8px 4px;
    position: relative;

    @include media-breakpoint-up('stats-top') {
      overflow-y: inherit;
      padding: 0;
    }
  }

  @include element('poll-section') {
    display: grid;
    grid-gap: 8px;
    grid-row-end: 8;
    grid-template-columns: 1fr;

    @include media-breakpoint-up(tablet) {
      grid-template-columns: 1fr 1fr;
    }

    @include media-breakpoint-up(desktop) {
      grid-row-end: unset;
    }
  }
}

Este componente entrega elementos de uso especifico para el layout del dashboard.

l-dashboard__header : Para los titulos y estados de los datos.
l-dashboard__row-section : elemento de ayuda para almacenar hasta 3 c-stats-card
l-dashboard__poll-section : elemento de ayuda para las encuestas.

Examples

html dashboard header

<header class="l-dashboard__header">
  <h3 class="l-dashboard__header--title">
    Resumen

    <a class="l-main__side-menu--open-icon">
      <span class="icon-sidebar"></span>
    </a>
  </h3>

  <span class="l-dashboard__header--data-status">
    Datos en tiempo real
  </span>
</header>

html row-section

<div class="l-dashboard__row-section">

</div>

html poll-section

<div class="l-dashboard__poll-section">

</div>

.l-outbound-header

scss

.l-outbound-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;

  @include element('title') {
    @include use-font('body', bold);
    color: use-color('grey', light);
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    width: fit-content;

  }
  
  @include element('subtitle') {
    @include use-font('caption');
    line-height: 12px;
  }

  .c-button {
    align-self: center;
    padding: 8px 12px;
    width: fit-content;
  }
}

*Flex display y modifica el componente .c-button

Examples

html

<div class="l-outbound-header">    
  <div class="l-outbound-header__title">
    outbound
    <small class="l-outbound-header__subtitle">
      32 mensajes programados
    </small>
  </div>    

  <a href="" class="c-button c-button--secondary">
    programar nuevo
  </a>
</div>

html

<div class="l-outbound-header">    
  <div class="l-outbound-header__title">
    outbound
    <ul class="c-stepper">
      <li class="step-complete"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <a href="" class="c-button c-button--secondary">
    Programados
  </a>
</div>

.l-card

scss

.l-card {
  @include element('actions') {
    display: flex;
    justify-content: center;
    padding: 0 0 16px;
    width: 100%;
  }
}

Layout creado para agrupar las card .c-user-card.

Consta con el elementos como:

.l-card__container: para contener los componentes .c-user-card.
.l-card__actions: para componentes como .c-loader o el boton .c-button--low-priority para cargar más datos.

Examples

html w/ loader

<div class="l-card__actions">
  <div class="c-loader"></div>
</div>

html w/ low priority button

<div class="l-card__actions">
  <button class="c-button c-button--low-priority">
    Cargar más
  </button>
</div>