fix ezengreen

luci-theme-ezengreen/htdocs/luci-static/openmptcprouter/html5.js

@@ -0,0 +1,3 @@
+// HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed
+// Uncompressed source: https://github.com/aFarkas/html5shiv
+(function(a,b){function f(a){var c,d,e,f;b.documentMode>7?(c=b.createElement("font"),c.setAttribute("data-html5shiv",a.nodeName.toLowerCase())):c=b.createElement("shiv:"+a.nodeName);while(a.firstChild)c.appendChild(a.childNodes[0]);for(d=a.attributes,e=d.length,f=0;f<e;++f)d[f].specified&&c.setAttribute(d[f].nodeName,d[f].nodeValue);c.style.cssText=a.style.cssText,a.parentNode.replaceChild(c,a),c.originalElement=a}function g(a){var b=a.originalElement;while(a.childNodes.length)b.appendChild(a.childNodes[0]);a.parentNode.replaceChild(b,a)}function h(a,b){b=b||"all";var c=-1,d=[],e=a.length,f,g;while(++c<e){f=a[c],g=f.media||b;if(f.disabled||!/print|all/.test(g))continue;d.push(h(f.imports,g),f.cssText)}return d.join("")}function i(c){var d=new RegExp("(^|[\\s,{}])("+a.html5.elements.join("|")+")","gi"),e=c.split("{"),f=e.length,g=-1;while(++g<f)e[g]=e[g].split("}"),b.documentMode>7?e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,'$1font[data-html5shiv="$2"]'):e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,"$1shiv\\:$2"),e[g]=e[g].join("}");return e.join("{")}var c=function(a){return a.innerHTML="<x-element></x-element>",a.childNodes.length===1}(b.createElement("a")),d=function(a,b,c){return b.appendChild(a),(c=(c?c(a):a.currentStyle).display)&&b.removeChild(a)&&c==="block"}(b.createElement("nav"),b.documentElement,a.getComputedStyle),e={elements:"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivDocument:function(a){a=a||b;if(a.documentShived)return;a.documentShived=!0;var f=a.createElement,g=a.createDocumentFragment,h=a.getElementsByTagName("head")[0],i=function(a){f(a)};c||(e.elements.join(" ").replace(/\w+/g,i),a.createElement=function(a){var b=f(a);return b.canHaveChildren&&e.shivDocument(b.document),b},a.createDocumentFragment=function(){return e.shivDocument(g())});if(!d&&h){var j=f("div");j.innerHTML=["x<style>","article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}","audio{display:none}","canvas,video{display:inline-block;*display:inline;*zoom:1}","[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}","mark{background:#FF0;color:#000}","</style>"].join(""),h.insertBefore(j.lastChild,h.firstChild)}return a}};e.shivDocument(b),a.html5=e;if(c||!a.attachEvent)return;a.attachEvent("onbeforeprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;b.namespaces.shiv||b.namespaces.add("shiv");var c=-1,d=new RegExp("^("+a.html5.elements.join("|")+")$","i"),e=b.getElementsByTagName("*"),g=e.length,j,k=i(h(function(a,b){var c=[],d=a.length;while(d)c.unshift(a[--d]);d=b.length;while(d)c.unshift(b[--d]);c.sort(function(a,b){return a.sourceIndex-b.sourceIndex}),d=c.length;while(d)c[--d]=c[d].styleSheet;return c}(b.getElementsByTagName("style"),b.getElementsByTagName("link"))));while(++c<g)j=e[c],d.test(j.nodeName)&&f(j);b.appendChild(b._shivedStyleSheet=b.createElement("style")).styleSheet.cssText=k}),a.attachEvent("onafterprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;var c=-1,d=b.getElementsByTagName("*"),e=d.length,f;while(++c<e)f=d[c],f.originalElement&&g(f);b._shivedStyleSheet&&b._shivedStyleSheet.parentNode.removeChild(b._shivedStyleSheet)})})(this,document)

luci-theme-ezengreen/htdocs/luci-static/resources/menu-openmptcprouter.js

@@ -0,0 +1,118 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(tree);
+
+		if (L.env.dispatchpath.length >= 3) {
+			for (var i = 0; i < 3 && node; i++) {
+				node = node.children[L.env.dispatchpath[i]];
+				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+
+		document.addEventListener('poll-start', this.handleBodyMargin);
+		document.addEventListener('poll-stop', this.handleBodyMargin);
+		document.addEventListener('uci-new-changes', this.handleBodyMargin);
+		document.addEventListener('uci-clear-changes', this.handleBodyMargin);
+		window.addEventListener('resize', this.handleBodyMargin);
+
+		this.handleBodyMargin();
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+		    ul = E('ul', { 'class': 'tabs' }),
+		    children = ui.menu.getChildren(tree),
+		    activeNode = null;
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name),
+			    activeClass = isActive ? ' active' : '',
+			    className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		if (ul.children.length == 0)
+			return E([]);
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			this.renderTabMenu(activeNode, url + '/' + activeNode.name, (level || 0) + 1);
+
+		return ul;
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'),
+		    children = ui.menu.getChildren(tree);
+
+		if (children.length == 0 || level > 1)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1),
+			    subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null,
+			    linkclass = (!level && submenu.firstElementChild) ? 'menu' : null,
+			    linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name);
+
+			var li = E('li', { 'class': subclass }, [
+				E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]),
+				submenu
+			]);
+
+			ul.appendChild(li);
+		}
+
+		ul.style.display = '';
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
+				E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]),
+				' ',
+				E('span', { 'class': 'divider' }, [ '|' ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+		}
+
+		if (ul.children.length > 1)
+			ul.style.display = '';
+	},
+
+	handleBodyMargin: function(ev) {
+		var body = document.querySelector('body'),
+		    head = document.querySelector('header');
+
+		body.style.marginTop = head.offsetHeight + 'px';
+	}
+});

luci-theme-ezengreen/htdocs/luci-static/resources/openmptcprouter/images/mobile.css

@@ -0,0 +1,61 @@
+#content-desktop {display: block;}
+#content-mobile {display: none;}
+
+@media screen and (max-width: 600px) {
+
+#content-desktop {display: none;}
+#content-mobile {display: block;}
+
+}
+
+header h3 a, header .brand {
+	float: left;
+	display: block;
+	padding: 12px 6px 12px 6px;
+	margin: 0 0 0 10px;
+	font-size: 22px;
+	font-weight: 240;
+}
+
+header div > ul, .nav {
+	display: block;
+	float: left;
+	margin: 7px 8px 0 8px;
+	position: relative;
+	left: 0;
+}
+
+header div > ul a, .nav a {
+	display: block;
+	float: left;
+	padding: 12px 6px 12px 6px;
+	line-height: 14px;
+	letter-spacing: 0.2px;
+}
+
+.menu-dropdown, .dropdown-menu {
+	top: 38px;
+	min-width: 180px;
+	max-width: 260px;
+}
+
+@media screen and (max-device-width: 660px) {
+	#maincontent.container {
+		width: 98%;
+		margin: 30px 0 0 6px;
+	}
+}
+
+@media screen and (max-device-width: 360px) {
+	#maincontent.container {
+		width: 96%;
+		margin: 30px 0 0 6px;
+	}
+}
+
+@media screen and (max-device-width: 200px) {
+	#maincontent.container {
+		width: 94%;
+		margin: 40px 0 0 2px;
+	}
+}