workflow layout

layout with 3 panel

by ramesh valasa

HTML

<div class="pn-container">
  <header class="pn-header">
    <span class="pn-header-title">Workflows</span>
  </header>
  <div class="pn-content">
    <pn-bolist class="pn-sidebar"> 
        <div class="pn-sidebar-content">bolist block</div>
        <div class="vertical"></div>
    </pn-bolist>
    <status-list-view> graph </status-list-view>
    <details-view-panel class="pn-sidebar">
        <div class="vertical"></div>
        <div  class="pn-sidebar-content">details block </div>
    </details-view-panel>
  </div>

</div>

CSS

html, body, .pn-container {
   height: 100%;
}

body {
  margin: 0;
}

.pn-header {
  border-bottom: 1px solid #d8d8d8;
  display: flex;
    flex-direction: row;
    height: 42px;
    align-items: center;
}

.pn-header-title {
  margin-left: 20px;
}

.pn-content {
  display: flex;
  height: calc(100vh - 43px);
}

status-list-view {
  flex: 1;
  text-align center;
}

.pn-sidebar {
  display: flex;
  width: 150px;
}

.pn-sidebar-content {
  flex: 1;
}

.vertical {
  width: 24px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.3);
  height: 100%;
  cursor: pointer;
}

.pn-collapse {
 width: 24px;
}

JavaScript

$('.vertical').on('click', function(aEvent) {
 $(this).siblings().toggle();
$(this).parent().toggleClass('pn-collapse');
});