mirror of
https://github.com/komodorio/helm-dashboard.git
synced 2026-03-26 06:18:04 +00:00
Restyle fixes (#14)
* Applying style fixes * Implement more notes * Improvements * Applying v2 design * flyout restyle * fix spec rev * Status icons * Restyle top line and footer * Shorter err msg
This commit is contained in:
Andrey Pokhilko
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Helm Dashboard</title>
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700"/>
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Poppins:wght@500&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700&family=Roboto:wght@500"/>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
@@ -25,8 +25,6 @@
|
||||
<a href="/"><img src="static/logo.png" alt="Logo"></a>
|
||||
<div>
|
||||
<h1><a href="/">Helm Dashboard</a></h1>
|
||||
<p><span class="mr-1">by</span><a href="https://komodor.io"><img src="static/komodor-logo.svg"
|
||||
alt="komodor.io"></a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,6 +45,12 @@
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<div>
|
||||
<a class="btn" href="https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash"><img
|
||||
src="https://komodor.com/wp-content/uploads/2021/05/favicon.png" alt="komodor.io" style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>
|
||||
|
||||
<a class="btn me-2 text-muted" href="https://github.com/komodorio/helm-dashboard" title="Project page on GitHub"><i class="bi-github"></i></a>
|
||||
</div>
|
||||
<div class="separator-vertical"><span></span></div>
|
||||
<i class="btn bi-power text-muted p-2 m-1 mx-2" title="Shut down the Helm Dashboard application"></i>
|
||||
</div>
|
||||
@@ -108,21 +112,21 @@
|
||||
<h1 class="name float-start">Name</h1>
|
||||
<div id="actionButtons" class="float-end">
|
||||
<span><button id="btnUpgrade"
|
||||
class="opacity-10 btn btn-sm btn-light bg-white rounded-0 me-0 rounded-start border-secondary">
|
||||
<img src="static/action.svg"> <span>Checking...</span>
|
||||
</button></span><span><button
|
||||
id="btnUpgradeCheck"
|
||||
class="btn btn-sm text-muted btn-light bg-white border-secondary rounded-0 rounded-end ms-0 me-2"
|
||||
title="Check for newer chart version from repo"><i class="bi-repeat"></i><span
|
||||
class="spinner-border spinner-border-sm" style="display: none" role="status"
|
||||
aria-hidden="true"></span></button></span>
|
||||
class="opacity-10 btn btn-sm btn-light bg-white me-2 border-secondary">
|
||||
<i class="icon bi-hourglass-split"></i> <span></span>
|
||||
</button></span>
|
||||
|
||||
<button id="btnRollback" class="btn btn-sm btn-light bg-white border border-secondary me-2"
|
||||
title="Rollback to this revision"><img src="static/action.svg"> <span>Rollback</span>
|
||||
title="Rollback to this revision"><i class="bi-arrow-repeat"></i> <span>Rollback</span>
|
||||
</button>
|
||||
<button id="btnUninstall" class="btn btn-sm btn-light bg-white border border-secondary"
|
||||
title="Uninstall the chart"><img src="static/action.svg"> Uninstall
|
||||
title="Uninstall the chart"><i class="bi-trash3"></i> Uninstall
|
||||
</button>
|
||||
<br/>
|
||||
<a class="link small" id="btnUpgradeCheck">Check for new version
|
||||
<span class="spinner-border spinner-border-sm" style="display: none" role="status"
|
||||
aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="fs-2"> </div>
|
||||
</div>
|
||||
@@ -133,14 +137,14 @@
|
||||
</div>
|
||||
|
||||
<div class="rev-tags mt-3">
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">cluster: <span
|
||||
class="rev-cluster fw-bold"></span></span>
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">namespace: <span
|
||||
class="rev-ns fw-bold"></span></span>
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">chart version: <span
|
||||
class="rev-chart fw-bold"></span></span>
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">app version: <span
|
||||
class="rev-app fw-bold"></span></span>
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">namespace: <span
|
||||
class="rev-ns fw-bold"></span></span>
|
||||
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">cluster: <span
|
||||
class="rev-cluster fw-bold"></span></span>
|
||||
</div>
|
||||
|
||||
<div id="revDescr" class="mt-3 mb-4"></div>
|
||||
@@ -157,7 +161,7 @@
|
||||
</button>
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="values"
|
||||
type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" tabindex="-1">
|
||||
Parameterized Values
|
||||
Values
|
||||
</button>
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="notes"
|
||||
type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" tabindex="-1">
|
||||
@@ -167,12 +171,13 @@
|
||||
</nav>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane p-3 container-fluid" id="nav-resources" role="tabpanel">
|
||||
<div class="row bg-secondary rounded px-3 py-2 mb-2 fw-bold small"
|
||||
<div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
|
||||
style="text-transform: uppercase">
|
||||
<div class="col-2">Kind</div>
|
||||
<div class="col-4">Name</div>
|
||||
<div class="col-5">Status</div>
|
||||
<div class="col-1">Describe</div>
|
||||
<div class="col-2">Resource Type</div>
|
||||
<div class="col-3">Name</div>
|
||||
<div class="col-1">Status</div>
|
||||
<div class="col-5">Status Message</div>
|
||||
<div class="col-1"></div>
|
||||
</div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
@@ -182,7 +187,7 @@
|
||||
<label class="form-check-label" for="diffModeNone">
|
||||
<input class="form-check-input" type="radio" name="diffMode" id="diffModeNone"
|
||||
data-mode="view">
|
||||
View Current
|
||||
View
|
||||
</label>
|
||||
<label class="form-check-label" for="diffModePrev">
|
||||
<input class="form-check-input" type="radio" name="diffMode" id="diffModePrev"
|
||||
@@ -223,58 +228,56 @@
|
||||
|
||||
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="describeModal"
|
||||
aria-labelledby="describeModalLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="describeModalLabel"></h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="describeModalBody">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="confirmModal" aria-labelledby="confirmModalLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="confirmModalLabel"></h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="confirmModalBody">
|
||||
</div>
|
||||
<div class="offcanvas-footer p-3">
|
||||
<button type="button" class="btn btn-primary float-end btn-confirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="upgradeModal" aria-labelledby="upgradeModalLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 id="upgradeModalLabel">
|
||||
Upgrade <b class='text-success name'></b> from version <b class='text-success ver-old'></b> to
|
||||
<select class='fw-bold text-success ver-new'></select>
|
||||
</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="upgradeModalBody">
|
||||
</div>
|
||||
<div class="offcanvas-footer p-3">
|
||||
<button type="button" class="btn btn-primary float-end btn-confirm">Confirm Upgrade</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="container-fluid small mt-5 mb-5" style="z-index: -50">
|
||||
<div class="row align-items-end justify-content-end">
|
||||
<div class="col-3"></div>
|
||||
<div class="col-4 text-center bg-white bg-opacity-50 p-2 px-3 rounded b-shadow">
|
||||
Brought to you by <img src="https://komodor.com/wp-content/uploads/2021/05/favicon.png"
|
||||
style="height: 1rem"> <a class="me-4"
|
||||
href="https://komodor.io">Komodor.io</a>
|
||||
<i class="bi-github"></i>
|
||||
<a href="https://github.com/komodorio/helm-dashboard">Project page on GitHub</a>
|
||||
<div class="offcanvas-header border-bottom p-4">
|
||||
<div>
|
||||
<h5 id="describeModalLabel"></h5>
|
||||
<p class="m-0 mt-4">ResourceType</p>
|
||||
</div>
|
||||
<div class="col-3"></div>
|
||||
</div>
|
||||
</footer>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
|
||||
<img src="static/topographic.svg" class="position-absolute bottom-0 left-0" style="z-index: -100; height: 100%;"/>
|
||||
</div>
|
||||
<div class="offcanvas-body p-2 ps-4" id="describeModalBody">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal" id="confirmModal" tabindex="-1" aria-labelledby="describeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="confirmModalLabel"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="confirmModalBody">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary btn-confirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal" id="upgradeModal" tabindex="-1" aria-labelledby="describeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="upgradeModalLabel">
|
||||
Upgrade <b class='text-success name'></b> from version <b class='text-success ver-old'></b> to
|
||||
<select class='fw-bold text-success ver-new'></select>
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="upgradeModalBody">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary btn-confirm">Confirm Upgrade</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
|
||||
|
||||
Reference in New Issue
Block a user