Merge pull request #2181 from TDT-AG/pr/20180925-luci-theme-material

luci-theme-material: fixes and add openwrt logo brand

4 files changed, 69 insertions, 79 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/brand.png b/themes/luci-theme-material/htdocs/luci-static/material/brand.png
new file mode 100644
index 0000000000..49fcb7d257
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/brand.png
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index fa0316343b..8fa45d9809 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -183,7 +183,6 @@ header, .main {
 }
 
 header {
-    height: 4rem;
     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
     transition: box-shadow .2s;
     float: left;
@@ -205,7 +204,7 @@ footer > a {
 }
 
 .main {
-    top: 4rem;
+    top: 5rem;
     bottom: 0rem;
     position: relative;
     height: 100%;
@@ -255,7 +254,7 @@ footer > a {
 
 .main-left {
     float: left;
-    top: 4rem;
+    top: 5rem;
     width: 15%;
     width: calc(0% + 15rem);
     height: 100%;
@@ -288,19 +287,36 @@ footer > a {
 header {
     background: var(--header-bg, #0099CC);
     color: var(--header-color, #FFFFFF);
+    height: 5rem;
 }
 
 header > .fill > .container {
-    margin-top: 0.5rem;
-    padding: 0.5rem 1rem 0 1rem;
+    padding-top: 0.25rem; 
+    padding-right: 1rem;
+    padding-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    height: 5rem;
 }
 
 header > .fill > .container > .brand {
-    font-size: 1.4rem;
+    font-size: 2rem;
     color: var(--header-color, #FFFFFF);
     text-decoration: none;
     cursor: default;
-    vertical-align: text-bottom;
+    margin-left: 1rem;
+}
+
+header > .fill > .container > img{
+    max-height: 4.5rem;
+    width: calc(0% + 13rem);
+    margin: 1rem;
+}
+
+header > .fill > .container > .status {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 8;
 }
 
 .danger {
@@ -384,7 +400,8 @@ header > .fill > .container > .brand {
 }
 
 .main > .main-left > .nav > li:nth-last-child(1) {
-    margin-top: 2rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     font-size: 1.2rem;
 }
 
@@ -1537,6 +1554,10 @@ header > .container > .pull-right > * {
     background-color: #14CE14;
 }
 
+#xhr_poll_status {
+    display: flex;
+}
+
 .label {
     padding: 0.3rem 0.8rem;
     font-size: 0.8rem;
@@ -1749,14 +1770,6 @@ body.lang_pl.node-main-login .cbi-value-title {
 }
 
 @media screen and (max-width: 1600px) {
-    .main-left {
-        width: calc(0% + 13rem);
-    }
-
-    .main-right {
-        width: calc(100% - 13rem);
-    }
-
     .btn,
     .cbi-button {
         padding: 0.3rem 0.6rem;
@@ -1790,29 +1803,10 @@ body.lang_pl.node-main-login .cbi-value-title {
 }
 
 @media screen and (max-width: 1280px) {
-    header {
-        height: 3.5rem;
-    }
-
     header > .container {
         margin-top: 0.25rem;
     }
 
-    .main {
-        top: 3.5rem;
-        height: calc(100% - 3.5rem);
-    }
-
-    .main-left {
-        width: calc(0% + 13rem);
-        top: 3.5rem;
-        height: calc(100% - 3.5rem);
-    }
-
-    .main-right {
-        width: calc(100% - 13rem);
-    }
-
     .cbi-tabmenu > li > a, .tabs > li > a {
         padding: 0.2rem 0.5rem;
     }
@@ -1826,19 +1820,13 @@ body.lang_pl.node-main-login .cbi-value-title {
         font-size: 0.7rem !important;
         width: 100% !important;
     }
-
-    .main > .main-left > .nav > li,
-    .main > .main-left > .nav > li a,
-    .main > .main-left > .nav > .slide > .menu {
-        font-size: 0.9rem;
-    }
-
-    .main > .main-left > .nav > .slide > .slide-menu > li > a {
-        font-size: 0.7rem;
-    }
 }
 
 @media screen and (max-width: 992px) {
+    header > .fill > .container > img {
+        display: none;
+    }
+
     .main-left {
         width: 0;
         position: fixed;
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
index d69417e88d..544866ddee 100755..100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm
@@ -1,21 +1,21 @@
 <%#
-    Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+	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>
+	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
+	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>
+	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
+	MUI:
+	https://github.com/muicss/mui
 
-    Licensed to the public under the Apache License 2.0
+	Licensed to the public under the Apache License 2.0
 -%>
 
 <%
@@ -26,26 +26,27 @@
 	local tree = disp.node()
 	local categories = disp.node_childs(tree)
 %>
-                </div>
-                <footer class="mobile-hide">
-                    <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
-                    <%= ver.distversion %>
-                    <% if #categories > 1 then %>
-                    <ul class="breadcrumb pull-right" id="modemenu">
-                        <% for i, r in ipairs(categories) do %>
-                        <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
-                        <% end %>
-                    </ul>
-                    <% end %>
-                </footer>
-            </div>
-        </div>
-
-    <script>
-        // thanks for Jo-Philipp Wich <jow@openwrt.org>
-        var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
-    </script>
-    <script src="<%=media%>/js/jquery.min.js"></script>
-    <script src="<%=media%>/js/script.js"></script>
+	</div>
+	<footer class="mobile-hide">
+	<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
+	<% if #categories > 1 then %>
+		<ul class="breadcrumb pull-right" id="modemenu">
+		<% for i, r in ipairs(categories) do %>
+		<li<% if request[1] == r then %> class="active"<%end%>>
+			<a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a>
+			<span class="divider">|</span>
+		</li>
+		<% end %>
+		</ul>
+	<% end %>
+	</footer>
+	</div>
+</div>
+<script>
+	// thanks for Jo-Philipp Wich <jow@openwrt.org>
+	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
+</script>
+<script src="<%=media%>/js/jquery.min.js"></script>
+<script src="<%=media%>/js/script.js"></script>
 </body>
 </html>
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
index 564c680f1d..1f1df9c9ad 100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
@@ -215,8 +215,9 @@
 	<div class="fill">
 		<div class="container">
 			<span class="showSide"></span>
+			<img src="<%=media%>/brand.png"/>
 			<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
-			<div class="pull-right">
+			<div class="status">
 				<% 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>