feat(easel): add bootstrap

2026-04-22 21:42:39 +03:00
parent 94870a5c86
commit ecb574e286
27 changed files with 1627 additions and 240 deletions
--- a/gallery/easel/route/view/common/init.py
+++ b/gallery/easel/route/view/common/init.py
@@ -6,6 +6,7 @@ from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates

+from gallery.util import root_path
 from gallery.version import __version__


@@ -15,13 +16,15 @@ class Section(NamedTuple):


 SECTIONS = [
-    Section("weather", "Погода"),
-    Section("schedule", "Телепрограмма"),
+    Section("weather", "Weather"),
+    Section("schedule", "TV program"),
 ]


 def mount(app: FastAPI):
    base_dir = Path(__file__).parent
+    print("!", root_path / "static/dist")
+    app.mount("/static/main", StaticFiles(directory=root_path / "static/dist"))
    app.mount("/static/common", StaticFiles(directory=base_dir / "static"))
    templates = Jinja2Templates(directory=base_dir / "templates")

--- a/gallery/easel/route/view/common/static/style.css
+++ b/gallery/easel/route/view/common/static/style.css
@@ -1,84 +1,3 @@
-/*
-base
-*/
-body {
-  font-size: 1.5rem;
-}
-
-h3 {
-  margin: 0.5rem 0;
-}
-
-/*
-table
-*/
-table {
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-table,
-th,
-td {
-  text-align: center;
-}
-
-td {
-  padding: 0.1rem 0.4rem;
-}
-
-/*
-a.button
-*/
-a.button {
-  text-decoration: none;
-  color: inherit;
-}
-
-.button.disabled {
-  pointer-events: none;
-  cursor: default;
-  color: gray;
-  filter: grayscale(100%);
-}
-
-/*
-app
-*/
-.app-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-
-.app-menu {
-  display: flex;
-  flex-direction: column;
-  margin: 0.5rem;
-}
-
-.app-content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.app-header {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-.app-link-home > * {
-  width: 2rem;
-  height: 2rem;
-  background-image: url("/static/common/gallery.png");
-  background-size: contain;
-}
-
 .icon {
  display: inline-block;
  width: 2rem;
@@ -86,29 +5,20 @@ app
  background-size: contain;
 }

-ul.app-list {
-  list-style: none;
-  padding-left: 0;
-  width: 30rem;
-  margin: auto;
+.widget .app {
+  padding: 0.5rem !important;
 }

-ul.app-list > li {
-  border: 1px solid lightgrey;
+.widget header {
+  display: none !important;
 }

-ul.app-list > li > a {
+.widget main {
  display: flex;
-  gap: 0.25rem;
-  padding: 0.5rem 2rem;
-  text-decoration: none;
-  color: inherit;
+  flex-direction: column;
+  align-items: center;
 }

-ul.app-list > li:hover {
-  border-color: rgb(125, 125, 255);
-}
-
-ul.app-list > li:hover > a {
-  color: rgb(125, 125, 255);
+.widget footer {
+  display: none !important;
 }
--- a/gallery/easel/route/view/common/templates/base.html
+++ b/gallery/easel/route/view/common/templates/base.html
@@ -9,6 +9,10 @@
  <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
  <title>{% block title %}{% endblock %}</title>
+  <link rel="stylesheet"
+        href="/static/main/gallery-static.css?v={{version}}">
+  <script type="module"
+          src="/static/main/gallery-static.js?v={{version}}"></script>
  <link rel="stylesheet"
        href="/static/common/style.css?v={{version}}">
  <link rel="icon"
@@ -17,22 +21,83 @@
  {% endblock %}
 </head>

-<body class="app-container">
-  <div class="app-menu">
-    <a class="app-link-home"
-       href="/">
-      <div></div>
-    </a>
-  </div>
-  <div class="app-content">
-    <h3 class="app-header">
-      {% block header %}{% endblock %}</span>
-    </h3>
-    {% block content %}{% endblock %}
-    <div class="app-footer">
-      {% block footer %}{% endblock %}
-    </div>
+<body>
+  <div class="app col-lg-8 mx-auto p-3 py-md-5">
+    <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
+      <a href="/"
+         class="d-flex align-items-center text-dark text-decoration-none">
+        <div class="icon me-2"
+             style="background-image: url(/static/common/gallery.png);"></div>
+        <span class="fs-4 text-body">API Gallery</span>
+      </a>
+      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
+        <li class="nav-item dropdown">
+          <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+                  id="bd-theme"
+                  type="button"
+                  aria-expanded="false"
+                  data-bs-toggle="dropdown"
+                  aria-label="Toggle theme (auto)">
+            <i class="bi me-2 opacity-50 theme-icon-active"></i>
+            <span class="d-lg-none ms-2"
+                  id="bd-theme-text">Toggle theme</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end"
+              aria-labelledby="bd-theme-text">
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center"
+                      data-bs-theme-value="light"
+                      aria-pressed="false">
+                <i class="bi bi-sun-fill me-2 opacity-50 theme-icon"></i>
+                Light
+              </button>
+            </li>
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center"
+                      data-bs-theme-value="dark"
+                      aria-pressed="false">
+                <i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></i>
+                Dark
+              </button>
+            </li>
+            <li>
+              <button type="button"
+                      class="dropdown-item d-flex align-items-center active"
+                      data-bs-theme-value="auto"
+                      aria-pressed="true">
+                <i class="bi bi-circle-half me-2 opacity-50 theme-icon"></i>
+                Auto
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </header>
+    <main>
+      {% block content %}{% endblock %}
+    </main>
+    <footer class="pt-5 my-5 text-muted border-top">
+      Created by shmyga &middot; &copy; 2026
+    </footer>
  </div>
+  <script>
+    (function () {
+      document.toggleTheme = () => {
+        const current = document.documentElement.getAttribute('data-bs-theme');
+        const next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-bs-theme', next);
+        localStorage.setItem('theme', next);
+      };
+
+      const params = new URLSearchParams(window.location.search);
+      const widget = params.get('widget') || window.location.hostname.startsWith('weather');
+      if (widget) {
+        document.body.classList.add('widget');
+      }
+    }());
+  </script>
 </body>

 </html>
--- a/gallery/easel/route/view/common/templates/root_index.html
+++ b/gallery/easel/route/view/common/templates/root_index.html
@@ -1,21 +1,24 @@
 {% extends "base.html" %}
-{% block title %}Информация{% endblock %}
+{% block title %}Index{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}

-{% block header %}Информация{% endblock %}
-
 {% block content %}
-<ul class="app-list">
+<h1>View</h1>
+<div class="list-group mb-5">
  {% for section in sections %}
-  <li>
-    <a href="{{section.link}}">
-      <span class="icon"
+  <a href="{{section.link}}"
+     class="list-group-item list-group-item-action px-4">
+    <div class="d-flex w-100">
+      <span class="icon me-2"
            style="background-image: url(/static/{{section.link}}/{{section.link}}.png);"></span>
-      <span>{{section.title}}</span>
-    </a>
-  </li>
+      <h4>{{section.title}}</h4>
+    </div>
+  </a>
  {% endfor %}
-</ul>
+</div>
+<hr class="col-3 col-md-2 mb-5">
+<h1>Docs</h1>
+<a href="/docs" target="_blank"><h4>Swagger</h4></a>
 {% endblock %}