Iconifying Content - Dashboard ('-' * 30) Concept for an analytics dashboard. Click the various metrics to see detailed graphs with more data.
Blog post: Iconifying Content
Iconifying Content - Dashboard ('-' * 30) Concept for an analytics dashboard. Click the various metrics to see detailed graphs with more data.
Blog post: Iconifying Content
<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> |
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 | |
}); |
@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); | |
} |