Skip to content

Instantly share code, notes, and snippets.

@tristen

tristen/ed-popup.html

Forked from ian29/ed-popup.html
Created January 20, 2012 21:04
Show Gist options
  • Save tristen/1649556 to your computer and use it in GitHub Desktop.
Save tristen/1649556 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ed-popup.html
<style>
body .wax-popup {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
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!important;
margin: 0 0 0 -400px!important;
z-index: 9999;
width: 800px!important;
position: absolute;
top: 80px!important;
left: 50%!important;
height: 220px;
height: auto!important;
min-height: 220px;
max-width: none!important;
max-height: none!important;
}
.wax-popup a.close {
background-color: #404040;
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABLSURBVBiVjZDBDQAgCAM7CoM4vKO4h4/zQ0xDjPog0KY0BQEB9Oyy2rxyABgmjMQAvRIDaAWHDpuzOnuGZoKZWC56On1l+r7u+qcF7WwabNSz508AAAAASUVORK5CYII=');
background-position: 8px 8px;
width: 26px;
height: 26px;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
border: 1px solid black;
}
.wax-tooltip.wax-popup:after {
content: 'No Data.';
font-size: 32px;
font-weight: bold;
color: #CCC;
position: absolute;
top: 140px;
left: 20px;
z-index: -1;
}
.wax-popup .header {
border-bottom: 1px solid #ccc;
margin: 35px 0 10px;
height: 40px;
overflow: hidden;
}
.wax-popup small {
position: absolute;
bottom: 8px;
}
.wax-popup h2 {
background-repeat: no-repeat;
font-size: 22px;
line-height: 28px;
font-weight: normal;
float: left;
margin: 0 0 5px;
padding: 0 0 0 30px;
}
.wax-popup h2.type-school {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAElSURBVDiNxZM9TsNAEIXfi5ClNFQ+Qi5hV7Nb4YbCNYeIoMfyAVLQUlNT0KSK1pXTQp8bQG0kS2Ro7EQKNrtGQnnSSqvZt9/M7A9UFb8NEXnNsuzS5+vHDAFqmuZdRN6stfc+bxCQ5CPJL1W98ppDWu7nSZLMfX6q6mCisixnVVWtACxPlh5E5LYoiv1gN0PANE3nURQ9kcxHunpu2/amrutPL9AYEwN4AZAMln7UFsC1c+5jFGiMWQBYA1h4YL12ADLn3K4PHG5ZRJIuaygMnXfb7T0CrbU5yQ2AeAKsV0xyY63NAYAislTVFcmgNzkmVd2TvDucoTFm+P0EyjlHIPCnTNEPoHOOfTZfRUO+/69wSjV/Bk7RxWkg9LbHfOc5w7MCvwGuVNGxnepHXwAAAABJRU5ErkJggg==');
background-position: 5px 2px;
}
.wax-popup h2.type-district {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACYSURBVDiN7ZOxDcIwEEXfRfQZyfYElMyBmAOxCiU0jhmJCT6Ng0RwbAmCRJFXWb7n0z/JZ5IACCF44Az0wN3MtjHGGwVqbpeFHXDJAkAv6Zrvp82qrjnn9mZ2BKwQRpIOKaUTgPe+6ZokQggqjQYwDMPL45bbzRU/5a3hNFGNkvv7hN9i4z9civ8feTMe1tV7sq5ek8UbPgAbC3ZrgzSFrwAAAABJRU5ErkJggg==');
background-position: 5px 5px;
}
.wax-popup h2.type-state {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGTSURBVDiNpZIxa9tQFIW/6zxpKAWXTl5K5pA1JGQUSKopXa2pZOnQQiBTyY/o3rFLR2stxn4yaCz0D3ROugQMpQ9Chqr2zRA5KLaQ1PSAQLrvvO+dp3tFVWnTcDg8BJhOp9/bvKaVBiyXy7Py9U2bV9oSBkEw8DzvAqAoit08z6+a/L22E33ffw/4gG+MefdfCZMk8Z1zF6o6ABCRq36/vzsej/88KqFzbrSGAajqwDk3atrTCFTVsy61qiQMww8i8hGQJmMHqaqei6oSRdGJiHym4xjV6K+qvs2y7Mt9U+I4fgWkwJN/hN0AI2vtBDa6HIbhca/X+wo87wj7tVqtXs/n82/rwtbYRFG0JyIz4EUL7Keqvsyy7Ee1uNXl0jDrkG62CasFljrqAKz1bF05CIKnnuf9BnZagMuiKJ7leX7dmNAYc7ABWwBJ+Swq9Z3S+0BbQBE5rHymxph9a21qrU2NMfvcjVad9y5QzVWOyiSn1tq0ujCZTBZAEsfxCPhEzX+sS3i5TlVzGADrtCJyubl2C6epnNp7NrzMAAAAAElFTkSuQmCC');
background-position: 5px 5px;
}
.wax-popup span.county {
display: block;
float: left;
text-align: right;
color: gray;
line-height: 39px;
width: auto;
margin-left: 10px;
font-size: 11px;
}
.wax-popup .graduation {
color: #fff;
font-weight: bold;
clear: both;
padding: 5px 10px;
margin-bottom: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
width: 220px;
position: absolute;
top: 10px;
left: 0;
}
.wax-popup .graduation.a { background-color: #96629f; }
.wax-popup .graduation.b { background-color: #c26091; }
.wax-popup .graduation.c { background-color: #d9776a; }
.wax-popup .graduation.d { background-color: #d98859; }
.wax-popup .graduation.f { background-color: #dfb046; }
.wax-popup .graduation.nd { background-color: #a4abaf }
.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 {
background: #fff;
width: 100%;
margin-bottom: 10px;
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;
border-top: none;
width: 110px;
text-align: right;
border-left: none;
border-right: none;
border-radius: none;
-moz-border-radius: none;
-webkit-border-radius: none;
}
.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;
}
body .wax-popup {
width: 80%;
margin-left: -40%;
}
}
.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%; }
.wax-tooltip.wax-popup {
-webkit-animation-name: 'fade-in';
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: .2s;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 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}}}'>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