Files
Bambu-Run/bambu_run/templates/bambu_run/base.html
RunLit 6376b4cc94 docker deployment patch with verification and broken UI fixes (#1)
* bypass bambu cloud api opencb requirement

* project root add to managepy

* update instruction to do migration; mqtt login more verbose

* migrations up to date model

* use migrations from django migrate

* print full token to copy paste

* allow local network hosts

* added side bar toggle

* removed standalone css from dashboard css

* added icon and fixed text trunction issue

* fixed chart missing whitenoise and not rendering

* aded favicon and fixed ui issues
2026-02-21 15:03:16 +11:00

148 lines
6.6 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html lang="en" data-coreui-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Apply saved theme immediately to prevent flash -->
<script>
(function(){
var t = localStorage.getItem('bambu-run-theme') || 'dark';
if (t === 'auto') t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-coreui-theme', t);
})();
</script>
<title>{% block title %}Bambu Run{% endblock %}</title>
<!-- CoreUI 5.3 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.3.0/dist/css/coreui.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@coreui/icons@3.0.1/css/all.min.css" rel="stylesheet">
<!-- Bootstrap Icons (for bi-vinyl filament icon) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
{% block extra_css %}{% endblock %}
{% block extra_head %}{% endblock %}
<style>
/* Sidebar brand sizing and padding */
.sidebar-brand {
padding: 1rem 1rem 1.25rem;
font-size: 1.25rem;
font-weight: 700;
min-height: 56px;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
/* Hide brand text when sidebar is narrow */
.sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-text {
display: none;
}
/* Gap between brand icon and text */
.sidebar-brand img + .sidebar-brand-text {
margin-left: 0.5rem;
}
/* Sidebar collapse layout — standalone only */
.wrapper { transition: margin-left 0.15s ease-out; }
@media (min-width: 992px) {
.sidebar ~ .wrapper { margin-left: 256px; }
.sidebar.sidebar-narrow ~ .wrapper,
.sidebar.sidebar-narrow-unfoldable ~ .wrapper { margin-left: 56px; }
}
@media (max-width: 991.98px) {
.sidebar ~ .wrapper { margin-left: 0; }
}
/* Theme toggle icon visibility — driven by data-coreui-theme on <html> */
[data-coreui-theme="dark"] .theme-icon-light { display: none; }
[data-coreui-theme="light"] .theme-icon-dark { display: none; }
</style>
</head>
<body>
<div class="sidebar sidebar-dark sidebar-fixed" id="sidebar">
<div class="sidebar-brand d-none d-md-flex">
{% block sidebar_brand_icon %}{% endblock %}
<span class="sidebar-brand-text">Bambu Run</span>
</div>
<ul class="sidebar-nav" data-coreui="navigation">
<li class="nav-item">
<a class="nav-link" href="{% url 'bambu_run:printer_dashboard' %}">
<svg class="nav-icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-expand-down"></use></svg>
3D Printer
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'bambu_run:filament_list' %}">
<i class="nav-icon bi bi-vinyl"></i>
Filament Inventory
</a>
</li>
</ul>
<div class="sidebar-footer border-top d-flex">
<button class="sidebar-toggler" type="button"></button>
</div>
</div>
<div class="wrapper d-flex flex-column min-vh-100">
<header class="header header-sticky p-0 mb-4">
<div class="container-fluid px-4">
<button class="header-toggler d-lg-none" type="button"
onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
<svg class="icon icon-lg"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-menu"></use></svg>
</button>
<ul class="header-nav ms-auto">
{% block theme_toggle %}
<li class="nav-item">
<button class="nav-link" id="themeToggle" type="button">
<svg class="icon icon-lg theme-icon-dark"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-moon"></use></svg>
<svg class="icon icon-lg theme-icon-light"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-sun"></use></svg>
</button>
</li>
{% endblock %}
{% block logout_nav %}{% endblock %}
</ul>
</div>
</header>
<div class="body flex-grow-1">
<div class="container-lg px-4">
{% block content %}{% endblock %}
</div>
</div>
<footer class="footer px-4">
<div>Bambu Run</div>
<div class="ms-auto">Powered by <a href="https://github.com/RunLit/Bambu-Run.git">Bambu Run</a></div>
</footer>
</div>
<!-- CoreUI 5.3 JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.3.0/dist/js/coreui.bundle.min.js"></script>
<script>
// Sidebar narrow-toggle with state persistence
const sidebarToggler = document.querySelector('.sidebar-toggler');
const sidebar = document.querySelector('#sidebar');
if (sidebarToggler && sidebar) {
if (localStorage.getItem('bambu-run-sidebar-narrow') === 'true') {
sidebar.classList.add('sidebar-narrow-unfoldable');
}
sidebarToggler.addEventListener('click', (e) => {
e.preventDefault(); e.stopPropagation();
const isNarrow = sidebar.classList.contains('sidebar-narrow-unfoldable');
sidebar.classList.toggle('sidebar-narrow-unfoldable', !isNarrow);
localStorage.setItem('bambu-run-sidebar-narrow', String(!isNarrow));
});
}
</script>
<script>
// Simple 2-state theme toggle (standalone default)
const themeToggle = document.getElementById('themeToggle');
if (themeToggle) {
themeToggle.addEventListener('click', function() {
const current = document.documentElement.getAttribute('data-coreui-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-coreui-theme', next);
localStorage.setItem('bambu-run-theme', next);
});
}
</script>
{% block extra_js %}{% endblock %}
</body>
</html>