From da44c86a63ec7dec1f91782ed57530dbb3b35e73 Mon Sep 17 00:00:00 2001 From: Cameron Eagans Date: Tue, 3 Mar 2020 01:03:55 -0700 Subject: [PATCH] Rebuild the status dashboard with Semantic UI --- src/resources/css/app.css | 103 ++++++------------ src/resources/index.html | 217 +++++++++++++++++++++----------------- 2 files changed, 151 insertions(+), 169 deletions(-) diff --git a/src/resources/css/app.css b/src/resources/css/app.css index 2240e15..af81990 100644 --- a/src/resources/css/app.css +++ b/src/resources/css/app.css @@ -1,84 +1,41 @@ -body, html { height: 100%; } -.navbar { margin-bottom: 0; border-radius: 0; } -.navbar-brand { margin: 0 -15px; padding: 7px 15px } -.navbar-brand>img { display: inline; } -a.navbar-btn { color: #9d9d9d; } -a.navbar-btn.active { color: #fff; } -a.navbar-btn:hover { color: #fff; text-decoration: none; } -a.navbar-btn:focus { color: #fff; } -.bell { margin: 8px 15px; color: #9d9d9d; } -.bell:hover { text-decoration: none; color: #9d9d9d; cursor: pointer; } -.bell.active { color: #333; } -dt,dd { line-height: 2; } +#app { + height: 100%; +} + +#app aside { + background-color: #eeeeee; + height: 100%; +} + +@media only screen and (min-width: 768px) { + #app .main.grid { + height: 100%; + } + + #app .jobs.list { + -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); + -moz-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); + box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); + } +} + +#popup-connecting { + position: fixed; + bottom: 10px; + right: 10px; + padding: 20px; +} + canvas { width: 100% !important; max-width: 800px; height: auto !important; } -.progress { - height: 10px; - margin-top: 5px; - margin-bottom: 0; -} -table#joblist tr:first-child td { border-top: 0; } -#popup-connecting { - position: fixed; - background: white; - border: 1px solid #ddd; - bottom: 10px; - right: 10px; - padding: 20px; -} -/* status icons */ -span.status { - display: inline-block; - width: 1em; - text-align: center; - font-family: sans-serif; -} -span.success { color: forestgreen; } -span.failed { color: firebrick; } -span.aborted { color: indigo; } -span.spin { - color: steelblue; - animation: 2s linear infinite spin; -} -@keyframes spin { - to { transform: rotate(360deg); } -} -/* chart overlay */ + li.chart-overlay { position: absolute; display: inline-block; background: white; border: 1px solid lightgray; padding: 3px; -} -/* sort indicators */ -a.sort { - position: relative; - margin-left: 7px; -} -a.sort:before, a.sort:after { - border: 4px solid transparent; - content: ""; - position: absolute; - display: block; - height: 0; - width: 0; - right: 0; - top: 50%; -} -a.sort:before { - border-bottom-color: #ccc; - margin-top: -9px; -} -a.sort:after { - border-top-color: #ccc; - margin-top: 1px; -} -a.sort.dsc:after { border-top-color: #000; } -a.sort.asc:before { border-bottom-color: #000; } -a.sort:hover { text-decoration: none; cursor:pointer; } -a.sort:not(.asc):hover:before { border-bottom-color: #777; } -a.sort:not(.dsc):hover:after { border-top-color: #777; } +} diff --git a/src/resources/index.html b/src/resources/index.html index 1e8dc54..210c59b 100644 --- a/src/resources/index.html +++ b/src/resources/index.html @@ -20,99 +20,124 @@ -
-