Skip to content

Instantly share code, notes, and snippets.

@JohnnyQQQQ

JohnnyQQQQ/alternative.html

Created August 17, 2016 20:26
Show Gist options
  • Save JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10 to your computer and use it in GitHub Desktop.
Save JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10 to your computer and use it in GitHub Desktop.
Download ZIP
Alternative design for the Jenkins CI Build Monitor Plugin
Raw
alternative.html
<!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>
@JohnnyQQQQ
Copy link
Author

https://cdn.rawgit.com/JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10/raw/5e6e50504028d07eff92d4355dc2bd7eb5fc701d/alternative.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment