Add vanilla template (#1421)

panel/template/__init__.py

@@ -2,4 +2,5 @@
 from .bootstrap import BootstrapTemplate # noqa
 from .material import MaterialTemplate # noqa
 from .theme import DarkTheme, DefaultTheme # noqa
-from .golden import GoldenTemplate # noqa
+from .golden import GoldenTemplate # noqa
+from .vanilla import VanillaTemplate # noqa

panel/template/vanilla/__init__.py

@@ -0,0 +1,45 @@
+"""
+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'
+
+    _modifiers = {
+        Card: {
+            'children': {'margin': (0, 10)}
+        }
+    }
+
+    def _apply_root(self, name, model, tags):
+        if 'main' in tags:
+            model.margin = (10, 15, 10, 10)
+
+
+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

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 {
+  color: white;
+  background-color: #292929 !important;
+}

panel/template/vanilla/default.css

@@ -0,0 +1,12 @@
+#header {
+  background-color: #00aa41;
+}
+
+#sidebar {
+  background-color: white;
+  box-shadow: 0px 0px 1px;
+}
+
+#sidebar-button {
+  color: white;
+}

panel/template/vanilla/vanilla.css

@@ -0,0 +1,116 @@
+body {
+    height: 100vh;
+    margin: 0px;
+  }
+
+  #container {
+    padding:0px;
+    width: 100vw;
+  }
+
+  #header{
+    padding: 10px;
+  }
+
+  .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: 28px;
+  }
+
+  .bk-canvas {
+    padding-right: 2px !important;
+  }
+
+  #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;
+    margin-top: 60px;
+  }
+
+  #sidebar.active {
+    margin-left: -16.7%;
+  }
+
+  #main {
+    overflow-y: scroll;
+    width: 100vw;
+    margin-left: 15vw;
+  }
+
+  #sidebarCollapse {
+    background: none;
+    border: none;
+  }
+
+  a.navbar-brand {
+    padding-left: 10px;
+  }
+
+  p.bk.card-button {
+    display: none;
+  }  
+
+  body {
+    font-family: "Lato", sans-serif;
+  }
+
+  .sidenav {
+    height: 100%;
+    width: 0;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #eeeeee;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 15px;
+  }
+
+  .bk.card-title {
+    position: absolute !important;
+  }
+
+  .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;}
+  }
+
+  .nav.flex-column {
+    padding-inline-start: 0px;
+  }

panel/template/vanilla/vanilla.html

@@ -0,0 +1,62 @@
+{% extends base %}
+
+<!-- goes in body -->
+{% block contents %}
+<div class="" id="container">
+  <nav class="" style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }}{% endif %}" id="header">
+    {% if nav %}
+      <span style="font-size:30px;cursor:pointer" onclick="closeNav()" id="sidebar-button">&#9776;</span>
+    {% endif %}
+    <a class="title" href="#">{{ app_title }}</a>
+    {% for doc in docs %}
+    {% for root in doc.roots %}
+    {% if "header" in root.tags %}
+    {{ embed(root) | indent(8) }}
+    {% endif %}
+    {% endfor %}
+    {% endfor %}
+  </nav>
+
+  <div class="row" id="content">
+    {% if nav %}
+    <div class="sidenav" id="sidebar">
+      <ul class="nav flex-column">
+        {% for doc in docs %}
+        {% for root in doc.roots %}
+        {% if "nav" in root.tags %}
+        {{ embed(root) | indent(8) }}
+        {% endif %}
+        {% endfor %}
+        {% endfor %}
+      </ul>
+    </div>
+    {% endif %}
+
+    <div class="" id="main">
+      {% for doc in docs %}
+      {% for root in doc.roots %}
+      {% if "main" in root.tags %}
+      {{ embed(root) | indent(4) }}
+      {% endif %}
+      {% endfor %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<script>
+  function openNav() {
+    document.getElementById("sidebar").style.width = "15vw";
+    document.getElementById("main").style.marginLeft = "15vw";
+    document.getElementById("sidebar-button").onclick=closeNav;
+    window.dispatchEvent(new Event("resize"))
+  }
+
+  function closeNav() {
+    document.getElementById("sidebar").style.width = "0";
+    document.getElementById("main").style.marginLeft = "0";
+    document.getElementById("sidebar-button").onclick=openNav;
+    window.dispatchEvent(new Event("resize"))
+  }
+</script>
+{% endblock %}