Fix CSS load order in Templates (#1698)

* switch css order * fix overlow-y on sidebar * fix logo issue * fix scrollbar and logo issue * fix scrollbars Co-authored-by: Marc Skov Madsen <[email protected]>
holoviz · Oct 27, 2020 · b7f023c · b7f023c
1 parent 1beab74
commit b7f023c
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 15 deletions.
diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css
@@ -65,6 +65,7 @@ img.app-logo {
   padding-right: 10px;
   font-size: 28px;
   height: 30px;
+  max-width: inherit;
 }
 
 p.bk.card-button {

diff --git a/panel/template/bootstrap/bootstrap.html b/panel/template/bootstrap/bootstrap.html
@@ -11,9 +11,9 @@
 {% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
 {% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
 
+<link rel="stylesheet" href="{{ template_resources['css']['bootstrap'] }}" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
 <link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
-<link rel="stylesheet" href="{{ template_resources['css']['bootstrap'] }}" crossorigin="anonymous">
 <script src="{{ template_resources['js']['jquery'] }}" crossorigin="anonymous"></script>
 <script src="{{ template_resources['js']['bootstrap'] }}" crossorigin="anonymous"></script>
 {% endblock %}

diff --git a/panel/template/golden/golden.css b/panel/template/golden/golden.css
@@ -61,7 +61,7 @@ img.app-logo {
   height: 30px;
   padding-top:9px;
   padding-bottom:9px;
-
+  max-width: inherit;
 }
 
 .header-adjust {

diff --git a/panel/template/golden/golden.html b/panel/template/golden/golden.html
@@ -11,9 +11,9 @@
 {% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
 {% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
 
+<link type="text/css" rel="stylesheet" href="{{ template_resources['css']['goldenlayout'] }}" />
 <link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
 <link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
-<link type="text/css" rel="stylesheet" href="{{ template_resources['css']['goldenlayout'] }}" />
 <script type="text/javascript" src="{{ template_resources['js']['jquery'] }}"></script>
 <script type="text/javascript" src="{{ template_resources['js']['goldenlayout'] }}"></script>
 {% endblock %}

diff --git a/panel/template/material/material.css b/panel/template/material/material.css
@@ -62,8 +62,9 @@ img.app-logo {
   padding-right: 10px;
   font-size: 28px;
   height: 30px;
-  padding-top: 10px;
-  padding-bottom: 8px;
+  max-width: inherit;
+  padding-top: 12px;
+  padding-bottom: 6px;
 }
 
 #app-title {
@@ -104,6 +105,9 @@ img.app-logo {
   display: flex;
 }
 
+.mdc-drawer__content {
+  overflow-x: hidden;
+}
 .mdc-drawer__content, .main-content {
   padding: 12px;
 }

diff --git a/panel/template/material/material.html b/panel/template/material/material.html
@@ -11,10 +11,10 @@
 {% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
 {% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
 
-<link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
-<link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
 <link href="{{ template_resources['css']['material'] }}" rel="stylesheet">
 <script src="{{ template_resources['js']['material'] }}"></script>
+<link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
+<link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 {% endblock %}

diff --git a/panel/template/react/react.css b/panel/template/react/react.css
@@ -49,6 +49,7 @@ a.navbar-brand {
 img.app-logo {
   font-size: 28px;
   height: 30px;
+  max-width: inherit;
 }
 
 .pn-bar {

diff --git a/panel/template/react/react.html b/panel/template/react/react.html
@@ -10,13 +10,13 @@
 {% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
 {% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
 
-<!-- Template CSS -->
-<link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
-<link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
 <!-- Bootstrap -->
 <link rel="stylesheet" href="{{ template_resources['css']['bootstrap'] }}">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="{{ template_resources['css']['font-awesome'] }}">
+<!-- Template CSS -->
+<link rel="stylesheet" href="{{ template_resources['css']['base'] }}">
+<link rel="stylesheet" href="{{ template_resources['css']['theme'] }}">
 
 <!-- React-grid-layout script -->
 <script src="{{ template_resources['js']['react'] }}" crossorigin></script>

diff --git a/panel/template/vanilla/vanilla.css b/panel/template/vanilla/vanilla.css
@@ -5,9 +5,6 @@ body {
   overflow-x: hidden;
   overflow-y: hidden;
 }
-img {
-  max-width: 100%;
-}
 
 #container {
   padding:0px;
@@ -55,6 +52,7 @@ img.app-logo {
   height: 30px;
   padding-top:11px;
   padding-bottom: 7px;
+  max-width: inherit;
 }
 
 .pn-bar {
@@ -86,7 +84,9 @@ img.app-logo {
   transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
   transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
   width: 290px;
-  height: calc(100vh - 68px);
+  height: calc(100vh - 102px);
+  padding-top: 10px;
+  padding-bottom: 20px;
 }
 
 #sidebar.active {
@@ -97,7 +97,7 @@ img.app-logo {
   transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
   overflow-y: scroll;
   width: 100vw;
-  height: calc(100vh - 68px);
+  height: calc(100vh - 102px);
   margin-left: 300px;
   padding-right: 20px;
   padding-bottom: 20px;