Layout

There are 2 different layouts that is used in RedEye, a public layout and an application layout. The public layout is used for public facing pages, such as login, creating an account, etc. Whereas the app layout is used for the application itself.

To see an example of a public layout, see here.

This is the standard layout of a RedEye Application

Navbar

The general layout of a RedEye Application consists of a navbar at the top. Some examples of this navbar are as below:

Drawing Management

• Hello
• Hello
• Hello

• Hello
• Hello
• Hello

Workforce Mobility

• Hello
• Hello
• Hello

• Hello
• Hello
• Hello

Data Improvement

• Hello
• Hello
• Hello

• Hello
• Hello
• Hello

Analytics

• Hello
• Hello
• Hello

• Hello
• Hello
• Hello

		<header class="navbar">
          <section class="navbar__section">
            <a href="#" class="navbar__brand">
              <img src="assets/redeyelogo.png" alt="RedEye Logo" class="navbar__brand-image">
                RedEye Pattern Library
            </a>
          </section>
          <section class="navbar__section">
            <div class="dropdown dropdown--right">
              <a href="#" class="avatar dropdown__toggle" tabindex="0">
                <img src="assets/avatar.png" alt="...">
              </a>
              <ul class="dropdown__menu">
                <li class="dropdown__menu-item"><a href="#">Menu 1</a></li>
                <li class="dropdown__menu-item"><a href="#">Menu 2</a></li>
                <li class="dropdown__menu-item"><a href="#">Menu 3</a></li>
              </ul>
            </div>
          </section>
        </header>

Sidebar

The sidebar consists of an organisation picker, and below that just quick links to different areas of the application. This will differ depending on the application.

		<aside class="sidebar">
          <nav class="sidebar__section sidebar__section--non-responsive">
            <div class="sidebar__organisation">
              <div class="avatar avatar--md avatar--square">
                <img src="assets/avatar.png" alt="...">
              </div>
              <div class="sidebar__organisation__detail">
                <h3 class="sidebar__organisation__title">Organisation X</h3>
                <h5 class="sidebar__organisation__subtitle">Organisation</h5>
              </div>
            </div>
          </nav>
          <nav class="sidebar__section">
            <a href="/#" class="btn btn--block btn--left btn--lg btn--success">Add New</a>
            <a href="/elements.html" class="btn btn--block btn--left btn--lg btn--transparent">Assets</a>
            <a href="/layout.html" class="btn btn--block btn--left btn--lg btn--transparent">Schedule</a>
          </nav>
          <nav class="sidebar__section sidebar__section--bottom">
            <div class="btn-group btn-group--block">
              <a href="#" class="btn btn--transparent">Help</a>
              <a href="#" class="btn  btn--transparent">Chat</a>
            </div>
          </nav>
        </aside>

Advanced Search

On most search pages, we have a large search cta and below that the search results. As seen below:

		<div class="card docs-card-search card--search-box">
          <div class="card__section">
            <div class="card__main-search">
              <div class="form-filter">
                <input type="text" class="form-filter__search" placeholder="Search Title, Number, Groups & Metadata">
                <i class="redeye-search form-filter__icon"></i>
                <div class="form-filter__suggestions tile-list tile-list--hover">
                  <h4 class="form-filter__suggestion-category">Filter</h4>
                  <div class="tile tile--centered">
                    <div class="tile__icon"><i class="redeye-location"></i></div>
                    <div class="tile__content">
                      <div class="tile__title">Location</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-group">
                <button class="btn btn--lg">All</button>
                <button class="btn btn--lg">Templates</button>
                <button class="btn btn--lg">Jobs</button>
              </div>
            </div>
            <div class="form-filter-advanced">
              <select name="type" class="form-filter-advanced__dropdown">
                <option value="Tag">Tag</option>
                <option value="Title">Title</option>
                <option value="Location">Location</option>
              </select>
              <select name="verb" class="form-filter-advanced__dropdown">
                <option value="Is">Is</option>
                <option value="Starts with">Starts with</option>
                <option value="Ends with">Ends with</option>
              </select>
              <input type="text" class="form-filter-advanced__search">
              <button class="btn btn--transparent"><i class="redeye-cross"></i></button>
              <button class="btn btn--transparent"><i class="redeye-cross"></i></button>
            </div>
          </div>
          <div class="card__section card__section--half-padding">
            <h3 class="font-regular">400 Artefacts</h3>
          </div>
        </div>

The Dual Card Layout

On most entity pages, we prefer to use the dual card layout. This layout will show a single card firstly, and as we interact with the entity, we display another card next to it. Which is replaced with a separate card each time, as we interact within the card itself.

See the code below, or see it in action here.

		<div class="page--dual-card">
          <a href="#">Back to search</a>
          <div class="page__content">
            <div class="page__card-container">
              <div class="card card--responsive">
                ...
              </div>
            </div>
            <div class="page__card-container">
              <p class="page__card-breadcrumb"><a href="#">Previous Card</a> > <a href="#">This Card</a></p>
              <div class="card card--responsive">
                ...
              </div>
            </div>
          </div>
        </div>