1<!DOCTYPE html> 2<html> 3<head> 4<style> 5body { 6 font-family: Verdana, sans-serif; 7 margin: 0px; 8 padding: 0px; 9} 10#bubbleContainer { 11 display: inline-block; 12 white-space: nowrap; 13} 14.status { 15 display: block; 16 float: left; 17 margin: 1px; 18 padding: 1px 2px; 19 -moz-border-radius: 5px; 20 -webkit-border-radius: 5px; 21 border-radius: 5px; 22 border: 1px solid #AAA; 23 background-color: white; 24 font-size: 11px; 25 cursor: pointer; 26} 27.none { 28 cursor: auto; 29} 30.pass { 31 background-color: #8FDF5F; 32 border: 1px solid #4F8530; 33} 34.fail { 35 background-color: #E98080; 36 border: 1px solid #A77272; 37} 38.pending { 39 background-color: #FFFC6C; 40 border: 1px solid #C5C56D; 41} 42.error { 43 background-color: #E0B0FF; 44 border: 1px solid #ACA0B3; 45} 46.queue_position { 47 font-size: 9px; 48} 49</style> 50<script> 51function statusDetail(patch_id) { 52 top.location = "/patch/" + patch_id 53} 54window.addEventListener("message", function(e) { 55 if (e.data == 'containerMetrics') { 56 e.source.postMessage({'width': bubbleContainer.offsetWidth, 'height': bubbleContainer.offsetHeight}, 57 e.origin); 58 } else 59 console.log("Unknown postMessage: " + e.data); 60}, false); 61</script> 62</head> 63<body> 64<div id="bubbleContainer"> 65 {% for bubble in bubbles %} 66 <div class="status {{ bubble.state }}"{% if bubble.status %} 67 onclick="statusDetail({{ bubble.attachment_id }})" 68 title="{{ bubble.status.date|timesince }} ago"{% endif %}> 69 {{ bubble.name }} 70 {% if bubble.queue_position %} 71 <span class="queue_position">#{{ bubble.queue_position }}</span> 72 {% endif %} 73 </div> 74 {% endfor %} 75</div> 76</body> 77</html> 78