Iconifying Content - Dashboard

Iconifying Content - Dashboard.markdown

Iconifying Content - Dashboard ('-' * 30) Concept for an analytics dashboard. Click the various metrics to see detailed graphs with more data.

Blog post: Iconifying Content

A Pen by Will Boyd on CodePen.

License.

index.html

<div class="container">
  <div class="side">
    <h1>Analytics Dashboard</h1>
    <ul class="links">
      <li><a href="#" class="selected" data-metric="visits">Visits</a></li>
      <li><a href="#" data-metric="pageviews">Pageviews</a></li>
      <li><a href="#" data-metric="conversions">Conversions</a></li>
    </ul>
    <div class="stats">
      <ul data-metric="visits">
        <li>
          <div class="key">Total Visits</div>
          <div class="val">356</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">50.9</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">+122.2%</div>
        </li>
      </ul>
      <ul data-metric="pageviews">
        <li>
          <div class="key">Total Pageviews</div>
          <div class="val">468</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">66.9</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">+16.7%</div>
        </li>
      </ul>
      <ul data-metric="conversions">
        <li>
          <div class="key">Total Conversions</div>
          <div class="val">456</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">65.1</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">-47.4%</div>
        </li>
      </ul>
    </div>
    <ul>
      <li>
        <div class="key">Range</div>
        <div class="val">7 days</div>
      </li>
      <li>
        <div class="key">Timezone</div>
        <div class="val">PDT</div>
      </li>
      <li>
        <div class="key">Spirit Animal</div>
        <div class="val">Duck</div>
      </li>
    </ul>
  </div>
  <div class="main">
    <ul>
      <li class="active">
        <article tabindex="0" data-metric="visits">
          <div class="area">
            <div class="lines">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="data visits">
              <dl>
                <dt>3/8</dt>
                <dd>36</dd>
              </dl>
              <dl>
                <dt>3/9</dt>
                <dd>44</dd>
              </dl>
              <dl>
                <dt>3/10</dt>
                <dd>52</dd>
              </dl>
              <dl>
                <dt>3/11</dt>
                <dd>32</dd>
              </dl>
              <dl>
                <dt>3/12</dt>
                <dd>44</dd>
              </dl>
              <dl>
                <dt>3/13</dt>
                <dd>68</dd>
              </dl>
              <dl>
                <dt>3/14</dt>
                <dd>80</dd>
              </dl>
            </div>
          </div>
          <h1>Visits</h1>
        </article>
      </li>
      <li>
        <article tabindex="0" data-metric="pageviews">
          <div class="area">
            <div class="lines">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="data pageviews">
              <dl>
                <dt>3/8</dt>
                <dd>72</dd>
              </dl>
              <dl>
                <dt>3/9</dt>
                <dd>56</dd>
              </dl>
              <dl>
                <dt>3/10</dt>
                <dd>64</dd>
              </dl>
              <dl>
                <dt>3/11</dt>
                <dd>48</dd>
              </dl>
              <dl>
                <dt>3/12</dt>
                <dd>64</dd>
              </dl>
              <dl>
                <dt>3/13</dt>
                <dd>80</dd>
              </dl>
              <dl>
                <dt>3/14</dt>
                <dd>84</dd>
              </dl>
            </div>
          </div>
          <h1>Pageviews</h1>
        </article>
      </li>
      <li>
        <article tabindex="0" data-metric="conversions">
          <div class="area">
            <div class="lines">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="data conversions">
              <dl>
                <dt>3/8</dt>
                <dd>76</dd>
              </dl>
              <dl>
                <dt>3/9</dt>
                <dd>88</dd>
              </dl>
              <dl>
                <dt>3/10</dt>
                <dd>72</dd>
              </dl>
              <dl>
                <dt>3/11</dt>
                <dd>68</dd>
              </dl>
              <dl>
                <dt>3/12</dt>
                <dd>52</dd>
              </dl>
              <dl>
                <dt>3/13</dt>
                <dd>60</dd>
              </dl>
              <dl>
                <dt>3/14</dt>
                <dd>40</dd>
              </dl>
            </div>
          </div>
          <h1>Conversions</h1>
        </article>
      </li>
    </ul>
  </div>
</div>

script.js

function selectMetric(e) {
  e.preventDefault();
  var metric = $(e.currentTarget).attr('data-metric');
  var metricSelector = '[data-metric="' + metric + '"]';

  // set selected link
  $('.side .selected').removeClass('selected');
  $('.side .links a' + metricSelector).addClass('selected');

  // show proper stats
  $('.side .stats ul').hide();
  $('.side .stats ul' + metricSelector).show();

  // activate proper graph
  var $wrapper = $('.main article' + metricSelector).parent();
  var isActive = $wrapper.hasClass('active');
  if (!isActive) {
    $wrapper
      .addClass('active')
      .siblings().removeClass('active');
  }
}

function checkKey(e) {
  if (e.keyCode === 13) {
    // hit enter
    selectMetric(e);
  }
}

$('.side .links a').on('click', selectMetric);
$('.main article').on({
  'click': selectMetric,
  'keyup': checkKey
});

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  background-color: #232e35;
  font: 1em/1 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

.container {
  position: absolute;
  left: calc(50% - 501px);
  width: 1002px;
  margin: 20px 0;
  padding: 30px;
  border: 1px dashed #646c71;
}

.side {
	float: left;
	width: 219px;
  padding-right: 30px;
}

