fish
/
luci-theme-alpha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

luci-app-alpha-config: Add CSS

This commit is contained in:
Hilman Maulana 2024-02-23 19:11:54 +07:00 committed by GitHub
parent 5c69f7deb5
commit a196aa4e25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
template/footer.htm
View File

@ -34,43 +34,63 @@ local function getLink(nav)
local link = config[nav]
return (link ~= "none") and link or nil
end
local num_links = 0
for i = 1, 6 do
local nav_key = 'nav_0' .. i
local link = getLink(nav_key)
if link then
num_links = num_links + 1
end
end
local link_width = string.format("calc(100%% / %d)", num_links)
%>
</div>
<footer class="mobile">
<a href="https://github.com/derisamedia/luci-theme-alpha"><%=ver.luciname%> | <%=ver.luciversion%> | Alpha OS Theme v3.9</a>
</footer>
</div>
<div class="navbar active">
<div class="dropdown">
<% for i = 1, 6 do
local nav_key = 'nav_0' .. i
local link = getLink(nav_key)
if link then %>
<a href="<%= link %>">
<img src="<%=media%><%=icon[link]%>"/>
</a>
<% end
end %>
</div>
<label class="toggler">
<img src="<%=media%>/gaya/icon/arrow.svg">
</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;
});
<style>
@media screen and (max-width: 720px) {
.navbar a {
width: <%= link_width %>;
}
}
</script>
</style>
</div>
<footer class="mobile">
<a href="https://github.com/derisamedia/luci-theme-alpha"><%=ver.luciname%> | <%=ver.luciversion%> | Alpha OS Theme v3.9</a>
</footer>
</div>
<div class="navbar active">
<div class="dropdown">
<% for i = 1, 6 do
local nav_key = 'nav_0' .. i
local link = getLink(nav_key)
if link then %>
<a href="<%=link%>">
<img src="<%=media%><%=icon[link]%>" />
</a>
<% end
end %>
</div>
<label class="toggler">
<img src="<%=media%>/gaya/icon/arrow.svg">
</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>
<script type="text/javascript">L.require('menu-alpha')</script>
<script src="<%=media%>/app.js"></script>