Template and design fixes (#4548)

* Rewrite layout of fast templates * Some component styling fixes
holoviz · Mar 21, 2023 · a1fa7f5 · a1fa7f5
1 parent 62cb10c
commit a1fa7f5
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 14 deletions.
diff --git a/panel/template/fast/fast.css b/panel/template/fast/fast.css
@@ -46,6 +46,12 @@ body {
 #container {
     padding: 0px;
     width: 100vw;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+#header-design-provider {
+    z-index: 10;
 }
 
 #header{
@@ -149,17 +155,22 @@ img.app-logo {
     overflow-y: scroll;
     padding-right: 15px;
     transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-    width: 100%;
+    flex-grow: 1;
 }
 
 #sidebarCollapse {
     background: none;
     border: none;
 }
 
+#sidebar.hidden {
+    width: 0px;
+    overflow: hidden;
+    margin: 0px;
+}
+
 .sidenav {
     padding-top: 15px;
-    position: absolute;
     overflow-y: scroll;
 }
 
@@ -301,6 +312,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .main-margin {
+    margin-top: 1em;
     margin-left: auto;
     margin-right: auto;
 }

diff --git a/panel/template/fast/grid/fast_grid_template.html b/panel/template/fast/grid/fast_grid_template.html
@@ -169,7 +169,7 @@
       </div>
       {% endif %}
 
-      <div class="main" id="main" style="margin-left: {{ 'calc(var(--sidebar-width) + 30px)' if nav or sidebar_footer else '15px' }};">
+      <div class="main" id="main">
 	{% if main_max_width %}
 	<div class="main-margin" style="max-width: {{ main_max_width }};">
 	{% endif %}
@@ -201,14 +201,12 @@
 
 <script type="text/javascript">
   function openNav() {
-    document.getElementById("sidebar").style.left = 0;
-    document.getElementById("main").style.marginLeft = "calc(var(--sidebar-width) + 30px)";
+    document.getElementById("sidebar").classList.remove("hidden");
     document.getElementById("sidebar-button").onclick = closeNav;
   }
 
   function closeNav() {
-    document.getElementById("sidebar").style.left = "calc(-1 * var(--sidebar-width) - 20px)";
-    document.getElementById("main").style.marginLeft = "15px";
+    document.getElementById("sidebar").classList.add("hidden");
     document.getElementById("sidebar-button").onclick = openNav;
   }
 

diff --git a/panel/template/fast/list/fast_list_template.html b/panel/template/fast/list/fast_list_template.html
@@ -167,7 +167,7 @@
       </div>
       {% endif %}
 
-      <div class="main" id="main" style="margin-left: {{ 'calc(var(--sidebar-width) + 30px)' if nav or sidebar_footer else '15px' }};">
+      <div class="main" id="main">
 	{% if main_max_width %}
 	<div class="main-margin" style="max-width: {{ main_max_width }};">
 	{% endif %}
@@ -222,14 +222,12 @@
 
 <script type="text/javascript">
   function openNav() {
-    document.getElementById("sidebar").style.left = 0;
-    document.getElementById("main").style.marginLeft = "calc(var(--sidebar-width) + 30px)";
+    document.getElementById("sidebar").classList.remove("hidden");
     document.getElementById("sidebar-button").onclick = closeNav;
   }
 
   function closeNav() {
-    document.getElementById("sidebar").style.left = "calc(-1 * var(--sidebar-width) - 20px)";
-    document.getElementById("main").style.marginLeft = "15px";
+    document.getElementById("sidebar").classList.add("hidden");
     document.getElementById("sidebar-button").onclick = openNav;
   }
 

diff --git a/panel/theme/css/bootstrap.css b/panel/theme/css/bootstrap.css
@@ -10,6 +10,7 @@
     --bs-surface-bg: var(--jp-layout-color2, var(--panel-surface-color));
     --bs-surface-color: var(--jp-ui-font-color1, var(--panel-on-surface-color));
     --bs-form-control-bg: var(--jp-layout-color1, var(--panel-surface-color));
+    --bs-form-control-color: var(--jp-ui-color2, var(--panel-on-surface-color));
     --bokeh-base-font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 }
 
@@ -473,6 +474,7 @@ input.bk-input, textarea.bk-input {
 
 .bk-menu {
     background-color: var(--bs-form-control-bg);
+    color: var(--bs-form-control-color);
 }
 
 .bk-menu > :not(.bk-divider):hover, .bk-menu > :not(.bk-divider).bk-active {
@@ -647,6 +649,10 @@ div .tabulator .tabulator-headers, div .tabulator .tabulator-header .tabulator-c
     color: var(--bs-body-color);
 }
 
+.tabulator .tabulator-header .tabulator-header-contents {
+    background-color: var(--bs-body-bg);
+}
+
 .pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even {
     background-color: var(--bs-surface-bg);
     color: var(--bs-surface-color);

diff --git a/panel/theme/css/material.css b/panel/theme/css/material.css
@@ -316,7 +316,7 @@ select.bk-input:focus {
 }
 
 .bk-btn-group > button.bk-btn-default:active {
-  background-color: white;
+  background-color: var(--mdc-theme-background);
   background-size: 100%;
   transition: background 0s;
 }
@@ -429,11 +429,60 @@ progress:not([value])::before {
 /* Tabulator */
 
 .pnx-tabulator.tabulator {
+    background-color: var(--mdc-theme-background);
+    color: var(--mdc-theme-on-background);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table {
+    background-color: var(--mdc-theme-background);
+    color: var(--mdc-theme-on-background);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
+    background-color: var(--mdc-theme-background);
+}
+
+div .tabulator .tabulator-headers, div .tabulator .tabulator-header .tabulator-col {
+    background-color: var(--mdc-theme-background);
+    color: var(--mdc-theme-on-background);
+}
+
+.tabulator .tabulator-header .tabulator-header-contents {
+    background-color: var(--mdc-theme-background);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even {
     background-color: var(--mdc-theme-surface);
+    color: var(--mdc-theme-on-surface);
 }
 
-.pnx-tabulator.tabulator .tabulator-headers, .pnx-tabulator.tabulator .tabulator-header .tabulator-col {
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selectable:hover {
+    background-color: rgba(var(--panel-primary-rgb), 0.25);
+    color: var(--mdc-theme-on-primary);
+}
+
+.pnx-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
     background-color: var(--mdc-theme-surface);
+    color: var(--mdc-theme-on-surface);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected.tabulator-selectable:hover {
+    background-color: var(--mdc-theme-primary);
+    color: var(--mdc-theme-on-primary);
+}
+
+.pnx-tabulator.tabulator .tabulator-table .tabulator-row.tabulator-selected,
+.pnx-tabulator.tabulator .tabulator-table .tabulator-row.tabulator-selected.tabulator-row-even {
+    background-color: var(--mdc-theme-primary);
+    color: var(--mdc-theme-on-primary);
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing {
+    border: 1px solid var(--mdc-theme-on-background);
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing input {
+    color: var(--mdc-theme-on-background);
 }
 
 /* Quill editor */