Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI

Signed-off-by: Lutty Yang <lutty@wcan.in>
This commit is contained in:
Lutty Yang 2015-09-17 16:19:48 +08:00
parent cdf3122db2
commit c332c66031
4 changed files with 108 additions and 33 deletions

View file

@ -1,3 +1,26 @@
/**
* Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
*
* luci-theme-material
* Copyright 2015 Lutty Yang <lutty@wcan.in>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/LuttyYang/luci-theme-material/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
* Copyright 2012 David Menting <david@nut-bolt.nl>
*
* MUI:
* https://github.com/muicss/mui
*
* Licensed to the public under the Apache License 2.0
*/
/*
* Font generate by Icomoon<icomoon.io>
*/
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src: url('../fonts/font.eot'); src: url('../fonts/font.eot');
@ -362,7 +385,7 @@ footer {
left: 0; left: 0;
} }
/* 进度条fix */ /* fix progress bar */
#memfree > div, #memfree > div,
#membuff > div, #membuff > div,
#conns > div, #conns > div,
@ -379,7 +402,7 @@ footer {
background-color: #0099CC !important; background-color: #0099CC !important;
} }
/* 多重table fix*/ /* fix multiple table */
table table { table table {
border: none; border: none;
@ -397,7 +420,7 @@ td > table > tbody > tr > td {
border: none; border: none;
} }
/* button 样式 */ /* button style */
.cbi-button { .cbi-button {
box-sizing: border-box; box-sizing: border-box;
@ -714,7 +737,6 @@ td > table > tbody > tr > td {
.uci-change-list var ins, .uci-change-list var ins,
.uci-change-list var del { .uci-change-list var del {
/*display: inline;*/
border: none; border: none;
white-space: pre; white-space: pre;
font-style: normal; font-style: normal;

View file

@ -1,5 +1,21 @@
/** /**
* Created by WebStorm on 15-9-13. * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
*
* luci-theme-material
* Copyright 2015 Lutty Yang <lutty@wcan.in>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/LuttyYang/luci-theme-material/issues
*
* luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org>
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
* Copyright 2012 David Menting <david@nut-bolt.nl>
*
* MUI:
* https://github.com/muicss/mui
*
* Licensed to the public under the Apache License 2.0
*/ */
(function ($) { (function ($) {
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
@ -104,15 +120,24 @@
}; };
}(jQuery)); }(jQuery));
function trimText(text) {
return text.replace(/[ \t\n\r]+/g, " ");
}
(function ($) { (function ($) {
/**
* trim text, Remove spaces, wrap
* @param text
* @returns {string}
*/
function trimText(text) {
return text.replace(/[ \t\n\r]+/g, " ");
}
var tree = undefined; var tree = undefined;
var lastNode = undefined; var lastNode = undefined;
/**
* get the current node by Hash (reserve)
* @returns {boolean} success?
*/
function getCurrentNodeByHash() { function getCurrentNodeByHash() {
var ret = false; var ret = false;
var hash = window.location.hash; var hash = window.location.hash;
@ -138,6 +163,10 @@ function trimText(text) {
return ret; return ret;
} }
/**
* get the current node by Burl (primary)
* @returns {boolean} success?
*/
function getCurrentNodeByUrl() { function getCurrentNodeByUrl() {
var ret = false; var ret = false;
var getUrlNode = function (href){ var getUrlNode = function (href){
@ -188,6 +217,9 @@ function trimText(text) {
return ret; return ret;
} }
/**
* menu click
*/
$(".main > .main-left > .nav > .slide > .menu").click(function () { $(".main > .main-left > .nav > .slide > .menu").click(function () {
var ul = $(this).next(".slide-menu"); var ul = $(this).next(".slide-menu");
var menu = $(this); var menu = $(this);
@ -203,6 +235,9 @@ function trimText(text) {
} }
}); });
/**
* 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 () {
var href = $(this).attr("href"); var href = $(this).attr("href");
var tree = trimText($(this).parent().parent().prev().data("title")) + "|" + trimText($(this).data("title")); var tree = trimText($(this).parent().parent().prev().data("title")) + "|" + trimText($(this).data("title"));
@ -213,11 +248,16 @@ function trimText(text) {
return false; return false;
}); });
/**
* fix menu click
*/
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
$(this).find("a").click(); $(this).find("a").click();
}); });
/**
* get current node and open it
*/
if (!getCurrentNodeByUrl()){ if (!getCurrentNodeByUrl()){
getCurrentNodeByHash(); getCurrentNodeByHash();
if (tree[0] == "Status" && tree[1] == "Overview"){ if (tree[0] == "Status" && tree[1] == "Overview"){
@ -232,6 +272,9 @@ function trimText(text) {
$(".cbi-button-down").val(""); $(".cbi-button-down").val("");
/**
* hook other "A Label" and add hash to it.
*/
$("#maincontent > .container").find("a").each(function () { $("#maincontent > .container").find("a").each(function () {
var that = $(this); var that = $(this);
var onclick = that.attr("onclick"); var onclick = that.attr("onclick");
@ -248,6 +291,9 @@ function trimText(text) {
} }
}); });
/**
* Sidebar expand
*/
var showSide = false; var showSide = false;
$(".showSide").click(function () { $(".showSide").click(function () {
if (showSide){ if (showSide){
@ -285,10 +331,11 @@ function trimText(text) {
} }
}); });
/**
* fix legend position
*/
$("legend").each(function () { $("legend").each(function () {
var that = $(this); var that = $(this);
that.after("<span class='panel-title'>" + that.text() + "</span>"); that.after("<span class='panel-title'>" + that.text() + "</span>");
}); });
window.scrollTo(0,1);
})(jQuery); })(jQuery);

View file

@ -1,18 +1,21 @@
<%# <%#
luci-theme-material is based on MUI and luci-theme-bootstrap. Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
luci-theme-bootstrap: luci-theme-material
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2015 Lutty Yang <lutty@wcan.in>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
MUI: Have a bug? Please create an issue here on GitHub!
https://github.com/muicss/mui https://github.com/LuttyYang/luci-theme-material/issues
luci-theme-material luci-theme-bootstrap:
Copyright 2015 Lutty Yang <lutty@wcan.in> Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
Licensed to the public under the Apache License 2.0 MUI:
https://github.com/muicss/mui
Licensed to the public under the Apache License 2.0
-%> -%>
<% <%

View file

@ -1,5 +1,11 @@
<%# <%#
luci-theme-material is based on MUI and luci-theme-bootstrap. Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
luci-theme-material
Copyright 2015 Lutty Yang <lutty@wcan.in>
Have a bug? Please create an issue here on GitHub!
https://github.com/LuttyYang/luci-theme-material/issues
luci-theme-bootstrap: luci-theme-bootstrap:
Copyright 2008 Steven Barth <steven@midlink.org> Copyright 2008 Steven Barth <steven@midlink.org>
@ -9,9 +15,6 @@
MUI: MUI:
https://github.com/muicss/mui https://github.com/muicss/mui
luci-theme-material
Copyright 2015 Lutty Yang <lutty@wcan.in>
Licensed to the public under the Apache License 2.0 Licensed to the public under the Apache License 2.0
-%> -%>