From c3374e47b843c1106f2a221ee03c1fcdf5222a6e Mon Sep 17 00:00:00 2001 From: Andrew Huang Date: Tue, 26 Dec 2023 10:11:20 -0800 Subject: [PATCH 1/3] Add param to toggle template height --- panel/template/base.py | 4 ++++ panel/template/material/material.html | 20 +++++++++++++++++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/panel/template/base.py b/panel/template/base.py index 520623f59d..249085fdae 100644 --- a/panel/template/base.py +++ b/panel/template/base.py @@ -655,6 +655,9 @@ class BasicTemplate(BaseTemplate): header_color = param.String(doc=""" Optional header text color override.""") + header_height = param.String(default="64px", doc=""" + Optional header height override.""") + location = param.Boolean(default=True, readonly=True) _actions = param.ClassSelector(default=TemplateActions(), class_=TemplateActions) @@ -772,6 +775,7 @@ def _update_vars(self, *args) -> None: self._render_variables['app_favicon'] = favicon self._render_variables['app_favicon_type'] = self._get_favicon_type(self.favicon) self._render_variables['header_background'] = self.header_background + self._render_variables['header_height'] = self.header_height self._render_variables['header_color'] = self.header_color self._render_variables['main_max_width'] = self.main_max_width self._render_variables['sidebar_width'] = self.sidebar_width diff --git a/panel/template/material/material.html b/panel/template/material/material.html index 1ba14a4ffe..464669ef5f 100644 --- a/panel/template/material/material.html +++ b/panel/template/material/material.html @@ -55,8 +55,15 @@ #header { --mdc-theme-background: var(--header-background); --mdc-theme-on-background: var(--header-color); - background-color: var(--header-background); - color: var(--header-color); + background-color: var(--header-background); + color: var(--header-color); + } + #header-items { + height: 100%; + } + .mdc-top-app-bar__section--align-start { + height: {{ header_height }}; /* Adjust the height for the align-start section */ + } .mdc-drawer { width: var(--sidebar-width) !important; @@ -64,6 +71,13 @@ .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content { margin-left: var(--sidebar-width) !important; } + .mdc-top-app-bar--fixed-adjust { + {% if header_height.startswith('0') %} + padding-top: 0px; + {% else %} + padding-top: calc({{ header_height }} + 10px); /* Adjust the padding so sidebar / main isn't underneath */ + {% endif %} + } @@ -78,7 +92,7 @@ {% block contents %}
-