CAT_TOM/pyasic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved formatting of index.html

Browse Source
This commit is contained in:
UpstreamData
2022-02-24 09:13:07 -07:00
parent 610ee57963
commit cda13edf85
2 changed files with 39 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
tools/web_monitor/public/index.html
View File

@@ -22,45 +22,48 @@
</symbol>
</svg>
<div class="row">
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<div class="row px-2">
<div class="col-md-2 flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
<!-- Header -->
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<span class="fs-5 fw-semibold">Home</span>
</a>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item mb-1">
<a href="#" class="nav-link link-dark active">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#dashboard"></use></svg>
Dashboard
<!-- Header -->
<a href="/" class="d-flex align-items-center pb-3 mb-3 text-white text-decoration-none border-bottom">
<span class="fs-5 fw-semibold">Home</span>
</a>
</li>
<li class="nav-item mb-1">
<a href="" class="nav-link link-dark" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#miners"></use></svg>
Miners
</a>
<div class="collapse mt-1" id="miners-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">192.168.1.1</a></li>
<li><a href="#" class="link-dark rounded">192.168.1.2</a></li>
<li><a href="#" class="link-dark rounded">192.168.1.3</a></li>
</ul>
</div>
</li>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item mb-1">
<a href="#" class="nav-link text-white active">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#dashboard"></use></svg>
Dashboard
</a>
</li>
<li class="border-top my-3"></li>
<li class="nav-item mb-1">
<a href="" class="nav-link text-white" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#miners"></use></svg>
Miners
</a>
<div class="collapse mt-1" id="miners-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="text-white rounded">192.168.1.1</a></li>
<li><a href="#" class="text-white rounded">192.168.1.2</a></li>
<li><a href="#" class="text-white rounded">192.168.1.3</a></li>
</ul>
</div>
</li>
<li class="nav-item mb-1">
<a href="#" class="nav-link link-dark">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg>
Settings
</a>
</li>
</ul>
<li class="border-top my-3"></li>
<li class="nav-item mb-1">
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg>
Settings
</a>
</li>
</ul>
</div>
<div class="col">
<p>hi</p>
</div>
</div>

44
tools/web_monitor/static/index.css
View File

@@ -17,16 +17,6 @@ main {
overflow-y: hidden;
}
.b-example-divider {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bi {
vertical-align: -.125em;
pointer-events: none;
@@ -39,36 +29,6 @@ main {
border-radius: 0;
}
.btn-toggle {
display: inline-flex;
align-items: center;
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
background-color: transparent;
border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #d2f4ea;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
display: inline-flex;
padding: .1875rem .5rem;
@@ -76,9 +36,10 @@ main {
margin-left: 1.25rem;
text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #d2f4ea;
background-color: #0d6efd;
}
.scrollarea {
@@ -86,4 +47,3 @@ main {
}
.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }