luci-theme-material: add logo brand

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
Signed-off-by: Konrad Kreitmair <kreitmair.konrad@web.de>

3 files changed, 33 insertions, 45 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 000000000..49fcb7d25
--- /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 fa0316343..c6e893715 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 {
@@ -1537,6 +1553,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 +1769,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 +1802,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 +1819,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/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
index 564c680f1..1f1df9c9a 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>