MaterialTemplate header bar fixes (#1645)

holoviz · Oct 18, 2020 · 5a1a8ed · 5a1a8ed
1 parent 39c2e1d
commit 5a1a8ed
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/panel/template/material/material.css b/panel/template/material/material.css
@@ -12,19 +12,26 @@ body {
 }
 
 .mdc-top-app-bar__title {
-  display: flex;
+  display: contents;
   padding-left: 10px;
   font-size: 1.5em;
 }
 
+.title-bar {
+  display: contents;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+}
+
 img.app-logo {
   padding-right: 10px;
 }
 
 .main-content {
   height: 100%;
-  margin-left: 20px;
-  margin-right: 20px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 #header {

diff --git a/panel/template/material/material.html b/panel/template/material/material.html
@@ -16,19 +16,21 @@
       {% if nav %}
       <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
       {% endif %}
-      <span class="mdc-top-app-bar__title">
-		{% if app_logo %}
-        <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+      <div class="title-bar">
+        <span class="mdc-top-app-bar__title">
+          {% if app_logo %}
+          <img src="{{ app_logo }}" height="30" class="app-logo"></img>
+          {% endif %}
+          {{ app_title }}
+        </span>
+        {% for doc in docs %}
+        {% for root in doc.roots %}
+        {% if "header" in root.tags %}
+        {{ embed(root) | indent(8) }}
         {% endif %}
-        {{ app_title }}
-	  </span>
-	  {% for doc in docs %}
-      {% for root in doc.roots %}
-      {% if "header" in root.tags %}
-      {{ embed(root) | indent(8) }}
-      {% endif %}
-      {% endfor %}
-      {% endfor %}
+        {% endfor %}
+        {% endfor %}
+        </div>
     </section>
     {% if busy %}
 	<div class="pn-busy-container">