BitGoblin/Sentry
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases 9 Wiki Activity

Made the tabs look better
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Gregory Ballantine 2022-10-29 01:14:08 -04:00
parent c878447c45
commit ae155b2d7e
5 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/coffee/cpu.coffee
View File

@ -9,7 +9,6 @@ window.addEventListener('load', () ->
document.getElementById('cpuThreads').innerText = data.cores
document.getElementById('cpuClockBase').innerText = data.speed
document.getElementById('cpuClockBoost').innerText = data.speedMax
console.log(data)
).catch((error) ->
console.error(error)
)

1
assets/coffee/gpu.coffee
View File

@ -23,7 +23,6 @@ loadGpus = () ->
optionElem.setAttribute('value', i)
document.getElementById('gpuSelector').appendChild(optionElem)
i++
console.log(data)
).catch((error) ->
console.error(error)
)

4
assets/coffee/sentry.coffee
View File

@ -1,11 +1,15 @@
@openTab = (tab) ->
# show the component info that's selected
tabs = document.querySelectorAll('.tab-button')
displays = document.querySelectorAll('.component-display')
i = 0
while i < displays.length
if displays[i].getAttribute('data-component') == tab
displays[i].classList.add('active')
tabs[i].classList.add('active')
else
displays[i].classList.remove('active')
tabs[i].classList.remove('active')
i++
@formatBytes = (bytes, decimals = 2) ->

40
assets/sass/sentry.sass
View File

@ -1,4 +1,8 @@
$tab-bar-height: 50px
body
margin: 0
padding: $tab-bar-height 0 0
background: white
font-size: 18px
@ -33,6 +37,42 @@ button
.container.fluid
max-width: 100%
margin: 0
#wrapper
margin-top: 25px
#tab-bar
position: fixed
top: 0
left: 0
z-index: 10
width: 100%
height: $tab-bar-height
margin: 0
padding: 0
background: #eee
border-bottom: 1px solid #bbb
box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
.row
display: relative
.tab-button
float: left
height: 50px
margin: 0
background-color: #eee
border: none
border-right: 1px solid #999
border-radius: 0
color: #212121
font-size: 2rem
font-weight: bold
transition: all 230ms ease-in-out
&.active
background-color: white
.component-display
display: none

20
assets/twig/layout.twig
View File

@ -14,17 +14,21 @@
<script src="./js/gpu.js"></script>
</head>
<body>
<div class="container fluid">
<!-- tab buttons -->
<div class="row">
<div class="columns twelve">
<button class="tab-button" onclick="openTab('cpu')">CPU</button>
<button class="tab-button" onclick="openTab('memory')">Memory</button>
<button class="tab-button" onclick="openTab('storage')">Storage</button>
<button class="tab-button" onclick="openTab('gpu')">GPU</button>
<!-- tab buttons -->
<div id="tab-bar">
<div class="container fluid">
<div class="row">
<div class="columns twelve">
<button class="tab-button active" onclick="openTab('cpu')">CPU</button>
<button class="tab-button" onclick="openTab('memory')">Memory</button>
<button class="tab-button" onclick="openTab('storage')">Storage</button>
<button class="tab-button" onclick="openTab('gpu')">GPU</button>
</div>
</div>
</div>
</div>
<div id="wrapper" class="container">
<div class="component-display active" data-component="cpu">
{% include 'cpu.twig' %}
</div>