From 0d392b0c958b9fa8453c5add62ae6205464c9194 Mon Sep 17 00:00:00 2001
From: Kubat <mael.martin31@gmail.com>
Date: Tue, 23 Feb 2021 09:36:40 +0100
Subject: [PATCH] Styled scrollbar with css and fix drag area
---
instance/log.ejs | 16 +++++++++++-----
instance/log.js | 1 +
style/css/instance.css | 2 +-
3 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/instance/log.ejs b/instance/log.ejs
index 1c920d4..1193e80 100644
--- a/instance/log.ejs
+++ b/instance/log.ejs
@@ -13,16 +13,22 @@
<link rel="stylesheet" href="../style/fontawesome-free-5.15.1-web/css/all.min.css" />
<script src="./log.js"></script>
<script></script>
+ <style>
+ ::-webkit-scrollbar { width: 13px; }
+ ::-webkit-scrollbar-track { background: #343a40; } /* Background */
+ ::-webkit-scrollbar-thumb { background: #4e5d6c; } /* Scrollbar */
+ ::-webkit-scrollbar-thumb:hover { background: #df691a; } /* Scrollbar on hover */
+ </style>
</head>
- <body style='overflow-y: scroll; height: 100%;'>
+ <body style='overflow-y: scroll; height: 100%; overflow-x: hidden;'>
<div style='border-color: #abb6c2; border-style: solid; border-top: none; height: 100%;'>
<table class='table table-sm' style='margin: 0px;'>
<thead class='thead-light'
style='position: sticky; position: -webkit-sticky; top: 0; z-index: 999; -webkit-app-region: drag'>
- <tr>
- <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999;'>Timestamp</th>
- <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999;'>Label</th>
- <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999;'>Message</th>
+ <tr style='-webkit-app-region: drag'>
+ <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999; -webkit-app-region: drag'>Timestamp</th>
+ <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999; -webkit-app-region: drag'>Label</th>
+ <th style='border: 0px; position: sticky; position: -webkit-sticky; top: 0; z-index: 999; -webkit-app-region: drag'>Message</th>
</tr>
</thead>
<tbody id='body'>
diff --git a/instance/log.js b/instance/log.js
index 3eb02c9..1663bba 100644
--- a/instance/log.js
+++ b/instance/log.js
@@ -32,6 +32,7 @@ file.on('line', line => {
const limit = 200;
var trs = $('tr');
if (trs.length > limit) trs.slice(2, trs.length - limit).remove();
+ window.scrollTo(0, document.body.scrollHeight);
});
window.onload = () => {};
diff --git a/style/css/instance.css b/style/css/instance.css
index 5dd6e05..92bf044 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -11,7 +11,7 @@
}
::-webkit-scrollbar-track {
- background: content-box;
+ background: #343a40;
}
::-webkit-scrollbar-thumb {
--
GitLab