Skip to content

Instantly share code, notes, and snippets.

/Iconifying Content - Dashboard.markdown

Created May 19, 2015 20:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/0210cb9ba1c02d2353ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/0210cb9ba1c02d2353ea to your computer and use it in GitHub Desktop.
Download ZIP
Iconifying Content - Dashboard
Raw
Iconifying Content - Dashboard.markdown
Raw
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>
Raw
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
});
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment