OpenWrt/luci-theme-alpha
1
0
Fork 0
mirror of https://github.com/derisamedia/luci-theme-alpha.git synced 2025-01-03 00:38:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix header

Browse Source
This commit is contained in:
deri sahertian 2024-01-01 20:14:25 +07:00
parent 5b9fe8ee5f
commit 18b983a9c8
9 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -1,5 +1,6 @@
[issues]: https://github.com/jerrykuku/luci-app-argon-config/issues/new [issues]: https://github.com/jerrykuku/luci-app-argon-config/issues/new
[issues-badge]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat-square [issues-badge]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat-square
[release]: https://github.com/derisamedia/luci-theme-alpha/releases
@ -12,6 +13,8 @@
[![issues][issues-badge]][issues] [![issues][issues-badge]][issues]
[![release]][release]
Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and material luCi theme refferences, Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and material luCi theme refferences,
@ -22,6 +25,14 @@ Luci theme for Official Openwrt and Alpha OS build ,based on bootstrap and mater
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss2.png) ![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss2.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/ss3.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview1.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview2.png)
![image](https://raw.githubusercontent.com/derisamedia/luci-theme-alpha/master/mobileview3.png)
</p> </p>
### FYI ### FYI

2
luasrc/gaya/gaya.css
View File

@ -394,6 +394,8 @@ label {
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
color: var(--header-color); color: var(--header-color);
background: #2222359a; background: #2222359a;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
header > .fill > .container { header > .fill > .container {

BIN
mobileview1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 223 KiB

BIN
mobileview2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

BIN
mobileview3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
ss1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 758 KiB

BIN
ss3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 482 KiB

32
template/footer.htm
View File

@ -20,10 +20,42 @@
<% local ver = require "luci.version" %> <% local ver = require "luci.version" %>
</div> </div>
<footer class="mobile"> <footer class="mobile">
<a href="https://github.com/derisamedia/luci-theme-alpha"><%= ver.luciname %> | <%= ver.luciversion %> | Alpha OS Theme v3.8</a> <a href="https://github.com/derisamedia/luci-theme-alpha"><%= ver.luciname %> | <%= ver.luciversion %> | Alpha OS Theme v3.8</a>
</footer> </footer>
</div> </div>
<div class="navbar active">
<div class="dropdown">
<a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/gaya/icon/navbar/status.png" /></a>
<a href="/cgi-bin/luci/admin/services/ttyd"><img src="<%=media%>/gaya/icon/navbar/terminal.png" /></a>
<a href="/cgi-bin/luci/admin/services/openclash"><img src="<%=media%>/gaya/icon/navbar/oc.png" /></a>
<a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/gaya/icon/navbar/nas.png" /></a>
<a href="/cgi-bin/luci/admin/modem/main"><img src="<%=media%>/gaya/icon/navbar/modem.png" /></a>
<a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/gaya/icon/navbar/interface.png" /></a>
</div>
<label class="toggler">
<img src="<%=media%>/gaya/icon/arrow.svg" alt="">
</label>
</div>
<script>
{
const nav = document.querySelector(".navbar");
let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
if (lastScrollY < window.scrollY) {
nav.classList.add("navbar--hidden");
} else {
nav.classList.remove("navbar--hidden");
}
lastScrollY = window.scrollY;
});
}
</script>
</div> </div>
<script type="text/javascript">L.require('menu-alpha')</script> <script type="text/javascript">L.require('menu-alpha')</script>

32
template/header.htm
View File

@ -59,37 +59,7 @@
</head> </head>
<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>"> <body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
<header> <header>
<div class="navbar active">
<div class="dropdown">
<a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/gaya/icon/navbar/status.png" /></a>
<a href="/cgi-bin/luci/admin/services/ttyd"><img src="<%=media%>/gaya/icon/navbar/terminal.png" /></a>
<a href="/cgi-bin/luci/admin/services/openclash"><img src="<%=media%>/gaya/icon/navbar/oc.png" /></a>
<a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/gaya/icon/navbar/nas.png" /></a>
<a href="/cgi-bin/luci/admin/modem/main"><img src="<%=media%>/gaya/icon/navbar/modem.png" /></a>
<a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/gaya/icon/navbar/interface.png" /></a>
</div>
<label class="toggler">
<img src="<%=media%>/gaya/icon/arrow.svg" alt="">
</label>
</div>
<script>
{
const nav = document.querySelector(".navbar");
let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
if (lastScrollY < window.scrollY) {
nav.classList.add("navbar--hidden");
} else {
nav.classList.remove("navbar--hidden");
}
lastScrollY = window.scrollY;
});
}
</script>
<div class="fill"> <div class="fill">
<div class="container"> <div class="container">