.side h1 {
	margin: 0;
	color: #fff;
	font-size: 1.1em;
	letter-spacing: 1px;
  line-height: 1.3;
	text-transform: uppercase;
}

.side ul {
	margin: 48px 0;
	padding: 0;
	list-style: none;
	font-size: .9em;
	text-transform: uppercase;
}

.side li {
	margin: 16px 0;
}

.side li::after {
	content: '';
	display: block;
	clear: both;
}

.side a {
	display: block;
	padding: 10px;
	color: #1c8ed6;
}

.side a:focus {
	outline: 1px solid #fff;
}

.side .selected {
	background-color: #384248;
}

.side .selected::after {
	content: '\f105';
	float: right;
	color: #7a8185;
	font-family: 'FontAwesome';
}

.side .key {
	float: left;
	color: #7a8185;
}

.side .key::after {
	content: ':';
}

.side .val {
	float: right;
}

.side .links li {
	margin: 4px -10px;
}

.side .stats ul:not(:first-child) {
	display: none;
}

.main {
	float: left;
	width: 721px;
  padding-left: 30px;
	border-left: 1px dashed #646c71;
}

.main ul {
	width: 690px;
	height: 112px;
	margin: 486px 0 0;
	padding: 0;
	list-style: none;
}

.main li {
	float: left;
	position: relative;
	z-index: 1;
	width: 230px;
	height: 100%;
	transition: z-index;
	transition-delay: .8s;
}

.main li::before {
	content: '\f106';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #384248;
	font: 6em/1 'FontAwesome';
	transform: translate(-50%, -50%);
}

.main article {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 688px;
	height: 448px;
	outline: 4px solid #646c71;
	background-color: #384248;
	cursor: pointer;
	transform: translate(-50%, -50%) scale(.25);
	transition: transform .8s;
}

.main article:focus {
	outline-color: #fff;
}

.main .area {
	position: relative;
	width: 560px;
	height: 300px;
	margin: 32px 64px 48px;
	font-size: 1.1em;
}

.main .lines {
	counter-reset: y-axis 120;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.main .lines div {
	opacity: 0;
	position: relative;
	height: 20%;
	border-top: 1px solid #646c71;
	transition: opacity .8s;
}

.main .lines div::before {
	counter-increment: y-axis -20;
	content: counter(y-axis);
	display: block;
	position: absolute;
	top: -10px;
	left: -40px;
	width: 40px;
	padding-right: 8px;
	text-align: right;
}

.main .data {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.main dl {
	float: left;
	position: relative;
	width: 80px;
	height: 300px;
	margin: 0;
	text-align: center;
}

.main dt {
	opacity: 0;
	position: absolute;
	bottom: -28px;
	left: 0;
	right: 0;
	transition: opacity .8s;
}

.main dd {
	position: absolute;
	bottom: 0;
	width: 40px;
	margin: 0 20px;
	padding-top: 8px;
	border-top: 1px solid #1c8ed6;
	list-style: none;
	color: #fff;
	background-color: #125c8a;
}

.main dd::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #1c8ed6;
	transition: opacity .8s;
}

.main .visits :nth-child(1) dd { height: 108px; }
.main .visits :nth-child(2) dd { height: 132px; }
.main .visits :nth-child(3) dd { height: 156px; }
.main .visits :nth-child(4) dd { height: 96px; }
.main .visits :nth-child(5) dd { height: 132px; }
.main .visits :nth-child(6) dd { height: 204px; }
.main .visits :nth-child(7) dd { height: 240px; }

.main .pageviews :nth-child(1) dd { height: 216px; }
.main .pageviews :nth-child(2) dd { height: 168px; }
.main .pageviews :nth-child(3) dd { height: 192px; }
.main .pageviews :nth-child(4) dd { height: 144px; }
.main .pageviews :nth-child(5) dd { height: 192px; }
.main .pageviews :nth-child(6) dd { height: 240px; }
.main .pageviews :nth-child(7) dd { height: 252px; }

.main .conversions :nth-child(1) dd { height: 228px; }
.main .conversions :nth-child(2) dd { height: 264px; }
.main .conversions :nth-child(3) dd { height: 216px; }
.main .conversions :nth-child(4) dd { height: 204px; }
.main .conversions :nth-child(5) dd { height: 156px; }
.main .conversions :nth-child(6) dd { height: 180px; }
.main .conversions :nth-child(7) dd { height: 120px; }

.main article h1 {
	height: 52px;
	margin: 16px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: 2.8em;
	font-weight: normal;
	transform: translateY(-16px);
	transition: transform .8s;
}

/* Chrome/Safari/iOS fix: Bumping up the z-index from the start of
   the expand animation until the end of the shrink animation
   prevents unnecessary repaints on subsequent <article> elements. */
.main .active {
	z-index: 2;
	transition-delay: 0s;
}

.main li:nth-child(1).active article {
	transform: translate(-114px, -542px) scale(1);
}
.main li:nth-child(2).active article {
	transform: translate(-344px, -542px) scale(1);
}
.main li:nth-child(3).active article {
	transform: translate(-574px, -542px) scale(1);
}

.main .active article {
	cursor: auto;
}

.main .active article {
	outline-width: 1px;
}

.main .active .lines div,
.main .active dt {
	opacity: 1;
}

.main .active dd::after {
	opacity: 0;
}

.main .active article h1 {
	transform: translateY(0);
}