ClickandJoin
/
ManagementSystem
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added button for clear and add line

alpha
alex 2023-03-01 22:44:48 +01:00
parent a1a617d0ba
commit 68771c2eca
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/index.html vendored
View File

@ -20,6 +20,11 @@
<button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button> <button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button>
</div> </div>
<div class="actions-container">
<button id="btn-clear-console">Clear</button>
<button id="btn-add-line">Line</button>
</div>
<div class="checkbox-container"> <div class="checkbox-container">
<div class="checkbox-container-inside"> <div class="checkbox-container-inside">
<input type="checkbox" id="checkbox-alpha" name="alpha" value="alpha" checked> <input type="checkbox" id="checkbox-alpha" name="alpha" value="alpha" checked>

12
dist/script.js vendored
View File

@ -152,10 +152,6 @@ function formatMessageType(messageType) {
return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed() return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed()
} }
function handleScrollState() {
console.log("here")
}
let scrollState = document.getElementById('scroll-state') let scrollState = document.getElementById('scroll-state')
document.getElementById('btn-toggle-scroll').addEventListener('click', () => { document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
@ -172,6 +168,14 @@ document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
} }
}) })
document.getElementById('btn-clear-console').addEventListener('click', () => {
messages.innerHTML = ""
})
document.getElementById('btn-add-line').addEventListener('click', () => {
addCustomMessage("<span style='color: #7f8c8d'>–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––</span>")
})
// websocket // websocket
let ws = null let ws = null

36
dist/style.css vendored
View File

@ -34,7 +34,7 @@ ul {
.scroll-container { .scroll-container {
position: absolute; position: absolute;
top: 10px; top: 0;
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
} }
@ -46,19 +46,19 @@ button {
background-color: #34495e; background-color: #34495e;
border: none; border: none;
color: white; color: white;
padding: 15px 32px; padding: 8px 18px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
border-radius: 14px; border-radius: 6px;
} }
.checkbox-container{ .checkbox-container{
position: absolute; position: absolute;
top: 10px; top: 0;
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
color: #fff; color: #fff;
@ -66,7 +66,7 @@ button {
.checkbox-container .checkbox-container-inside { .checkbox-container .checkbox-container-inside {
position: absolute; position: absolute;
top: 90px; top: 110px;
right: 0; right: 0;
} }
@ -83,7 +83,7 @@ input[type="checkbox" i] {
.viewers-container { .viewers-container {
position: absolute; position: absolute;
top: 10px; top: 0;
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
color: #fff; color: #fff;
@ -91,13 +91,13 @@ input[type="checkbox" i] {
.viewers-container span { .viewers-container span {
position: absolute; position: absolute;
top: 65px; top: 85px;
right: 0; right: 0;
} }
.connection-status-container { .connection-status-container {
position: absolute; position: absolute;
top: 10px; top: 0;
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
color: #fff; color: #fff;
@ -105,11 +105,27 @@ input[type="checkbox" i] {
#connection-status { #connection-status {
position: absolute; position: absolute;
top: 16px; top: 10px;
right: 180px; right: 150px;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: gray; background-color: gray;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
}
.actions-container {
position: absolute;
top: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
}
#btn-clear-console {
top: 40px;
right: 70px;
}
#btn-add-line {
top: 40px;
} }