Admin Layout

Website layout for administration pages.

Prior to Core-Styles v3 administration pages were served in a separate framework called Admin-Styles. We soon realized we wanted access to all the things in core-styles from admin pages, and that the thing we found most valuable from Admin-Styles was the page layout features. Now the page layout features of Admin-Styles are included as part of Core-Styles.

Default Example

This example shows the default set of options used by Webstop’s products and is installed via the Styler gem.

Site Modal

To help keep the concepts easier to understand, we’ve left out the Site Modal code from the following HTML examples. See the Site Modal section at the end of the page for more information.

View Sidebar Example Page 
<div class="admin admin-with-sidebar">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <aside class="admin-sidebar">
    Admin Sidebar...
  </aside>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Ruby On Rails Support

Most of the time we don’t talk about any back-end technology in our front-end framework. With the admin layout system we have built out a unique system to control page layout, so we are going to explain it here.

Admin Layout Template

At the heart of the layout system is the admin_v3 layout template. To use it place layout 'admin_v3' near the top of your controller. This is typically done right after any actions are called, like the before_action. This one template handles all admin page layouts.

The @page Map

In the application controller we define a map called @page. The @page variable contains boolean settings which control the page layout. These settings are explained in the chart below.

The @page hash is set at the top of a view file to control how that view will be presented in the admin layout template.

Key Name Default Description
sidecar false Controls display the sidecar left side navigation. This feature isn't fully implemented yet.
sidebar true Controls display the sidebar right side navigation. Expects content to be placed into the sidebar yield. e.g. content_for :sidebar, raw(render 'sidebar')
header true Page header, which sits right below the header navbar. This feature is deprecated.
footer true Controls display the footer. Expects content to be placed into the footer yield, and will typically contain breadcrumb navigation.
flush false Removes padding from the main content area. Usually used for tables to allow them to fill the content area.
tables false Primes the system to expect the main content section to be filled with a scrollable table.

Edit Page Example

Edit Page 
<%
  @page[:header]  = false
  @page[:sidebar] = true
  
  content_for :sidebar, raw(render 'sidebar')
  content_for :footer, breadcrumbs(
    [
      {title: Tracker.model_name.human.pluralize.titleize, path: retailer_trackers_path(@retailer)},
      {title: :edit, path: edit_retailer_tracker_path(@retailer, @tracker)}
    ]
  )
%>
<div class="card card-readable card-centered card-shadowed">
<div class="card-body">
  <h1 class="card-title">Editing Tracker</h1>
    <%= render 'form', tracker: @tracker %>
  </div>
</div>

Design Patterns

The admin system is designed to accommodate the following common layout types.

Data Tables Index Page

Index Page Using Data Tables 
@page[:tables]  = true
@page[:flush]   = true
@page[:sidebar] = true

New Resource Form Page

New Resource Form Page 
@page[:header]  = false
@page[:sidebar] = true

Show Resource Page

Show Resource Page 
@page[:header]  = false
@page[:sidebar] = true

Attributes

The data-ajax-form & action attributes are required. The rest are optional.

Options Description
data-ajax-form The presence of this attribute indicates submitting on this form should trigger an AJAX load.
action Attribute specifies the URL of the content you want AJAX'd. The AJAX request should return HTML content to display inside the target element.
data-target The DOM node to load the content into. Uses standard jQuery selectors, usually targets an id attribute (e.g. #some-target). Optional, if the data-target attribute isn't present the content will replace the ajax form.
data-power-bar When present, completing the ajax call triggers a reload of the Shopping List Power Bar.

Site Modal

The Site Modal is an empty hidden modal available for use by features such as AJAX Modal, and other features that rely on having a modal available. The modal is identified by the id attribute with a value of site-modal. The Site Modal is also available in the Public Layout.

<div class="admin">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
  <div class="site-modal modal fade" id="site-modal" tabindex="-1" role="dialog" aria-labelledby="site-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="site-modal-content modal-content">
        <div class="modal-header">
          <div class="row mx-0 w-100">
            <div class="col ps-0">
              <h4 class="site-modal-title modal-title" id="site-modal-title"></h4>
            </div>
            <div class="col-auto pe-0">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">
                <i class="fak fa-cancel"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="site-modal-body modal-body" id="site-modal-body"></div>
        <div class="site-modal-footer modal-footer" id="site-modal-footer">
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Alternate Examples

The following examples are part of the public layout system, but not used by Webstop’s standard products.

Base Admin Example

This example contains a header, footer, and main content sections.

View Base Admin Example Page 
<div class="admin">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidecar Example

View Sidecar Example Page 
<div class="admin admin-with-sidecar">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidecar" role="navigation">
      Admin Sidecar Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidenav Example

View Sidenav Example Page 
<div class="admin admin-with-sidenav">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidenav" role="navigation">
      Admin Sidenav Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidecar and Sidenav Example

View Sidecar & Sidenav Example Page 
<div class="admin admin-with-sidenav">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidecar" role="navigation">
      Admin Sidecar Navigation...
  </nav>
  <nav class="admin-sidenav" role="navigation">
      Admin Sidenav Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidecar and Sidebar Example

View Sidecar & Sidebar Example Page 
<div class="admin admin-with-sidecar admin-with-sidebar">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidecar" role="navigation">
      Admin Sidecar Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <aside class="admin-sidebar">
    Admin Sidebar...
  </aside>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidenav and Sidebar Example

View Sidenav & Sidebar Example Page 
<div class="admin admin-with-sidenav admin-with-sidebar">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidenav" role="navigation">
      Admin Sidenav Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <aside class="admin-sidebar">
    Admin Sidebar...
  </aside>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>

Sidecar, Sidenav, and Sidebar Example

View Sidecar, Sidenav & Sidebar Example Page 
<div class="admin admin-with-sidecar admin-with-sidebar">
  <header class="admin-header" role="banner">
    Admin Header...
  </header>
  <nav class="admin-sidecar" role="navigation">
      Admin Sidecar Navigation...
  </nav>
  <nav class="admin-sidenav" role="navigation">
    Admin Sidenav Navigation...
  </nav>
  <main class="admin-page" role="main">
    Admin Page Main Content...
  </main>
  <aside class="admin-sidebar">
    Admin Sidebar...
  </aside>
  <footer class="admin-footer" role="contentinfo">
    Admin Footer...
  </footer>
</div>