shuguang/nezha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive and UI update

Browse Source
This commit is contained in:
jackiesung4ev 2021-01-22 01:21:38 +08:00
parent db8a42e820
commit 918938f6e4
2 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resource/static/theme-daynight/main.css
View File

File diff suppressed because one or more lines are too long

92
resource/template/theme-daynight/home.html
View File

@ -43,14 +43,25 @@
</header> </header>
<script>$(document).ready(function () { $(".hamburger").click(function () { $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active'); }); }); </script> <script>$(document).ready(function () { $(".hamburger").click(function () { $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active'); }); }); </script>
<section class="toggle-container"> <section class="toggle-container">
<div class="toggle-dark-mode"> <div class="dark-mode-toggle">
<h4><i class="fas fa-sun fa-lg" title="白昼模式"></i>　/　<i class="fas fa-moon fa-lg" title="暗黑模式"></i></h4> <label class="switcher">
<input type="checkbox" name="theme" id="switch"><label for="switch">Toggle</label> <input type="checkbox" name="theme" id="switch" />
</div> <div>
<div class="toggle-grid-mode"> <i class="fas fa-sun" title="白昼模式"></i>
<h4><i class="fas fa-th fa-lg" title="网格视图"></i>　/　<i class="fas fa-list-ul fa-lg" title="列表视图"></i></h4> <i class="fas fa-moon" title="暗黑模式"></i>
<input type="checkbox" name="grid" id="grid-list"><label for="grid-list">Toggle</label> </div>
</div> </label>
</div>
<div class="grid-mode-toggle">
<label class="switcher">
<input type="checkbox" name="grid" id="grid-list" />
<div>
<i class="fas fa-th" title="网格视图"></i>
<i class="fas fa-list-ul" title="列表视图"></i>
</div>
</label>
</div>
</section> </section>
<div id="app"> <div id="app">
<div class="server-info-container" v-for='server in servers' :id="server.ID"> <div class="server-info-container" v-for='server in servers' :id="server.ID">
@ -72,8 +83,8 @@
<li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li> <li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
<li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li> <li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
<li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li> <li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
<li>@#formatByteSize(server.State.NetInTransfer) #@(@#formatByteSize(server.State.NetInSpeed)#@/s)</li> <li>@#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
<li>@#formatByteSize(server.State.NetOutTransfer) #@(@#formatByteSize(server.State.NetOutSpeed)#@/s)</li> <li>@#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
<li> <li>
<div class="cpu-bar"> <div class="cpu-bar">
<div> <div>
@ -125,42 +136,36 @@
<!-- Dark mode toggle --> <!-- Dark mode toggle -->
<script> <script>
var checkbox = document.querySelector('input[name=theme]'); var checkbox = document.querySelector("input[name=theme]");
checkbox.addEventListener('change', function () { var themeStatue = document.getElementsByTagName("BODY")[0];
if (this.checked) { checkbox.addEventListener("change", function () {
trans() if (this.checked) {
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark') themeStatue.setAttribute("data-theme", "dark");
} else { } else {
trans() themeStatue.setAttribute("data-theme", "light");
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000)
} }
});
</script> </script>
<!-- Grid list mode toggle --> <!-- Grid list mode toggle -->
<script> <script>
var checkboxs = document.querySelector('input[name=grid]'); var checkboxs = document.querySelector("input[name=grid]");
checkboxs.addEventListener('change', function () { var themeStatue = document.getElementsByTagName("BODY")[0];
if (this.checked) { checkboxs.addEventListener("change", function () {
transs() if (this.checked) {
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'list') transs();
} else { themeStatue.setAttribute("data-gridlist", "list");
transs() } else {
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'grid') transs();
} themeStatue.setAttribute("data-gridlist", "grid");
})
let transs = () => {
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000)
} }
});
let transs = () => {
themeStatue.classList.add("transition-theme");
window.setTimeout(() => {
themeStatue.classList.remove("transition-theme");
}, 1000);
};
</script> </script>
<!-- Back to top button --> <!-- Back to top button -->
@ -243,6 +248,7 @@
DarkMode() { DarkMode() {
const hour = new Date(Date.now()).getHours() const hour = new Date(Date.now()).getHours()
if (hour > 17 || hour < 4) { if (hour > 17 || hour < 4) {
document.querySelector("input[name=theme]").checked = true;
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark'); document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
} }
}, },
@ -272,8 +278,9 @@
position: 'top', position: 'top',
icon: 'success', icon: 'success',
title: '实时通道建立', title: '实时通道建立',
text: '可以实时获取最新监控数据啦',
showConfirmButton: false, showConfirmButton: false,
timer: 1500 timer: 2000
}); });
} }
ws.onmessage = function (evt) { ws.onmessage = function (evt) {
@ -297,8 +304,9 @@
position: 'top', position: 'top',
icon: 'error', icon: 'error',
title: '实时通道断开', title: '实时通道断开',
text: '无法实时获取最新监控数据咯',
showConfirmButton: false, showConfirmButton: false,
timer: 1500 timer: 2000
}); });
} }