Skip to content

Instantly share code, notes, and snippets.

@colin-young

colin-young/answers.js

Last active December 15, 2015 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save colin-young/5254208 to your computer and use it in GitHub Desktop.
Save colin-young/5254208 to your computer and use it in GitHub Desktop.
Download ZIP
Answers Demo
Raw
answers.js
$(function(){
$('#content-card .flip-card').click(function () {
$('#content-card').toggleClass('rotated');
});
});
Raw
demo.css
body {
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, li {
font-family:'Oxygen', sans-serif;
}
.healthedge {
color: rgb(59, 110, 149);
font-family:'Oxygen', sans-serif;
text-transform: lowercase;
}
.healthedge .first {
font-weight: 400;
}
.healthedge .second {
font-weight: 700;
}
h2.logo {
text-align: right;
}
h2.current-section {
position: relative;
left: -124px;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: right top;
}
.tab-list {
box-sizing: border-box;
overflow: hidden;
position: relative;
top: 0;
bottom: 0;
}
ul.icons {
display: inline;
list-style: none;
}
ul.icons li {
display: inline;
list-style: none;
font-family: HEDemo;
}
.report-menu > ul li {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
}
.report-menu > ul li:hover:not(.active):not(.shadow) {
background-color: #999;
border-bottom-color: #999;
box-shadow: 2px 2px 4px #666;
color: #FFF;
z-index: 4;
}
.inactive, .report-menu > ul li {
color: #AAA;
position: relative;
}
.report-menu > ul li {
background-color: #DDD;
border: #DDD solid;
border-width: 1px 0 1px 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-weight: bold;
margin: 1px 0;
padding: 5px;
z-index: 1;
}
.report-menu > ul li.active {
background-color: #FFF;
color: #000;
margin: -1px 0 2px 0;
z-index: 3;
}
.report-menu > ul li.shadow {
background: none;
border: none;
border-radius: 0;
bottom: -10px;
box-shadow: -2px -2px 4px #666;
padding: 0;
position: absolute;
right: 40px;
top: -10px;
width: 8px;
z-index: 2;
}
.report-menu > ul > li > .report-count {
float: right;
}
.report-menu > ul > li > .report-count span {
clear: right;
color: #DDD;
display: block;
float: right;
font-size: xx-small;
line-height: 1;
}
.report-menu > ul > li.active > .report-count span {
color: #AAA;
}
.report-menu > ul > li > .report-count > span:before {
content: attr(class)": ";
}
a.flip-card {
background-color: rgb(80, 165, 240);
border-radius: 8px;
box-shadow: 1px 1px 2px #666;
color: #FFF;
float: right;
margin: 0 0 5px 0;
padding: 3px 10px;
text-decoration: none;
}
.flip-card:after {
content: '\2001\2192';
}
.flip-card:active {
box-shadow: none;
position: relative;
right: -2px;
top: 2px;
}
table {
box-sizing: border-box;
width: 100%;
}
thead {
font-weight: bold;
}
thead, tbody {
border: solid #DDD;
border-width: 0 0 2px 0;
}
tbody tr + tr {
border: dotted #EEE;
border-width: 2px 0 0 0;
}
/* start Card Flip - behavior only */
.container {
-webkit-perspective: 500;
}
.container, .container .content-card, .container .card-holder {
position: relative;
}
.container .content-card {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
}
.container .card-holder {
display: inline-block;
}
.rotated {
-webkit-transform: rotateY(180deg);
}
.rotated .back {
display: block;
z-index: 99;
}
.side {
background: white;
position: absolute;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 50;
}
.back {
background-color: #FFF;
/* needed for IE display: none; */
-webkit-transform: rotateY(180deg);
z-index: 10;
}
/* end Card Flip */
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Answers Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="answers.js"></script>
<style type="text/css">
@font-face {
font-family:'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
@font-face {
font-family:'Oxygen';
font-style: normal;
font-weight: 700;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'HEDemo';
src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
font-weight: normal;
font-style: normal;
}
</style>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/base.css">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/layout.css">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/skeleton.css">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div class="five columns tab-list">
<div style="margin-right: 0;" class="four columns alpha report-menu">
<div class="three columns offset-by-one alpha">
<h5>
<span class="healthedge">
<span class="first">Health</span><span class="second">Rules</span>
</span>
</h5>
<h6>
by
<span class="healthedge">
<span class="first">Health</span><span class="second">Edge</span>
</span>
</h6>
</div>
<h2 class="three columns alpha inactive current-section">Reports</h2>
<ul class="three columns offset-by-one alpha omega">
<li>
Dashboard
</li>
<li>
<span class="report-count">
<span class="run">2</span>
<span class="view">6</span>
</span>
Accounting
</li>
<li>
<span class="report-count">
<span class="run">2</span>
<span class="view">6</span>
</span>
Billing
</li>
<li class="active">
<span class="report-count">
<span class="run">3</span>
<span class="view">4</span>
</span>
Account
</li>
<li>
<span class="report-count">
<span class="run">2</span>
<span class="view">10</span>
</span>
Claims
</li>
<li>
<span class="report-count">
<span class="run">1</span>
<span class="view">12</span>
</span>
Customer Service
</li>
<li>
<span class="report-count">
<span class="run">3</span>
<span class="view">6</span>
</span>
Enrollment
</li>
<li>
<span class="report-count">
<span class="run">3</span>
<span class="view">6</span>
</span>
Finance
</li>
<li class="shadow"></li>
</ul>
</div>
<div style="margin-left: 0;" class="one column omega tab-shadow"></div>
</div>
<h2 class="four columns offset-by-seven alpha logo">PHC</h2>
<div class="card-holder eleven columns">
<div id="content-card" class="content-card eleven columns alpha omega">
<div class="front side">
<div class="eleven columns alpha omega main-content">
<a class="flip-card" href="#">View Saved Reports</a>
<br class="clear" />
<table>
<thead>
<tr>
<th>Report Name</th>
<th>Version</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Account Summary</td>
<td>2013-02-15</td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
</ul>
</td>
<td><ul class="icons"><li>info</li></ul></td>
</tr>
<tr>
<td>Terminated Account</td>
<td>2013-02-15</td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>graph</li>
</ul>
</td>
<td><ul class="icons"><li>info</li></ul></td>
</tr>
<tr>
<td>Another Report</td>
<td>2013-02-15</td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>stacked</li>
</ul>
</td>
<td><ul class="icons"><li>info</li></ul></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="back side">
<div class="eleven columns alpha omega main-content-historical">
<a class="flip-card" href="#">Run New Reports</a>
<br class="clear" />
<table>
<thead>
<tr>
<th>Report Name</th>
<th>Version</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Account Summary</td>
<td>2013-02-16</td>
<td></td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>scatter</li>
</ul>
</td>
<td><ul class="icons"><li>infocircle</li></ul></td>
</tr>
<tr>
<td>Account Summary</td>
<td>2013-02-15</td>
<td></td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>pie</li>
</ul>
</td>
<td><ul class="icons"><li>infocircle</li></ul></td>
</tr>
<tr>
<td>Account Summary</td>
<td>2013-02-14</td>
<td></td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>stacked</li>
</ul>
</td>
<td><ul class="icons"><li>infocircle</li></ul></td>
</tr>
<tr>
<td>My Custom Account Summary</td>
<td>2013-02-14</td>
<td>A User</td>
<td>
<ul class="icons">
<li>pdf</li>
<li>excel</li>
<li>file</li>
<li>graph</li>
</ul>
</td>
<td><ul class="icons"><li>infocircle</li></ul></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment