Master-detail list layout

The master-detail pattern is consisted of two columns - the master column that contains a list of items (called main area in the Sky Framework) and the detail column (called viewport in the Sky Framework) that is used to render either a selected item's details or the form that is used to create a new item.

• At large screen resolution tiers above 1601px, both the main area and viewport view are rendered side-by-side
• At screen resolutions above 992px and below 1600px, initially only the main area view is rendered and the viewport is rendered upon user interaction as an overlay above the list. Users can return to the list by closing the overlay viewport.
• At screen resolutions below 991px only a single column is rendered, either the main area or the viewport - selecting an item on the main area view drills-down to the viewport. Users can navigate back to the list by using the breadcrumbs at the top of the screen or the browser back arrow.

The following features are available for this layout:

• An optional filtering sidebar component for each main area. The sidebar responds to resolution changes, and at resolutions below 991px it is transformed to a collapsible component.
• The viewport component, defined by the viewport class, initially renders at 384px width, but using an additional viewport-md class renders the viewport at 512px width, while the class viewport-lg renders the viewport at 700px width. Larger widths allow complex forms to be rendered inside the viewport, while still maintaining the master-detail layout advantages without too much compromise.
• Two main areas can be rendered simultaneously in vertical stacking. This feature allows nested lists to be rendered on-screen below the initial list for quicker navigation. Keep in mind that this design is only feasible at large screen resolutions as defined by the usual master-detail pattern - at resolutions above 1601px, the two main areas (including their respective filtering sidebars) and the viewport are rendered simultaneously, while at resolutions 992px up to 1600px the viewport is rendered as an overlay.

Example use cases

• Lists of items, eg products

Code output

The example renders a sample master-detail list layout using plain javascript without an application environment and thus, proper routing support is not possible.

HTML markup

The code snippet below contains only the content segment of the layout, excluding the header and footer segments.

<!-- HEADER SEGMENT -->

Copy<div class="content">
  <div class="viewport viewport">
    <div class="box pad-lg">
      <a class="btn btn-icon btn-close-viewport btn-toggle-viewport">×</a>
      <h3 class="text-center"><strong>Item Name</strong><br><small>Submitted on Feb 2nd 2017, 12:30</small></h3>
      <p class="text-center">
        <a class="btn btn-sm">Edit</a> <a class="btn btn-sm">Delete</a> <a class="btn btn-sm">Lock</a>
      </p>
      <hr class="sm">
      <div class="row text-center">
        <div class="col-xxs-12">
          <p>Attribute
            <br><strong>Value</strong>
          </p>
        </div>
        <div class="col-xxs-12">
          <p>Attribute
            <br><strong>Value</strong>
          </p>
        </div>
        <div class="col-xxs-12">
          <p>Attribute
            <br><strong>Value</strong>
          </p>
        </div>
        <div class="col-xxs-12">
          <p>Attribute
            <br><strong>Value</strong>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="main-wrapper">
    <div class="main">

      <!-- SIDEBAR COMPONENT -->

      <div class="main-header">
        <a class="btn btn-main btn-toggle-viewport" onclick='$(".viewport > div").load("new-item.html")'>New <strong>item</strong></a>
        <div class="search-sort-group">
          <div class="search-group">
            <input placeholder="Search users" type="search">
            <button type="submit"><i class="sky-icon-search"></i></button>
          </div>
          <div class="dropdown">
            <button class="btn btn-sec btn-dropdown-toggle" data-toggle="dropdown"><i class="sky-icon-sort"></i><span>Sorting options</span></button>
            <ul class="dropdown-menu dropdown-right">
              <li><a href=#>Option 1</a></li>
              <li><a href=#>Option 2</a></li>
              <li><a href=#>Option 3</a></li>
              <li><a href=#>Option 4</a></li>
              <li><a href=#>Option 5</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main-body">
        <div class="list-item selected">
          <div class="list-item-desc">
            <a class="list-item-content-link btn-toggle-viewport" onclick='$(".viewport > div").load("item-details.html")'></a>
            <h4><i class="color-square color-scale-1"></i>Item <strong>Name</strong> - <small>Submitted on Feb 2nd 2017, 12:30</small></h4>
            <p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
          </div>
          <div class="list-item-actions">
            <a href=# class="btn btn-sm">Edit</a>
            <a href=# class="btn btn-sm">Delete</a>
            <a href=# class="btn btn-sm">Lock</a>
          </div>
        </div>
      </div>
      <div class="main-footer">
        <div class="pagination-compact">
          <span class="inline-text-block-sm">Page <strong>1</strong> of <strong>10</strong></span>
          <input class="form-control-sm" type="search" placeholder="Jump to">
          <div class="btn-group">
            <a href=# class="btn btn-sec btn-sm btn-prev"><i class="sky-icon-prev"></i></a>
            <a href=# class="btn btn-sec btn-sm btn-next"><i class="sky-icon-next"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- FOOTER SEGMENT -->