| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| font-family: Verdana, sans-serif; |
| margin: 0px; |
| padding: 0px; |
| } |
| #bubbleContainer { |
| display: inline-block; |
| white-space: nowrap; |
| } |
| .status { |
| display: block; |
| float: left; |
| margin: 1px; |
| padding: 1px 2px; |
| -moz-border-radius: 5px; |
| -webkit-border-radius: 5px; |
| border-radius: 5px; |
| border: 1px solid #AAA; |
| background-color: white; |
| font-size: 11px; |
| cursor: pointer; |
| } |
| .none { |
| cursor: auto; |
| } |
| .pass { |
| background-color: #8FDF5F; |
| border: 1px solid #4F8530; |
| } |
| .fail { |
| background-color: #E98080; |
| border: 1px solid #A77272; |
| } |
| .pending { |
| background-color: #FFFC6C; |
| border: 1px solid #C5C56D; |
| } |
| .error { |
| background-color: #E0B0FF; |
| border: 1px solid #ACA0B3; |
| } |
| .queue_position { |
| font-size: 9px; |
| } |
| </style> |
| <script> |
| function statusDetail(patch_id) { |
| top.location = "/patch/" + patch_id |
| } |
| window.addEventListener("message", function(e) { |
| if (e.data == 'containerMetrics') { |
| e.source.postMessage({'width': bubbleContainer.offsetWidth, 'height': bubbleContainer.offsetHeight}, |
| e.origin); |
| } else |
| console.log("Unknown postMessage: " + e.data); |
| }, false); |
| </script> |
| </head> |
| <body> |
| <div id="bubbleContainer"> |
| {% for bubble in bubbles %} |
| <div class="status {{ bubble.state }}"{% if bubble.status %} |
| onclick="statusDetail({{ bubble.attachment_id }})" |
| title="{{ bubble.status.date|timesince }} ago"{% endif %}> |
| {{ bubble.name }} |
| {% if bubble.queue_position %} |
| <span class="queue_position">#{{ bubble.queue_position }}</span> |
| {% endif %} |
| </div> |
| {% endfor %} |
| </div> |
| </body> |
| </html> |
