Merge pull request #2484 from yglb/rosy-bugsfix
luci-theme-rosy: Fixed most bugs and modified some interface styles
This commit is contained in:
commit
72163ea5ff
3 changed files with 2432 additions and 2091 deletions
File diff suppressed because it is too large
Load diff
|
@ -16,8 +16,8 @@
|
|||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
$(".main > .loading").fadeOut();
|
||||
(function (win, $) {
|
||||
$(".loading").fadeOut();
|
||||
|
||||
/**
|
||||
* trim text, Remove spaces, wrap
|
||||
|
@ -33,16 +33,17 @@
|
|||
var mainNodeName = undefined;
|
||||
|
||||
var nodeUrl = "";
|
||||
(function(node){
|
||||
if (node[0] == "admin"){
|
||||
(function (node) {
|
||||
var luciLocation;
|
||||
if (node[0] == "admin") {
|
||||
luciLocation = [node[1], node[2]];
|
||||
}else{
|
||||
} else {
|
||||
luciLocation = node;
|
||||
}
|
||||
|
||||
for(var i in luciLocation){
|
||||
for (var i in luciLocation) {
|
||||
nodeUrl += luciLocation[i];
|
||||
if (i != luciLocation.length - 1){
|
||||
if (i != luciLocation.length - 1) {
|
||||
nodeUrl += "/";
|
||||
}
|
||||
}
|
||||
|
@ -59,7 +60,7 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
$(".main > .main-left .nav > .slide > .menu").each(function () {
|
||||
$(".main-left .nav > .slide > .menu").each(function () {
|
||||
var ulNode = $(this);
|
||||
ulNode.next().find("a").each(function () {
|
||||
var that = $(this);
|
||||
|
@ -91,8 +92,7 @@
|
|||
enterShow: false
|
||||
});
|
||||
}
|
||||
|
||||
$(".main > .main-left .nav > .slide > .menu").click(function () {
|
||||
$(".main-left .nav > .slide > .menu").click(function () {
|
||||
var ul = $(this).next(".slide-menu");
|
||||
var menu = $(this);
|
||||
if (!ul.is(":visible")) {
|
||||
|
@ -108,33 +108,32 @@
|
|||
if ($('.nav').length > 0 && $(window).width() > 992) {
|
||||
oScroll.setSize(200);
|
||||
}
|
||||
setInterval(function(){
|
||||
if($('.nav').height() < $('.navbar-container').height()){
|
||||
$('.nav').css('transform', 'translate(0px, 0px)');
|
||||
setInterval(function () {
|
||||
if ($('.nav').height() < $('.navbar-container').height()) {
|
||||
$('.nav').css('transform', 'translate(0px, 0px)');
|
||||
}
|
||||
}, 300);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* hook menu click and add the hash
|
||||
*/
|
||||
$(".main > .main-left .nav > .slide > .slide-menu > li > a").click(function () {
|
||||
$(".main-left .nav > .slide > .slide-menu > li > a").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).parent().addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
$(".loading").fadeIn("fast");
|
||||
return true;
|
||||
});
|
||||
|
||||
/**
|
||||
* fix menu click
|
||||
*/
|
||||
$(".main > .main-left .nav > .slide > .slide-menu > li").click(function () {
|
||||
$(".main-left .nav > .slide > .slide-menu > li").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
window.location = $($(this).find("a")[0]).attr("href");
|
||||
$(".loading").fadeIn("fast");
|
||||
win.location = $($(this).find("a")[0]).attr("href");
|
||||
return false;
|
||||
});
|
||||
|
||||
|
@ -160,7 +159,7 @@
|
|||
that.click(function () {
|
||||
var href = that.attr("href");
|
||||
if (href.indexOf("#") == -1) {
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
$(".loading").fadeIn("fast");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
@ -171,54 +170,50 @@
|
|||
* Sidebar expand
|
||||
*/
|
||||
var showSide = false;
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".main-left").stop(true).animate({
|
||||
right: '100%'
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
if ($(win).height() == 992) {
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).fadeOut("fast");
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".darkMask").stop(true).fadeIn("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "100%"
|
||||
}, "fast").fadeIn("fast");
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
$(".main-left").click(function(e) {
|
||||
e.preventDefault();
|
||||
$(".main-left").stop(true).fadeOut("fast");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".main-left").stop(true).animate({
|
||||
right: '0'
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$(".logged-in .main-left").click(function () {
|
||||
$(".darkMask").click(function () {
|
||||
if (showSide) {
|
||||
showSide = false;
|
||||
|
||||
$(this).stop(true).fadeOut("fast");
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
right: '100%'
|
||||
width: "0"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
$(".main-right").css("overflow-y", "visible");
|
||||
}
|
||||
});
|
||||
|
||||
$(".logged-in .main-left > *").click(function () {
|
||||
event.stopPropagation();
|
||||
if ((navigator.userAgent.indexOf('MSIE') >= 0)&& (navigator.userAgent.indexOf('Opera') < 0)){
|
||||
event.cancelBubble = true;
|
||||
}else{
|
||||
event.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
if ($(window).width() > 921) {
|
||||
$(win).resize(function () {
|
||||
if ($(win).width() > 921) {
|
||||
$(".main-left").css("width", "");
|
||||
$(".darkMask").stop(true);
|
||||
$(".darkMask").css("display", "none");
|
||||
showSide = false;
|
||||
}
|
||||
if( $(window).width() > 992 ){
|
||||
$('.logged-in .main-right').width( $(window).width() - $('.logged-in .main-left').width() - 50 );
|
||||
}
|
||||
|
||||
$('body.login').height($(win).height());
|
||||
});
|
||||
|
||||
/**
|
||||
|
@ -231,7 +226,7 @@
|
|||
|
||||
$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
|
||||
var that = $(this);
|
||||
if (that.text().trim() == ""){
|
||||
if (that.text().trim() == "") {
|
||||
that.css("display", "none");
|
||||
}
|
||||
});
|
||||
|
@ -263,53 +258,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
$('<div class="iconpwd"></div>').appendTo($('.node-main-login form .cbi-value input[type="password"]').parent()[0]);
|
||||
|
||||
$('<div class="iconuser"></div>').appendTo($('.node-main-login form .cbi-value input[type="text"]').parent()[0]);
|
||||
|
||||
$('<div class="iconeye"></div>').appendTo($('.node-main-login form .cbi-value input[type="password"]').parent()[0]);
|
||||
|
||||
var num = true;
|
||||
$('.cbi-value-field .iconeye').click(function(){
|
||||
if(num){
|
||||
$('.node-main-login form .cbi-value-last input[type="password"]').prop('type', 'text');
|
||||
$('.node-main-login form .cbi-value-field .iconeye').removeClass('opeye').addClass('cleye');
|
||||
num = false;
|
||||
}else {
|
||||
$('.node-main-login form .cbi-value-last input[type="text"]').prop('type', 'password');
|
||||
$('.node-main-login form .cbi-value-field .iconeye').removeClass('cleye').addClass('opeye');
|
||||
num = true;
|
||||
}
|
||||
|
||||
$('.lang_enInterfaces .ifacebox-head').each(function () {
|
||||
$(this).next().css('border-color', $(this).css('background-color'));
|
||||
});
|
||||
|
||||
$('body.logged-in').css('min-height', $(window).height());
|
||||
|
||||
$(function(){
|
||||
if( $(window).width() > 992 ){
|
||||
$('.logged-in .main-right').outerWidth( $(window).width() - $('.logged-in .main-left').width() - 50 );
|
||||
$('<div class="eye"></div>').appendTo('.login > .main .cbi-value-last > .cbi-value-field');
|
||||
$('.login > .main .cbi-value-last > .cbi-value-field .eye').click(function () {
|
||||
var className = $(this).attr('class');
|
||||
if (className.indexOf('op-eye') > (-1)) {
|
||||
$('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'text');
|
||||
$(this).addClass('eye').removeClass('op-eye');
|
||||
} else {
|
||||
$('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'password');
|
||||
$(this).addClass('op-eye').removeClass('eye');
|
||||
}
|
||||
|
||||
$('.cbi-section .table').each(function () {
|
||||
var firTr = $(this).children('.tr').get(0);
|
||||
var firTd = $(firTr).children('.td').get(0);
|
||||
var th = $(firTr).children('.th').get(0);
|
||||
|
||||
var laTr = $(this).children('.tr').get($(this).children('.tr').length - 1);
|
||||
var laTd = $(laTr).children('.td').get(0);
|
||||
var a = window.getComputedStyle(firTr, ':before').getPropertyValue('content');
|
||||
|
||||
if (th && a != 'none') {
|
||||
$(th).css('border-top-left-radius', '0');
|
||||
} else if (firTd && a != 'none') {
|
||||
$(firTd).css('border-top-left-radius', '0');
|
||||
}
|
||||
if (laTd && a != 'none') {
|
||||
$(laTd).css('border-bottom-left-radius', '0');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#iptables').prev().css('margin-top', '10px');
|
||||
|
||||
})(jQuery);
|
||||
})(window, jQuery);
|
|
@ -1,4 +1,4 @@
|
|||
<%#
|
||||
<%#
|
||||
Rosy is a theme for LuCI. It is based on luci-theme-bootstrap
|
||||
luci-theme-rosy
|
||||
Copyright 2018 Rosy Song <rosysong@rosinson.com>
|
||||
|
@ -192,6 +192,26 @@
|
|||
end
|
||||
end
|
||||
end
|
||||
|
||||
local function auth_level()
|
||||
local childs = disp.node_childs(cattree)
|
||||
if #childs > 0 then
|
||||
for i, r in ipairs(childs) do
|
||||
local nnode = cattree.nodes[r]
|
||||
local grandchildren = disp.node_childs(nnode)
|
||||
|
||||
if #grandchildren > 0 then
|
||||
-- If this value is returned, the current interface is the logged-in data output interface
|
||||
return "auth"
|
||||
else
|
||||
-- If this value is returned, it indicates that the current interface is a data output interface that does not require login.
|
||||
return "noauth"
|
||||
end
|
||||
end
|
||||
end
|
||||
-- If this value is returned, the current interface is the login interface
|
||||
return "login"
|
||||
end
|
||||
-%>
|
||||
<!DOCTYPE html>
|
||||
<html lang="<%=luci.i18n.context.lang%>">
|
||||
|
@ -234,33 +254,33 @@
|
|||
<script src="<%=media%>/js/ScrollY.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 %>">
|
||||
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <%- if auth_level() == "auth" then %> logged-in<%- end %> <%- if auth_level() == "noauth" then %> login-info<%- end %> <%- if auth_level() == "login" then %> login<%- end %>">
|
||||
<header>
|
||||
<div class="fill">
|
||||
<div class="container">
|
||||
<span class="showSide"></span>
|
||||
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
|
||||
<div class="btn-con pull-right">
|
||||
<% 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>
|
||||
<% render_logout() %>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span class="showSide"></span>
|
||||
<a class="brand PC-hide" href="#"><%=boardinfo.hostname or "?"%></a>
|
||||
<div class="btn-con pull-right">
|
||||
<% 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>
|
||||
<% render_logout() %>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="" class="loading">
|
||||
<span>
|
||||
<div class="loading-img">
|
||||
<img src="<%=media%>/loading.svg">
|
||||
</div>Loading...
|
||||
</span>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div style="" class="loading"><span>
|
||||
<div class="loading-img">
|
||||
<img src="<%=media%>/loading.svg">
|
||||
</div>Loading...
|
||||
</span></div>
|
||||
<div class="main-left">
|
||||
<div class="nav-container">
|
||||
<a class="brand" href="#">
|
||||
|
|
Loading…
Reference in a new issue