Skip to content

Instantly share code, notes, and snippets.

@tristen

tristen/ed-popup.html

Forked from ian29/ed-popup.html
Created January 19, 2012 18:07
Show Gist options
  • Save tristen/1641531 to your computer and use it in GitHub Desktop.
Save tristen/1641531 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ed-popup.html
<style>
.wax-popup {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
height: auto;
background: #fff;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
z-index: 1000;
padding: 20px 10px;
}
.wax-popup .header {
border-bottom: 1px solid #ccc;
margin: 10px 0 20px;
}
.wax-popup h2 {
font-size: 24px;
line-height: 28px;
font-weight: normal;
float: left;
margin: 5px 0 10px;
padding: 0;
}
.wax-popup span.county {
display: block;
float: right;
text-align: right;
color: gray;
line-height: 35px;
}
.wax-popup .graduation {
color: #fff;
font-weight: 500;
clear: both;
padding: 3px 10px;
margin-bottom: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
}
.wax-popup .graduation.grade-a { background-color: #96629f; }
.wax-popup .graduation.grade-b { background-color: #c26091; }
.wax-popup .graduation.grade-c { background-color: #d9776a; }
.wax-popup .graduation.grade-d { background-color: #d98859; }
.wax-popup .graduation.grade-f { background-color: #dfb046; }
.wax-popup span.rate {
display: block;
background-repeat: no-repeat;
font-weight: 600;
text-align: right;
float: right;
font-size: 13px;
padding-right: 15px;
background-position: right 5px;
}
span.rate.up {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB9SURBVBiVhc4hCwJhEATQt3KinF0wKpg0CBbB/x8EMdrMYrpkUXQtFw7x87ZsecxMZKaIWGHhzw3af8a1F2Zm4oSmLxEqRAlWEBE1dpiUYKDGHuO+jcsCSry71dMf6IUjHtiiDqwx76AnDpnZtPuH2ARGbf0MN1wy8/5d8QGbfxzs/XliBgAAAABJRU5ErkJggg==');
}
span.rate.down {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACTSURBVBiVfdA9akJhEIXhZ64xhmuTlKYQLGyCoJgibsDFC27BBVilCDb+MCnyYS6XLzkwMDMc3jlMYIQ5JjjikJknPQUWmHV2F+wy8xMiYohVYIunHuCGPc54RxtYYto/hSzVwABfeMVDJVbch8wUES02GFfIv8YS+hEfeK4Zm05/LZmqagotsMbLv0a8+Xn4n/oGYsgcDgmXTboAAAAASUVORK5CYII=');
}
span.rate.same {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAgSURBVBiVY2RgYPBlIAIwEaOIJIWM////p7KJDAPmGQDuPAOlniKSnwAAAABJRU5ErkJggg==');
background-position: right 7px;
}
.wax-popup table {
width: 100%;
margin-bottom: 18px;
padding: 0;
border-collapse: separate;
*border-collapse: collapse;
font-size: 13px;
}
.wax-popup table th,
.wax-popup table td {
padding: 5px 10px 4px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #ddd;
width: 100px;
text-align: right;
}
.wax-popup table th.historical,
.wax-popup table td.historical {
color: #ccc;
}
@media all and (orientation:portrait) {
.wax-popup table th,
.wax-popup table td {
text-align: left;
}
}
.wax-popup table th {
padding-top: 4px;
font-weight: 600;
vertical-align: middle;
}
.wax-popup table thead th {
border-top: none;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.wax-popup table tbody th {
border-bottom: 1px solid #ddd;
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
}
.wax-popup table tbody th,
.wax-popup table thead th.first {
text-align: left;
padding: 0 10px;
font-size: 11px;
width: auto;
}
.wax-popup table tr + tr td {
border-bottom: 1px solid #ddd;
}
.wax-popup .clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .wax-popup .clearfix { height: 1%; }
*:first-child + html .wax-popup .clearfix { min-height: 1%; }
</style>
<div class='header clearfix'>
<h2 class='type-school'>{{{schnam}}}</h2>
<span class='county'>{{{leanm}}}<span class='state'>, {{{stnam}}}</state></span>
</div>
<div class='graduation grade-{{{grade}}}'>Graduation Rate <span class="rate up">{{{pct_gradrate09}}}</span></div>
{{#e12}}
<table>
<thead>
<tr>
<th class='first'>Grade 12</th>
<th class='historical'>2007 - 2008</th>
<th class='historical'>2008 - 2009</th>
<th>2009 - 2010</th>
<th>2009 District avg</th>
</tr>
</thead>
<tbody>
<tr>
<th>Reading</th>
<td class='historical'>{{{all_read12_0708}}}</td>
<td class='historical'>{{{all_read12_0809}}}</td>
<td>{{{all_read12_0910}}}</td>
<td>{{{lea_read12_0910}}}</td>
</tr>
<tr>
<th>Math</th>
<td class='historical'>{{{all_math12_0708}}}</td>
<td class='historical'>{{{all_math12_0809}}}</td>
<td>{{{all_math12_0910}}}</td>
<td>{{{lea_math12_0910}}}</td>
</tr>
</tbody>
</table>
{{/e12}}
{{#e08}}
<table>
<thead>
<tr>
<th class='first'>Grade 8</th>
<th class='historical'>2007 - 2008</th>
<th class='historical'>2008 - 2009</th>
<th>2009 - 2010</th>
<th>2009 District avg</th>
</tr>
</thead>
<tbody>
<tr>
<th>Reading</th>
<td class='historical'>{{{all_read08_0708}}}</td>
<td class='historical'>{{{all_read08_0809}}}</td>
<td>{{{all_read08_0910}}}</td>
<td>{{{lea_read08_0910}}}</td>
</tr>
<tr>
<th>Math</th>
<td class='historical'>{{{all_math08_0708}}}</td>
<td class='historical'>{{{all_math08_0809}}}</td>
<td>{{{all_math08_0910}}}</td>
<td>{{{lea_math08_0910}}}</td>
</tr>
</tbody>
</table>
{{/e08}}
{{#e04}}
<table>
<thead>
<tr>
<th class='first'>Grade 4</th>
<th class='historical'>2007 - 2008</th>
<th class='historical'>2008 - 2009</th>
<th>2009 - 2010</th>
<th>2009 District avg</th>
</tr>
</thead>
<tbody>
<tr>
<th>Reading</th>
<td class='historical'>{{{all_read04_0708}}}</td>
<td class='historical'>{{{all_read04_0809}}}</td>
<td>{{{all_read04_0910}}}</td>
<td>{{{lea_read04_0910}}}</td>
</tr>
<tr>
<th>Math</th>
<td class='historical'>{{{all_math04_0708}}}</td>
<td class='historical'>{{{all_math04_0809}}}</td>
<td>{{{all_math04_0910}}}</td>
<td>{{{lea_math04_0910}}}</td>
</tr>
</tbody>
</table>
{{/e04}}
<small>District averages reflect on 2009 data</small>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment