fix theme rosy to fit small screen

This commit is contained in:
coolsnowwolf 2018-09-27 01:43:24 +08:00
parent fb3d32fdf1
commit 96cec21895
8 changed files with 1825 additions and 1927 deletions

View File

@ -6,7 +6,7 @@
include $(TOPDIR)/rules.mk
LUCI_TITLE:=rosy Theme
LUCI_TITLE:=Rosy Theme
LUCI_DEPENDS:=
include $(TOPDIR)/feeds/luci/luci.mk

View File

@ -59,7 +59,7 @@
return true;
}
$(".main > .main-left > .nav > .slide > .menu").each(function () {
$(".main > .main-left .nav > .slide > .menu").each(function () {
var ulNode = $(this);
ulNode.next().find("a").each(function () {
var that = $(this);
@ -81,30 +81,28 @@
/**
* menu click
*/
if($(window).width() > 1024 || $(window).width() <= 880){
$(".main > .main-left .nav > .slide > .menu").click(function () {
var ul = $(this).next(".slide-menu");
var menu = $(this);
if (!ul.is(":visible")) {
$(".main > .main-left .nav > .slide > .menu").next(".slide-menu").slideUp("fast");
menu.addClass("active");
ul.addClass("active");
ul.stop(true).slideDown("fast");
} else {
ul.stop(true).slideUp("fast", function () {
menu.removeClass("active");
ul.removeClass("active");
});
}
return false;
});
}
$(".main > .main-left .nav > .slide > .menu").click(function () {
var ul = $(this).next(".slide-menu");
var menu = $(this);
if (!ul.is(":visible")) {
$(".main > .main-left .nav > .slide > .menu").next(".slide-menu").slideUp("fast");
menu.addClass("active");
ul.addClass("active");
ul.stop(true).slideDown("fast");
} else {
ul.stop(true).slideUp("fast", function () {
menu.removeClass("active");
ul.removeClass("active");
});
}
return false;
});
/**
* hook menu click and add the hash
*/
$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
$(".main > .main-left .nav > .slide > .slide-menu > li > a").click(function () {
if (lastNode != undefined) lastNode.removeClass("active");
$(this).parent().addClass("active");
$(".main > .loading").fadeIn("fast");
@ -114,7 +112,7 @@
/**
* fix menu click
*/
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
$(".main > .main-left .nav > .slide > .slide-menu > li").click(function () {
if (lastNode != undefined) lastNode.removeClass("active");
$(this).addClass("active");
$(".main > .loading").fadeIn("fast");
@ -158,16 +156,18 @@
$(".showSide").click(function () {
if($(window).width() <= 1024){
if (showSide) {
$(".nav").stop(true).animate({
$(".nav-container").stop(true).animate({
height: "0",
padding: "0"
}, "fast");
$(".logged-in .main-left").css('overflow', "hidden");
showSide = false;
} else {
$(".nav").stop(true).animate({
height: $(window).height() - 64 + 'px',
padding: "2rem 1rem"
$(".nav-container").stop(true).animate({
height: $(window).height() - $('.logged-in .main-left > header').height() + 'px',
padding: "3rem 1rem"
}, "fast");
$(".logged-in .main-left").css('overflow', "visible");
showSide = true;
}
}
@ -223,12 +223,25 @@
}
}
if($(window).width() <= 1024 && $(window).width() >= 768){
$('.main > .main-left .nav > .slide').each(function(index, elem){
elem.style.width = $($('.main > .main-left .nav > .slide')[1]).width() + 'px';
elem.style.left = 20 * (index+1) + '%';
});
function disnone() {
var mes = $('.node-main-login .alert-message.warning');
var lineDraft = $('.node-main-login .line-draft');
if(mes.is(":visible")){
lineDraft.css('display', 'none');
mes.css('display', 'block');
}else {
lineDraft.css('display', 'block');
mes.css('display', 'none');
}
}
if($(window).width() > 1024){
disnone();
$('.node-main-login .cbi-button-apply').click(function(){disnone();});
}
})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 742 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 B

View File

@ -120,38 +120,37 @@
end
end
local function render_topmenu()
local function render_topmenu()
local childs = disp.node_childs(cattree)
if #childs > 0 then
write('<ul class="nav">')
write('<ul class="nav">')
for i, r in ipairs(childs) do
local nnode = cattree.nodes[r]
local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then
local title = pcdata(striptags(translate(nnode.title)))
write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
title,
title
})
render_submenu(category .. "/" .. r, nnode)
write('</li>')
else
local title = pcdata(striptags(translate(nnode.title)))
write('<li class="logout"><a data-title="%s" href="%s">%s</a></li>' %{
title,
nodeurl(category, r, nnode.query),
title
})
end
for i, r in ipairs(childs) do
local nnode = cattree.nodes[r]
local grandchildren = disp.node_childs(nnode)
end
if #grandchildren > 0 then
local title = pcdata(striptags(translate(nnode.title)))
write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
title,
title
})
render_submenu(category .. "/" .. r, nnode)
write('</li>')
else
local title = pcdata(striptags(translate(nnode.title)))
write('<li class="logout"><a data-title="%s" href="%s">%s</a></li>' %{
title,
nodeurl(category, r, nnode.query),
title
})
end
end
write('</ul>')
end
write('</ul>')
end
end
local function render_changes()
@ -176,11 +175,14 @@
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta name="format-detection" content="telephone=no, email=no"/>
<title>
<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> -
LuCI</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="x5-fullscreen" content="true">
@ -191,63 +193,81 @@
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="#0099CC">
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="msapplication-TileImage" content="<%=media%>/logo.png"/>
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or " ?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or " ?") ) %> - LuCI">
<meta name="msapplication-TileImage" content="<%=media%>/logo.png" />
<link rel="icon" href="<%=media%>/logo.png" sizes="144x144">
<link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144">
<link rel="stylesheet" href="<%=media%>/cascade.css">
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %>
<style title="text/css"><%= css %></style>
<style title="text/css">
<%=css %>
</style>
<% end -%>
<script src="<%=resource%>/cbi.js"></script>
<script src="<%=resource%>/xhr.js"></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>">
<div class="main">
<div style="" class="loading">
<span>
<div class="loading-img"><img src="<%=media%>/loading.svg"></div>
<p>Loading...</p>
</span>
</div>
<div class="main-left">
<header>
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
<div class="refresh">
<% render_changes() %>
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
<span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span>
<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span>
</span>
<span class="showSide"></span>
<div class="main">
<div style="" class="loading">
<span>
<div class="loading-img"><img src="<%=media%>/loading.svg"></div>
<p>Loading...</p>
</span>
</div>
<div class="main-left">
<header>
<a class="brand" href="#">
<%=boardinfo.hostname or "?"%></a>
<div class="refresh">
<% render_changes() %>
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
<span class="label success" id="xhr_poll_status_on"><span class="mobile-hide">
<%:Auto Refresh%></span>
<%:on%></span>
<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide">
<%:Auto Refresh%></span>
<%:off%></span>
</span>
<span class="showSide"></span>
</div>
</header>
<div class="nav-container">
<% render_topmenu() %>
</div>
</header>
<% render_topmenu() %>
</div>
<div class="main-right">
<div class="darkMask"></div>
<div id="maincontent">
<div class="container">
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
</div>
<div class="main-right">
<div class="darkMask"></div>
<div id="maincontent">
<div class="container">
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
<div class="alert-message warning">
<h4><%:No password set!%></h4>
<p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
<div class="left"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
<h4>
<%:No password set!%>
</h4>
<p>
<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
</p>
<div class="left"><a class="btn" href="<%=url(" admin/system/admin")%>"> <%:Go to password configuration...%></a></div>
</div>
<%- end -%>
<%- end -%>
<noscript>
<div class="alert-message warning">
<h4><%:JavaScript required!%></h4>
<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
</div>
</noscript>
<noscript>
<div class="alert-message warning">
<h4>
<%:JavaScript required!%>
</h4>
<p>
<%:You must enable JavaScript in your browser or LuCI will not work properly.%>
</p>
</div>
</noscript>
<% if category then render_tabmenu(category, cattree) end %>
<% if category then render_tabmenu(category, cattree) end %>

View File

@ -1,6 +1,6 @@
#!/bin/sh
uci batch <<-EOF
set luci.themes.rosy=/luci-static/rosy
set luci.themes.Rosy=/luci-static/rosy
set luci.main.mediaurlbase=/luci-static/rosy
commit luci
EOF