statusbubble.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  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. text-decoration: none;
  27. color: black;
  28. }
  29. .status:hover {
  30. border-color: #666;
  31. }
  32. .none {
  33. cursor: auto;
  34. }
  35. .none:hover {
  36. border-color: #AAA;
  37. }
  38. .pass {
  39. background-color: #8FDF5F;
  40. border: 1px solid #4F8530;
  41. }
  42. .fail {
  43. background-color: #E98080;
  44. border: 1px solid #A77272;
  45. }
  46. .pending {
  47. background-color: #FFFC6C;
  48. border: 1px solid #C5C56D;
  49. }
  50. .error {
  51. background-color: #E0B0FF;
  52. border: 1px solid #ACA0B3;
  53. }
  54. .queue_position {
  55. font-size: 9px;
  56. }
  57. form {
  58. display: inline-block;
  59. }
  60. </style>
  61. <script>
  62. window.addEventListener("message", function(e) {
  63. if (e.data == 'containerMetrics') {
  64. e.source.postMessage({'width': bubbleContainer.offsetWidth, 'height': bubbleContainer.offsetHeight},
  65. e.origin);
  66. } else
  67. console.log("Unknown postMessage: " + e.data);
  68. }, false);
  69. </script>
  70. </head>
  71. <body>
  72. <div id="bubbleContainer">
  73. {% for bubble in bubbles %}
  74. <a class="status {{ bubble.state }}" target="_top"
  75. {% if bubble.status %}
  76. href="/patch/{{ bubble.attachment_id }}"
  77. title="{{ bubble.status.date|timesince }} ago"
  78. {% endif %}
  79. >
  80. {{ bubble.name }}
  81. {% if bubble.queue_position %}
  82. <span class="queue_position">#{{ bubble.queue_position }}</span>
  83. {% endif %}
  84. </a>
  85. {% endfor %}
  86. {% if show_submit_to_ews %}
  87. <form name="submit_to_ews" method="POST" action="/submit-to-ews">
  88. <input type="hidden" name="attachment_id" value="{{ attachment_id }}">
  89. <input type="hidden" name="next_action" value="return_to_bubbles">
  90. <input class="status" type="submit" value="Submit for EWS analysis">
  91. </form>
  92. {% endif %}
  93. </div>
  94. </body>
  95. </html>