Home Page Structure

[dhornbein]

The homepage (mock up here) contains a top message, pinned alerts, event cards, incident list, and incident map.

Components

• See #1 for structure of Alert Cards

Page Structure

<main role="main" class="main">
  <!-- Welcome text for no logged in users -->
  <div class="row">

    <div class="medium-8 columns">
      <p class="lead">Welcome text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique repellendus quisquam eius, veritatis architecto sit quibusdam illum dignissimos saepe id quam ipsum non aliquid quaerat nemo fugit provident ex quod!</p>
    </div>
    <div class="medium-4 columns text-center">
      <br>
      <a href="#" class="button small">Log in</a>
      <a href="#" class="button small">Register</a>
    </div>

  </div>
  <!-- end welcome -->

  <!-- Display if there are alerts -->
  <div class="row well blue">
    <h3 class="well-title">Alerts <small><a href="#">See all alerts</a></small></h3>

    <div class="medium-6 large-3 columns">
      <!-- Alert goes here -->
    </div>
    <div class="medium-6 large-3 columns">
      <!-- Alert goes here -->
    </div>
    <div class="medium-6 large-3 columns">
      <!-- Alert goes here -->
    </div>
    <div class="medium-6 large-3 columns">
      <!-- Alert goes here -->
    </div>
  </div>
  <!-- End alert display -->

  <!-- Event card display -->
  <div class="row well">
    <h3 class="well-title">Events <small><a href="#">See all events</a></small></h3>
    <div class="medium-4 columns">
      <!-- Event card goes here -->
    </div>
    <div class="medium-4 columns">
      <!-- Event card goes here -->
    </div>
    <div class="medium-4 columns">
      <!-- Event card goes here -->
    </div>
  </div>
  <!-- End event card display -->

  <!-- Incident list and map -->
  <div class="row well">
    <h3 class="well-title">Incidents <small><a href="#">See all incidents</a></small></h3>
    <div class="medium-6 columns">
      <!-- Incident list goes here -->
    </div>
    <div class="medium-6 columns">
      <!-- Incident map goes here -->
    </div>
  </div>
  <!-- End incident list and map -->

</main>

Mockup

Note: This image is a published version of a google drawing, and should reflect the most recent changes

[flavour]

Unlike for Alerts, we should always display the Events & Incidents sections even if there is no data, correct?

[devinbalkind]

If it's easy to make Alerts and Events disappear if there is no data then that would be best.

Incidents should always be displayed even if there is no data.

[flavour]

Alerts & Events currently invisible when no data, so yes: easy :)