File: C:/Users/fred/anaconda3/Lib/site-packages/panel/template/fast/list/fast_list_template.html
{% extends "base/base.html" %}
{% block custom_css %}
<style>
:root {
--background-color: {{ style.background_color }};
--body-font: {{ style.font }};
--corner-radius: {{ style.corner_radius }};
--header-background: {{ style.header_background }};
--header-color: {{ style.header_color }};
--sidebar-width: {{ sidebar_width }}px;
}
body {
color: {{ style.color }};
background-color: var(--background-color);
font-family: var(--body-font);
}
#header a {
color: currentColor;
}
#header-design-provider {
--neutral-fill-hover: var(--header-background);
--neutral-fill-rest: var(--header-background);
--neutral-foreground-rest: var(--header-color);
--design-background-text-color: var(--header-color);
--design-background-color: var(--header-background);
background: var(--header-background);
color: var(--header-color);
}
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}
}
</style>
{% endblock %}
{% block custom_js %}
<!-- Fast Script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
const header_design = new window.fastDesignProvider("#header-design-provider");
const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
body_design.setLuminance({{ style.luminance }});
body_design.setAccentColor("{{ style.accent_base_color }}")
body_design.setNeutralColor("{{ style.neutral_color }}");
header_design.setLuminance("{{ style.header_luminance }}");
header_design.setAccentColor("{{ style.header_accent_base_color }}");
header_design.setNeutralColor("{{ style.header_neutral_color }}");
});
</script>
{% endblock %}
<!-- goes in body -->
{% block contents %}
<fast-design-system-provider id="body-design-provider" use-defaults>
<div id="container">
<fast-design-system-provider id="header-design-provider">
<nav id="header" {{ 'class="shadow"' if style.shadow else '' }} >
{% if nav or sidebar_footer %}
<span onclick="{{ 'openNav()' if collapsed_sidebar else 'closeNav()' }}" id="sidebar-button">
<div class="pn-bar"></div>
<div class="pn-bar"></div>
<div class="pn-bar"></div>
</span>
<fast-tooltip anchor="sidebar-button" position="right">
Toggle the Sidebar
</fast-tooltip>
{% endif %}
<div class="app-header">
{% if app_logo %}
<a class="navbar-brand app-logo" href="{{ site_url }}">
<img src="{{ app_logo }}" class="app-logo">
</a>
{% endif %}
{% if site_title %}
<a class="title" href="{{ site_url }}" > {{ site_title }}</a>
{% endif %}
{% if site_title and app_title%}
<span class="title">-</span>
{% endif %}
{% if app_title %}
<a class="title" href="" >{{ app_title }}</a>
{% endif %}
</div>
<div id="header-items">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "header" in root.tags %}
{{ embed(root) | indent(8) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% if theme_toggle %}
<div class="pn-toggle-theme">
<fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('{{ theme }}')" {% if theme=='default' %}checked{% endif %}>
<span slot="checked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
</span>
<span slot="unchecked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
</span>
</fast-switch>
<fast-tooltip anchor="theme-switch" position="bottom">
Toggle the Theme
</fast-tooltip>
</div>
{% endif %}
{% if busy %}
<div class="pn-busy-container" id="busy-container">
{{ embed(roots.busy_indicator) | indent(6) }}
</div>
<fast-tooltip anchor="busy-container" position="left">
Busy Indicator
</fast-tooltip>
{% endif %}
</nav>
</fast-design-system-provider>
<div class="row" id="content">
{% if nav or sidebar_footer %}
<div class="sidenav {{'hidden' if collapsed_sidebar else ''}}" id="sidebar">
<ul class="nav flex-column">
{% if nav %}
{% for doc in docs %}
{% for root in doc.roots %}
{% if "nav" in root.tags %}
{{ embed(root) | indent(8) }}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if sidebar_footer %}
{{ sidebar_footer }}
{% endif %}
</ul>
</div>
{% endif %}
<div class="main" id="main">
{% if main_max_width %}
<div class="main-margin" style="max-width: {{ main_max_width }};">
{% endif %}
{% for doc in docs %}
{% for root in doc.roots %}
{% if "main" in root.tags %}
<div class="card-margin {{ sizing_modes[root.id] }}">
{% if main_layout %}
<fast-card class="pn-wrapper">
{% else %}
<div class="pn-wrapper">
{% endif %}
<span class="fullscreen-button" onclick="toggleFullScreen(this)">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
</svg>
</span>
{{ embed(root) | indent(4) }}
{% if main_layout %}
</fast-card>
{% else %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
{% if main_max_width %}
</div>
{% endif %}
</div>
<fast-dialog id="pn-Modal" hidden>
<fast-button class="pn-modal-close" id="pn-closeModal">×</fast-button>
<div class="pn-modal-content">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "modal" in root.tags %}
{{ embed(root) | indent(10) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</fast-dialog>
</div>
</div>
</fast-design-system-provider>
<script type="text/javascript">
{{ js }}
</script>
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").classList.remove("hidden");
document.getElementById("sidebar-button").onclick = closeNav;
}
function closeNav() {
document.getElementById("sidebar").classList.add("hidden");
document.getElementById("sidebar-button").onclick = openNav;
}
var modal = document.getElementById("pn-Modal");
var span = document.getElementById("pn-closeModal");
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
{% block state_roots %}
{{ super() }}
{% endblock %}
{% endblock %}