Created
August 17, 2016 20:26
-
-
Save JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10 to your computer and use it in GitHub Desktop.
Alternative design for the Jenkins CI Build Monitor Plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Buildmonitor Material</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> | |
| <style> | |
| body { | |
| background: #dedede; | |
| } | |
| .mdl-card { | |
| float: left; | |
| margin: 10px; | |
| } | |
| .mdl-chip-outline { | |
| border: 1px solid #dedede; | |
| background: #FFF; | |
| } | |
| .background-red{ | |
| background: red !important; | |
| } | |
| .state { | |
| font-weight: 700; | |
| } | |
| .success { | |
| background-color: #009688; | |
| } | |
| .failure { | |
| background-color: red; | |
| } | |
| .unstable { | |
| background-color: orange; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mdl-card mdl-shadow--2dp"> | |
| <div class="mdl-card__title"> | |
| <h2 class="mdl-card__title-text">Project name 1</h2> | |
| </div> | |
| <div class="mdl-card__supporting-text mdl-card--border"> | |
| Fixed after jeanphilippe.quemener committed their changes :-) | |
| Started by GitLab push by Jean-Philippe Quéméner | |
| </div> | |
| <div class="mdl-card__actions"> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">label</span> | |
| <span class="mdl-chip__text">#304</span> | |
| </span> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">update</span> | |
| <span class="mdl-chip__text">27 Minutes ago</span> | |
| </span> | |
| </div> | |
| <div class="mdl-card__actions mdl-card--border success"> | |
| <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white material-icons">done_all</span> | |
| <span class="mdl-chip__text state mdl-color-text--white">Last build passed after 5 minutes</span> | |
| </div> | |
| </div> | |
| <div class="mdl-card mdl-shadow--2dp"> | |
| <div class="mdl-card__title"> | |
| <h2 class="mdl-card__title-text">Project name 1</h2> | |
| </div> | |
| <div class="mdl-card__supporting-text"> | |
| Fixed after jeanphilippe.quemener committed their changes :-) | |
| Started by GitLab push by Jean-Philippe Quéméner | |
| </div> | |
| <div class="mdl-card__actions"> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">label</span> | |
| <span class="mdl-chip__text">#304</span> | |
| </span> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">update</span> | |
| <span class="mdl-chip__text">27 Minutes ago</span> | |
| </span> | |
| </div> | |
| <div class="mdl-card__actions mdl-card--border"> | |
| <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div> | |
| </div> | |
| </div> | |
| <div class="mdl-card mdl-shadow--2dp"> | |
| <div class="mdl-card__title"> | |
| <h2 class="mdl-card__title-text">Project name 2</h2> | |
| </div> | |
| <div class="mdl-card__supporting-text"> | |
| 19 builds have failed | |
| </div> | |
| <div class="mdl-card__actions"> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">label</span> | |
| <span class="mdl-chip__text">#23</span> | |
| </span> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">update</span> | |
| <span class="mdl-chip__text">1 Month ago</span> | |
| </span> | |
| </div> | |
| <div class="mdl-card__actions mdl-card--border failure"> | |
| <span class="mdl-chip__contact mdl-color-text--white material-icons background-red">bug_report</span> | |
| <span class="mdl-chip__text mdl-color-text--white state">Last build failed after 5 minutes</span> | |
| </div> | |
| </div> | |
| <div class="mdl-card mdl-shadow--2dp"> | |
| <div class="mdl-card__title"> | |
| <h2 class="mdl-card__title-text">Project name 2</h2> | |
| </div> | |
| <div class="mdl-card__supporting-text"> | |
| 19 builds have failed | |
| </div> | |
| <div class="mdl-card__actions"> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">label</span> | |
| <span class="mdl-chip__text">#23</span> | |
| </span> | |
| <span class="mdl-chip mdl-chip-outline mdl-chip--contact"> | |
| <span class="mdl-chip__contact material-icons">update</span> | |
| <span class="mdl-chip__text">1 Month ago</span> | |
| </span> | |
| </div> | |
| <div class="mdl-card__actions mdl-card--border unstable"> | |
| <span class="mdl-chip__contact mdl-color-text--white material-icons">trending_down</span> | |
| <span class="mdl-chip__text mdl-color-text--white state">Last build unstable after 5 minutes</span> | |
| </div> | |
| </div> | |
| <script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://cdn.rawgit.com/JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10/raw/5e6e50504028d07eff92d4355dc2bd7eb5fc701d/alternative.html