From f007f95c7a16bc8d77c26545c25552d90e90f7f6 Mon Sep 17 00:00:00 2001 From: Kenneth Bowen Date: Tue, 9 Jun 2020 12:08:49 -0500 Subject: [PATCH 01/21] adding a vanilla html template to panel --- panel/template/__init__.py | 1 + panel/template/vanilla/__init__.py | 34 +++++++++++++++ panel/template/vanilla/dark.css | 29 +++++++++++++ panel/template/vanilla/default.css | 3 ++ panel/template/vanilla/vanilla.css | 0 panel/template/vanilla/vanilla.html | 65 +++++++++++++++++++++++++++++ 6 files changed, 132 insertions(+) create mode 100644 panel/template/vanilla/__init__.py create mode 100644 panel/template/vanilla/dark.css create mode 100644 panel/template/vanilla/default.css create mode 100644 panel/template/vanilla/vanilla.css create mode 100644 panel/template/vanilla/vanilla.html diff --git a/panel/template/__init__.py b/panel/template/__init__.py index 65d1e73ce7..006e0e4157 100644 --- a/panel/template/__init__.py +++ b/panel/template/__init__.py @@ -2,3 +2,4 @@ from .bootstrap import BootstrapTemplate # noqa from .material import MaterialTemplate # noqa from .theme import DarkTheme, DefaultTheme # noqa +from .vanilla import VanillaTemplate #noqa \ No newline at end of file diff --git a/panel/template/vanilla/__init__.py b/panel/template/vanilla/__init__.py new file mode 100644 index 0000000000..9ba6f6b662 --- /dev/null +++ b/panel/template/vanilla/__init__.py @@ -0,0 +1,34 @@ +""" +Vanilla template +""" +import pathlib + +import param + +from ...layout import Card +from ..base import BasicTemplate +from ..theme import DarkTheme, DefaultTheme + + + +class VanillaTemplate(BasicTemplate): + """ + VanillaTemplate is built on top of Vanilla web components. + """ + + _css = pathlib.Path(__file__).parent / 'vanilla.css' + + _template = pathlib.Path(__file__).parent / 'vanilla.html' + +class VanillaDefaultTheme(DefaultTheme): + + css = param.Filename(default=pathlib.Path(__file__).parent / 'default.css') + + _template = VanillaTemplate + + +class VanillaDarkTheme(DarkTheme): + + css = param.Filename(default=pathlib.Path(__file__).parent / 'dark.css') + + _template = VanillaTemplate diff --git a/panel/template/vanilla/dark.css b/panel/template/vanilla/dark.css new file mode 100644 index 0000000000..12447b4af6 --- /dev/null +++ b/panel/template/vanilla/dark.css @@ -0,0 +1,29 @@ +body { + color: white; + background-color: #121212; +} + +#header { + background-color: #2f2f2f; +} + +#main { + color: white; + background-color: #121212; +} + +#sidebar { + color: white; + border-color: #2f2f2f !important; + background-color: #121212; +} + +.bk.card { + color: white; + background-color: #2f2f2f; +} + +.bk.card-header-row { + color: white; + background-color: #292929 !important; +} \ No newline at end of file diff --git a/panel/template/vanilla/default.css b/panel/template/vanilla/default.css new file mode 100644 index 0000000000..3373c95088 --- /dev/null +++ b/panel/template/vanilla/default.css @@ -0,0 +1,3 @@ +#header { + background-color: #00aa41; +} \ No newline at end of file diff --git a/panel/template/vanilla/vanilla.css b/panel/template/vanilla/vanilla.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/panel/template/vanilla/vanilla.html b/panel/template/vanilla/vanilla.html new file mode 100644 index 0000000000..35ae04f436 --- /dev/null +++ b/panel/template/vanilla/vanilla.html @@ -0,0 +1,65 @@ +{% extends base %} + + +{% block postamble %} + + +{% endblock %} + + +{% block contents %} +
+ + +
+ {% if nav %} + + {% endif %} + +
+ {% for doc in docs %} + {% for root in doc.roots %} + {% if "main" in root.tags %} + {{ embed(root) | indent(4) }} + {% endif %} + {% endfor %} + {% endfor %} +
+
+
+ + +{% endblock %} From be65b47792edf60e468d259544dc7da6ca390e71 Mon Sep 17 00:00:00 2001 From: Kenneth Bowen Date: Wed, 10 Jun 2020 13:16:33 -0500 Subject: [PATCH 02/21] updating css --- panel/template/vanilla/vanilla.css | 47 ++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/panel/template/vanilla/vanilla.css b/panel/template/vanilla/vanilla.css index e69de29bb2..dce697ffb1 100644 --- a/panel/template/vanilla/vanilla.css +++ b/panel/template/vanilla/vanilla.css @@ -0,0 +1,47 @@ +body { + height: 100vh + } + + #container { + padding:0px; + width: 100vw; + } + + #content { + height: 100vh; + margin: 0px; + width: 100vw; + display: inline-flex; + } + + #sidebar { + 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: 15vw; + } + + #sidebar.active { + margin-left: -16.7%; + } + + #main { + overflow-y: scroll; + width: 100vw; + } + + #sidebarCollapse { + background: none; + border: none; + } + + .bk-input-group{ + width: 12vw; + } + + a.navbar-brand { + padding-left: 10px; + } + + p.bk.card-button { + display: none; + } \ No newline at end of file From 951b4b5377934ad63792fe3cce3c38db36b46dcd Mon Sep 17 00:00:00 2001 From: Kenneth Bowen Date: Wed, 10 Jun 2020 13:17:37 -0500 Subject: [PATCH 03/21] fixing noqa declaration --- panel/template/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/template/__init__.py b/panel/template/__init__.py index 006e0e4157..83d8c4817b 100644 --- a/panel/template/__init__.py +++ b/panel/template/__init__.py @@ -2,4 +2,4 @@ from .bootstrap import BootstrapTemplate # noqa from .material import MaterialTemplate # noqa from .theme import DarkTheme, DefaultTheme # noqa -from .vanilla import VanillaTemplate #noqa \ No newline at end of file +from .vanilla import VanillaTemplate # noqa \ No newline at end of file From cc63e5e263c43979efc124feae91c0ee879d92d4 Mon Sep 17 00:00:00 2001 From: Kenneth Bowen Date: Thu, 18 Jun 2020 07:18:34 -0500 Subject: [PATCH 04/21] updating the vanilla template to have more complete styling, as well as changing the elements for the sidebar drawer to use vanilla features --- panel/template/vanilla/default.css | 2 +- panel/template/vanilla/vanilla.css | 65 ++++++++++++++++++++++++++++- panel/template/vanilla/vanilla.html | 48 +++++++++++---------- 3 files changed, 91 insertions(+), 24 deletions(-) diff --git a/panel/template/vanilla/default.css b/panel/template/vanilla/default.css index 3373c95088..aa0d3de1cf 100644 --- a/panel/template/vanilla/default.css +++ b/panel/template/vanilla/default.css @@ -1,3 +1,3 @@ #header { background-color: #00aa41; -} \ No newline at end of file +} diff --git a/panel/template/vanilla/vanilla.css b/panel/template/vanilla/vanilla.css index dce697ffb1..313b1deeec 100644 --- a/panel/template/vanilla/vanilla.css +++ b/panel/template/vanilla/vanilla.css @@ -1,3 +1,5 @@ +@import url(https://assets.ubuntu.com/v1/vanilla-framework-version-2.13.0.min.css); + body { height: 100vh } @@ -7,6 +9,21 @@ body { width: 100vw; } + #header{ + padding: 15px; + } + + .title{ + color: #fff; + padding-left: 10px; + text-decoration: none; + text-decoration-line: none; + text-decoration-style: initial; + text-decoration-color: initial; + font-weight: 400; + font-size: larger; + } + #content { height: 100vh; margin: 0px; @@ -18,6 +35,8 @@ body { 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: 15vw; + margin-top: 60px; + background-color: #222222; } #sidebar.active { @@ -27,6 +46,7 @@ body { #main { overflow-y: scroll; width: 100vw; + margin-left: 15vw; } #sidebarCollapse { @@ -44,4 +64,47 @@ body { p.bk.card-button { display: none; - } \ No newline at end of file + } + + body { + font-family: "Lato", sans-serif; + } + + .sidenav { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #eeeeee; + overflow-x: hidden; + transition: 0.5s; + padding-top: 60px; + } + + .sidenav a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + transition: 0.3s; + } + + .sidenav a:hover { + color: #f1f1f1; + } + + .sidenav .closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; + } + + @media screen and (max-height: 450px) { + .sidenav {padding-top: 15px;} + .sidenav a {font-size: 18px;} + } \ No newline at end of file diff --git a/panel/template/vanilla/vanilla.html b/panel/template/vanilla/vanilla.html index 35ae04f436..18bd6a47af 100644 --- a/panel/template/vanilla/vanilla.html +++ b/panel/template/vanilla/vanilla.html @@ -8,14 +8,15 @@ {% block contents %} -
-