Panel UI Development Guidelines

Work in Progress: These guidelines have been established to ensure that all views within the Concerto 2 Panel follow consistent conventions. Look below for markup samples and general pointers about the way the Concerto 2 user interface is designed.

---

Primary Interface Patterns

Fluid Grid System

Viewblocks

The primary UI construct for views in the Concerto 2 Panel is the viewblock. The main stylesheet attributes for these content cells are defined in app/assets/stylesheets/application/layout/display-blocks.scss.erb. The main element to create the content cell is a <section> tag with CSS class viewblock.

Here's an example of some markup that creates a viewblock with a sidebar:

<section class="viewblock">
  <header class="viewblock-header">  # creates a gray header that can store all kinds of things, including the title of the cell
    <h1 class="default-padding">Header Text Goes Here</div>
  </header>
  <div class="viewblock-cont">
      # this is where the main content in the right, much larger column will be located
      
      Content for page goes here

  </div>
</section>

Top Menu

The Top Menu is the global navigation within the Concerto 2 Panel. All major parts of the application are linked through this navigation bar, which floats at the top of every page.

Tooltips

---

Specific Views

Browse Content

Browse Content is the interface for finding and viewing all content in the Concerto 2 Panel. This interface is designed to be fast and flexible.

Basic View + Edit Pages

All basic pages for CRUD operations (Create, Read, Update, Delete) follow a similar layout within the Panel.

• Only use the light blue left sidebar for presenting information, action buttons, and inline edit forms that you want to present on the same page as something that appears in the main content area to the right of the screen. Never use the sidebar for navigational elements other than action buttons (for example, don't put a vertical tab menu in the sidebar!). Instead of placing navigation in the sidebar, use horizontal tabs like you see on the Browse Content pages for listing out sub-feeds.

Forms

Preference is given to the following classes for sizing fields (over span classes), common assignments within the site are shown in parenthesis.

• input-small (date, time inputs, etc.)
• input-medium (for passwords, etc.)
• input-large
• input-xlarge (for names, etc.)
• input-xxlarge (for textareas, etc.)

Use the layouts/errors partial for displaying model errors at the top of the panel.

<%= form_for(@group) do |f| %>
  <%= render :partial => "layouts/errors", :object => @group %>

  <fieldset>
    <legend><span><%= t('.provide_details') %></span></legend>
    <div class="clearfix">
      <%= f.label :name %>
      <div class="input">
        <%= f.text_field :name, :class => "input-xlarge", :autofocus => true %>
      </div>
    </div>

fieldsets with legends separate the logical areas of the forms, as shown above.