Skip to content

Commit

Permalink
Fixes #2461: Build Log dashboard should use same layout/CSS as rest o…
Browse files Browse the repository at this point in the history 
…f Dashboard (#2480)

* updated build log dashboard to have same layout/css as rest of dashboard

	* added header and sidenav
	* replaced Material UI logo in sidenav to Telescope's logo
	* removed spare double-quotes in svg link and scrollbar in sidenav
	* updated link in sidenav logo to redirect to ./
	* added link to Telescope override css files
	* removed unused elements in top nav
	* updated links and titles in sidenav

* adjusted padding on terminal and fixed small bugs on sidenav

Co-authored-by: Luke Nguyen <[email protected]>
  • Loading branch information
@mqnguyen5
mqnguyen5 and mqnguyen5 authored Nov 20, 2021
1 parent ec5ddd2 commit 235baa3
Showing 1 changed file with 130 additions and 7 deletions.
137 changes: 130 additions & 7 deletions src/api/status/public/pages/build.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<base href="/v1/status/" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png" />
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/xterm.css" />
<title>Build</title>
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
<title>Telescope Build log</title>
<!-- Fonts and icons -->
<link
rel="stylesheet"
Expand All @@ -23,18 +23,141 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
<!-- CSS Files -->
<link id="pagestyle" href="assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
<!-- Telescope CSS Override -->
<link rel="stylesheet" type="text/css" href="css/telescope-dashboard.css" />
</head>

<body>
<h1>Build log</h1>
<div id="terminal"></div>

<body class="g-sidenav-show bg-gray-200">
<aside
class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 bg-gradient-dark"
id="sidenav-main"
>
<div class="sidenav-header">
<i
class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
aria-hidden="true"
id="iconSidenav"
></i>
<a class="navbar-brand m-0" href="./" target="_blank">
<img src="./logo.svg" class="navbar-brand-img h-100" alt="main_logo" />
<span class="ms-1 font-weight-bold text-white">Telescope Build Log</span>
</a>
</div>
<hr class="horizontal light mt-0 mb-2" />
<div class="collapse navbar-collapse w-auto max-height-vh-100" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="./">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">dashboard</i>
</div>
<span class="nav-link-text ms-1">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white active bg-gradient-primary" href="./pages/build.html">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">feed</i>
</div>
<span class="nav-link-text ms-1">Build Log</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./pages/telescope-staging.html">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">receipt_long</i>
</div>
<span class="nav-link-text ms-1">Telescope Staging</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./pages/telescope-production.html">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">view_in_ar</i>
</div>
<span class="nav-link-text ms-1">Telescope Production</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="https://github.com/Seneca-CDOT/telescope">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">format_textdirection_r_to_l</i>
</div>
<span class="nav-link-text ms-1">Telescope GitHub repo</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="./pages/telescope-gitpod.html">
<div
class="text-white text-center me-2 d-flex align-items-center justify-content-center"
>
<i class="material-icons opacity-10">notifications</i>
</div>
<span class="nav-link-text ms-1">Telescope on GitPod</span>
</a>
</li>
</ul>
</div>
</aside>
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg">
<!-- Navbar -->
<nav
class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl"
id="navbarBlur"
navbar-scroll="true"
>
<div class="container-fluid py-1 px-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
<li class="breadcrumb-item text-sm">
<a class="opacity-5 text-dark" href="javascript:;">Pages</a>
</li>
<li class="breadcrumb-item text-sm text-dark active" aria-current="page">
Build Log
</li>
</ol>
<h6 class="font-weight-bolder mb-0">Build Log</h6>
</nav>
<div
class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4 justify-content-end"
id="navbar"
>
<ul class="navbar-nav">
<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid py-2">
<div id="terminal"></div>
</div>
</main>
<!-- Core JS Files -->
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
<script src="assets/js/plugins/smooth-scrollbar.min.js"></script>
<script src="assets/js/plugins/chartjs.min.js"></script>
<script src="assets/js/demo-sidenav.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="assets/js/material-dashboard.min.js?v=3.0.0"></script>
<!-- Telescope JS Files -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.min.js"></script>
Expand Down

0 comments on commit 235baa3

Please sign in to comment.