From 00c19be3051e5346f2aa3b7ff3e0ad2977822602 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 22 Feb 2023 15:11:31 +0100 Subject: [PATCH 1/5] Various CSS fixes --- panel/template/bootstrap/bootstrap.css | 4 ++++ panel/template/fast/fast.css | 2 ++ panel/template/material/material.css | 14 +++----------- panel/theme/css/bootstrap.css | 6 +++++- panel/theme/css/fast.css | 11 +++++------ panel/theme/css/material.css | 14 +++++++------- 6 files changed, 26 insertions(+), 25 deletions(-) diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css index f9c3a1703f..9c2860199c 100644 --- a/panel/template/bootstrap/bootstrap.css +++ b/panel/template/bootstrap/bootstrap.css @@ -34,6 +34,10 @@ html { background-color: var(--bs-surface-bg); } +::-webkit-scrollbar-corner { + background-color: var(--bs-surface-bg); +} + body { color: var(--bs-body-color); background-color: var(--bs-body-bg); diff --git a/panel/template/fast/fast.css b/panel/template/fast/fast.css index 1664ab40d8..267ceba04d 100644 --- a/panel/template/fast/fast.css +++ b/panel/template/fast/fast.css @@ -201,6 +201,8 @@ img.app-logo { .nav.flex-column { padding-inline-start: 0px; + margin-block-start: 0; + margin-block-end: 0; } .pn-modal-close { diff --git a/panel/template/material/material.css b/panel/template/material/material.css index 94cc27b3d8..728c10ff10 100644 --- a/panel/template/material/material.css +++ b/panel/template/material/material.css @@ -121,8 +121,10 @@ img.app-logo { } .main-content { + height: calc(100vh - 70px); overflow-y: scroll; overflow-x: auto; + padding: 5px 25px 0px 15px; } #header { @@ -132,7 +134,7 @@ img.app-logo { #header-items { width: 100%; - margin-left: 15px; + margin-left: 25px; } .pn-busy-container { @@ -145,16 +147,6 @@ img.app-logo { overflow-x: hidden; } -.mdc-drawer__content, .main-content { - padding: 12px; -} - -.main-content { - height: calc(100vh - 88px); - max-height: calc(100vh - 88px); - padding-right: 32px; -} - .pn-modal { overflow-y: scroll; width: 100%; diff --git a/panel/theme/css/bootstrap.css b/panel/theme/css/bootstrap.css index 99de50f521..03f63b0f44 100644 --- a/panel/theme/css/bootstrap.css +++ b/panel/theme/css/bootstrap.css @@ -65,6 +65,10 @@ button.accordion-header { border-radius: 0; } +.card-header > .card-header-row { + margin-left: 15px; +} + :host(.card-title) h1, :host(.card-title) h2, :host(.card-title) h3, :host(.card-title) h4, :host(.card-title) h5, :host(.card-title) h6 { margin-block-end: 0; @@ -622,7 +626,7 @@ input[type="radio"] + span { background-color: unset; } -.tabulator .tabulator-headers, .tabulator .tabulator-header .tabulator-col { +div .tabulator .tabulator-headers, div .tabulator .tabulator-header .tabulator-col { background-color: var(--bs-body-bg); color: var(--bs-body-color); } diff --git a/panel/theme/css/fast.css b/panel/theme/css/fast.css index f2e31513bc..dcf3a3d898 100644 --- a/panel/theme/css/fast.css +++ b/panel/theme/css/fast.css @@ -129,12 +129,7 @@ canvas, img { /* Card */ :host(.accordion), :host(.card) { - background-color: var(--neutral-fill-rest); -} - -.card { - background-color: var(--neutral-fill-rest); - color: var(--neutral-foreground-rest); + background-color: var(--neutral-fill-layer-rest); } .card-header, .accordion-header { @@ -149,6 +144,10 @@ canvas, img { margin: 1em; } +.card-header > .card-header-row { + margin-left: 15px; +} + .card-button { display: block; margin-left: 0.5em; diff --git a/panel/theme/css/material.css b/panel/theme/css/material.css index cba4e72a3a..6da092e2e2 100644 --- a/panel/theme/css/material.css +++ b/panel/theme/css/material.css @@ -16,25 +16,26 @@ :host(.mdc-card), :host(.accordion) { color: var(--mdc-theme-on-surface); - background-color: var(--mdc-theme-surface); + background-color: var(--mdc-theme-background); box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px; } :host(.accordion) button, :host(.mdc-card) button { - color: var(--mdc-theme-on-surface); -} - -:host(.mdc-card) { - border-radius: 4px; + color: var(--mdc-theme-on-background); } .card-header, .accordion-header { background-color: var(--mdc-theme-surface); border: unset; + border-radius: 0; border-bottom: 0.2px solid var(--mdc-theme-surface); padding: 0px 6px; } +.card-header > .card-header-row { + margin-left: 15px; +} + button.mdc-button.mdc-card-button { color: transparent; height: 50px; @@ -50,7 +51,6 @@ button.mdc-button.mdc-card-button { margin-block-start: 0; } - /* Tabs styling */ .bk-header { From a7138c0e78b8259709e36702d7a31d7ca95d4b31 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 22 Feb 2023 15:11:58 +0100 Subject: [PATCH 2/5] Card adjustments --- panel/models/card.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/panel/models/card.ts b/panel/models/card.ts index b173af58ca..27cd1f5809 100644 --- a/panel/models/card.ts +++ b/panel/models/card.ts @@ -39,6 +39,8 @@ export class CardView extends ColumnView { this._apply_classes(this.model.classes) this._apply_visible() + this.class_list.add(...this.css_classes()) + const {button_css_classes, header_color, header_tag, header_css_classes} = this.model const header_background = this.header_background @@ -67,14 +69,21 @@ export class CardView extends ColumnView { header_el.style.color = header_color != null ? header_color : "" this.shadow_el.appendChild(header_el) header.render() + header.after_render() } for (const child_view of this.child_views.slice(1)) { if (!this.model.collapsed) this.shadow_el.appendChild(child_view.el) child_view.render() + child_view.after_render() } } + async update_children(): Promise { + this.render() + this.invalidate_layout() + } + _toggle_button(): void { this.model.collapsed = !this.model.collapsed } From 3965216c21e6007caaf80764ba2b00a8758eb33a Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 22 Feb 2023 15:12:09 +0100 Subject: [PATCH 3/5] FlexBox fixes --- panel/layout/flex.py | 5 +++++ panel/layout/flexbox.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/panel/layout/flex.py b/panel/layout/flex.py index 9a6b487fd2..274c278887 100644 --- a/panel/layout/flex.py +++ b/panel/layout/flex.py @@ -49,6 +49,11 @@ class FlexBox(ListLike, ReactiveHTML): 'nowrap', 'wrap', 'wrap-reverse'], doc=""" Whether and how to wrap items in the flex container.""") + margin = param.Parameter(default=0, doc=""" + Allows to create additional space around the component. May + be specified as a two-tuple of the form (vertical, horizontal) + or a four-tuple (top, right, bottom, left).""") + justify_content = param.Selector(default='flex-start', objects=[ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'start', 'end', 'left', 'right'], doc=""" diff --git a/panel/layout/flexbox.html b/panel/layout/flexbox.html index e36c91a528..8caeaf4ed1 100644 --- a/panel/layout/flexbox.html +++ b/panel/layout/flexbox.html @@ -1,6 +1,6 @@
{% for obj in objects %} -
+
${objects[{{ loop.index0 }}]}
{% endfor %} From ca1ab6f274c99e5f8d3fae26111e0f9f0e854a13 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 22 Feb 2023 15:12:27 +0100 Subject: [PATCH 4/5] ReactiveHTML fixes --- panel/models/reactive_html.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/models/reactive_html.ts b/panel/models/reactive_html.ts index f29a909979..da4e7e57d4 100644 --- a/panel/models/reactive_html.ts +++ b/panel/models/reactive_html.ts @@ -240,7 +240,7 @@ export class ReactiveHTMLView extends HTMLBoxView { this._apply_classes(this.model.classes) this._apply_visible() - this.container = div() + this.container = div({style: "display: contents;"}) this.shadow_el.append(this.container) this._update() this._render_children() From b7141649bb24889cd1cf862d48dc795c5989f3cf Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 22 Feb 2023 15:13:30 +0100 Subject: [PATCH 5/5] Adjust stylesheet URLs --- panel/io/resources.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/panel/io/resources.py b/panel/io/resources.py index f035706ad0..30dcae3660 100644 --- a/panel/io/resources.py +++ b/panel/io/resources.py @@ -187,6 +187,8 @@ def patch_stylesheet(stylesheet, dist_url): url = stylesheet.url if not url.startswith('http') and not url.startswith(dist_url): patched_url = f'{dist_url}{url}' + elif url.startswith(CDN_DIST+dist_url) and dist_url != CDN_DIST: + patched_url = url.replace(CDN_DIST+dist_url, dist_url) elif url.startswith(CDN_DIST) and dist_url != CDN_DIST: patched_url = url.replace(CDN_DIST, dist_url) else: