-
-
Notifications
You must be signed in to change notification settings - Fork 477
/
material.html
162 lines (146 loc) · 5.25 KB
/
material.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
{% extends base %}
{% block preamble %}
{% if app_favicon %}<link rel="icon" href="{{ app_favicon }}" type="{{favicon_type}}">{% endif %}
{% if meta_name %}<meta name="name" content="{{ meta_name }}">{% endif %}
{% if meta_description %}<meta name="description" content="{{ meta_description }}">{% endif %}
{% if meta_keywords %}<meta name="keywords" content="{{ meta_keywords }}">{% endif %}
{% if meta_author %}<meta name="author" content="{{ meta_author }}">{% endif %}
{% if meta_refresh %}<meta http-equiv="refresh" content="{{ meta_refresh }}">{% endif %}
{% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
{% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
{% endblock %}
{% block postamble %}
<!-- Template CSS -->
{% for css in template_resources['css'].values() %}
<link rel="stylesheet" href="{{ css }}">
{% endfor %}
{% for src in template_resources['extra_css'] %}
<link rel="stylesheet" href="{{ src }}">
{% endfor %}
{% for raw_css in template_resources['raw_css'] %}
<style type="text/css">
{{ raw_css }}
</style>
{% endfor %}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<style>
.mdc-drawer {
width: {{ sidebar_width }}px !important;
}
.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
margin-left: {{ sidebar_width }}px !important;
}
</style>
<!-- Template JS -->
{% for src in template_resources['js'].values() %}
<script src="{{ src }}"></script>
{% endfor %}
{% for src in template_resources['js_modules'].values() %}
<script src="{{ src }}" type="module"></script>
{% endfor %}
{% endblock %}
<!-- goes in body -->
{% block contents %}
<div class="mdc-typography" id="container">
<header class="mdc-top-app-bar app-bar mdc-top-app-bar--fixed" style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }} !important;{% endif %}" id="header">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
{% if nav %}
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
{% endif %}
<div class="title-bar">
<span class="mdc-top-app-bar__title app-header">
{% if app_logo %}<a 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 %}
</span>
<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>
</div>
</section>
{% if busy %}
<div class="pn-busy-container">
{{ embed(roots.busy_indicator) | indent(6) }}
</div>
{% endif %}
</div>
</header>
{% if nav %}
<aside class="mdc-drawer mdc-top-app-bar--fixed-adjust mdc-drawer--dismissible mdc-drawer--open" id="sidebar">
<div class="mdc-drawer__content">
<div class="mdc-list">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "nav" in root.tags %}
{{ embed(root) | indent(8) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</aside>
{% endif %}
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main">
{% if main_max_width %}
<div style="margin-left: auto; margin-right: auto;max-width: {{main_max_width}}">
{% endif %}
{% for doc in docs %}
{% for root in doc.roots %}
{% if "main" in root.tags %}
{{ embed(root) | indent(4) }}
{% endif %}
{% endfor %}
{% endfor %}
{% if main_max_width %}
</div>
{% endif %}
</main>
<div id="pn-Modal" class="mdc-dialog">
<div class="mdc-dialog__container">
<div class="mdc-dialog__surface" role="alertdialog" aria-modal="true">
<div class="mdc-dialog__content" id="my-dialog-content">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "modal" in root.tags %}
{{ embed(root) | indent(4) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
<script>
{% if nav %}
var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('header'));
topAppBar.setScrollTarget(document.getElementById('main'));
topAppBar.listen('MDCTopAppBar:nav', function() {
drawer.open = !drawer.open;
// Ensure bokeh layout recomputes layout
window.dispatchEvent(new Event('resize'));
});
drawer.open = true;
{% endif %}
var modal_el = document.getElementById("pn-Modal");
var modal = new mdc.dialog.MDCDialog(modal_el);
window.onclick = function(event) {
if (event.target == modal_el) {
modal.close();
}
}
</script>
{{ embed(roots.js_area) }}
{{ embed(roots.actions) }}
{{ embed(roots.location) }}
{% endblock %}