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 d330e2e978
commit c6305c57cf
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> </symbol>
</svg> </svg>
<div class="row"> <div class="row px-2">
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;"> <div class="col-md-2 flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
<!-- Header --> <!-- Header -->
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> <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> <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
</a> </a>
</li>
<li class="nav-item mb-1"> <ul class="nav nav-pills flex-column mb-auto">
<a href="" class="nav-link link-dark" data-bs-toggle="collapse" data-bs-target="#miners-collapse" aria-expanded="false"> <li class="nav-item mb-1">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#miners"></use></svg> <a href="#" class="nav-link text-white active">
Miners <svg class="bi me-2" width="16" height="16"><use xlink:href="#dashboard"></use></svg>
</a> Dashboard
<div class="collapse mt-1" id="miners-collapse" style=""> </a>
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> </li>
<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>
<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"> <li class="border-top my-3"></li>
<a href="#" class="nav-link link-dark">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg> <li class="nav-item mb-1">
Settings <a href="#" class="nav-link text-white">
</a> <svg class="bi me-2" width="16" height="16"><use xlink:href="#settings"></use></svg>
</li> Settings
</ul> </a>
</li>
</ul>
</div>
<div class="col">
<p>hi</p>
</div> </div>
</div> </div>

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

@@ -17,16 +17,6 @@ main {
overflow-y: hidden; 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 { .bi {
vertical-align: -.125em; vertical-align: -.125em;
pointer-events: none; pointer-events: none;
@@ -39,36 +29,6 @@ main {
border-radius: 0; 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 { .btn-toggle-nav a {
display: inline-flex; display: inline-flex;
padding: .1875rem .5rem; padding: .1875rem .5rem;
@@ -76,9 +36,10 @@ main {
margin-left: 1.25rem; margin-left: 1.25rem;
text-decoration: none; text-decoration: none;
} }
.btn-toggle-nav a:hover, .btn-toggle-nav a:hover,
.btn-toggle-nav a:focus { .btn-toggle-nav a:focus {
background-color: #d2f4ea; background-color: #0d6efd;
} }
.scrollarea { .scrollarea {
@@ -86,4 +47,3 @@ main {
} }
.fw-semibold { font-weight: 600; } .fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }