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 %}
--- a/gallery/easel/route/view/schedule/static/style.css
+++ b/gallery/easel/route/view/schedule/static/style.css
@@ -1,25 +0,0 @@
-table.schedule-table {
-  width: 60rem;
-  margin: auto;
-  table-layout: auto
-}
-
-table.schedule-table tr {
-  border-bottom: 1px solid lightgray;
-}
-
-table.schedule-table td {
-  text-align: left;
-}
-
-table.schedule-table tr.live {
-  font-weight: bold;
-}
-
-table.schedule-table .title {
-  margin-top: 0.5rem;
-  font-style: italic;
-  font-weight: bold;
-  font-size: 120%;
-  background-color: lightgray;
-}
--- a/gallery/easel/route/view/schedule/templates/channel.html
+++ b/gallery/easel/route/view/schedule/templates/channel.html
@@ -11,18 +11,17 @@
      type="image/x-icon">
 {% endblock %}

-{% block header %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="../..">⬆️</a>
-<span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endblock %}
-
 {% block content %}
-<table class="schedule-table">
+<h4>
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="../..">⬆️</a>
+  <span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+</h4>
+<table class="table">
  <thead>
    <tr>
      <td></td>
@@ -32,7 +31,7 @@
  </thead>
  <tbody>
    {% for value in response.values %}
-    <tr class="{{'live' if value.live else ''}}">
+    <tr class="{{'table-success' if value.live else ''}}">
      <td>{{value.start.strftime('%H:%M')}}</td>
      <td>{{(value.end - value.start) | timedelta_format}}</td>
      <td>{{value.label}}</td>
--- a/gallery/easel/route/view/schedule/templates/index.html
+++ b/gallery/easel/route/view/schedule/templates/index.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}ТВ{% endblock %}
+{% block title %}TV program{% endblock %}
 {% block head %}
 {{ super() }}
 <link rel="stylesheet"
@@ -9,13 +9,18 @@
      type="image/x-icon">
 {% endblock %}

-{% block header %}Телепрограмма{% endblock %}
-
 {% block content %}
-<ul class="app-list">
-    <li style="margin-bottom: 0.25rem; font-weight: bold;"><a href="schedule/tag/today">Все</a></li>
-    {% for channel in channels %}
-    <li><a href="schedule/{{channel.id}}">{{channel.name}}</a></li>
-    {% endfor %}
-</ul>
+<h1>TV program</h1>
+<div class="list-group mb-5">
+  <a href="schedule/tag/today"
+     class="list-group-item list-group-item-action px-4">
+    <span class="fw-bold">Все</span>
+  </a>
+  {% for channel in channels %}
+  <a href="schedule/{{channel.id}}"
+     class="list-group-item list-group-item-action px-4">
+    <span class="text-primary">{{channel.name}}</span>
+  </a>
+  {% endfor %}
+</div>
 {% endblock %}
--- a/gallery/easel/route/view/schedule/templates/schedule.html
+++ b/gallery/easel/route/view/schedule/templates/schedule.html
@@ -11,19 +11,18 @@
      type="image/x-icon">
 {% endblock %}

-{% block header %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="..">⬆️</a>
-<span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endblock %}
-
 {% block content %}
+<h4>
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="..">⬆️</a>
+  <span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+</h4>
 <div>
-  <table class="schedule-table {{'live' if live else ''}}">
+  <table class="table">
    <thead>
      <tr>
        <td></td>
@@ -35,7 +34,7 @@
      {% for response in responses %}
      {% set values = (response.values|selectattr('live') if live else response.values)|list %}
      {% if values|length > 0 %}
-      <tr class="title">
+      <tr class="table-primary fs-4">
        <td colspan="3">
          <div>{{response.channel.name}}</div>
        </td>
@@ -43,7 +42,7 @@
        <td></td>
      </tr>
      {% for value in values %}
-      <tr class="{{'live' if not live and value.live else ''}}">
+      <tr class="{{'table-success' if not live and value.live else ''}}">
        <td>{{value.start.strftime('%H:%M')}}</td>
        <td>{{(value.end - value.start) | timedelta_format}}</td>
        <td>{{value.label}}</td>
--- a/gallery/easel/route/view/weather/static/style.css
+++ b/gallery/easel/route/view/weather/static/style.css
@@ -1,16 +1,15 @@
 .header {
-  font-size: 1rem;
+  font-size: 0.9rem;
  text-align: left;
  padding-top: 0.25rem;
 }

 .date {
-  font-size: 1.5rem;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(1, 0, 0, 0.1) !important;
 }

 .date.now {
-  background: rgba(0, 128, 255, 0.2);
+  background: rgba(0, 128, 255, 0.2) !important;
 }

 .date .value a {
@@ -59,7 +58,7 @@
 }

 .pressure {
-  padding: 0;
+  padding: 0 !important;
 }

 .pressure .value {
--- a/gallery/easel/route/view/weather/templates/index.html
+++ b/gallery/easel/route/view/weather/templates/index.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Погода{% endblock %}
+{% block title %}Weather{% endblock %}
 {% block head %}
 {{ super() }}
 <link rel="stylesheet"
@@ -9,27 +9,73 @@
      type="image/x-icon">
 {% endblock %}

-{% block header %}Погода{% endblock %}
-
 {% block content %}
+<h1>Weather</h1>
 <form action=""
      method="get"
-      style="margin: 0 auto 1rem;">
-  <input id="query"
-         name="query">
-  <button type="submit">Search</button>
+      class="mb-4">
+  <div class="input-group mb-3">
+    <input type="text"
+           class="form-control"
+           id="query"
+           name="query"
+           placeholder="Enter the city name">
+    <button class="btn btn-primary"
+            type="submit">Search</button>
+  </div>
 </form>
-<ul class="app-list">
+<ul id="locations"
+    class="list-group mb-5">
  {% for location in locations %}
-  <li>
-    <a href="weather/{{location.id}}">
-      <span>{{location.name}}</span>
-      <span style="font-size: 70%; margin-left: 0.5rem;">
-        {{location.country}}, {{location.district}}, {{location.subdistrict}}
-      </span>
-      <span></span>
-    </a>
-  </li>
+  <a href="weather/{{location.id}}"
+     class="list-group-item list-group-item-action px-4"
+     onclick="saveLocation({id:'{{location.id}}', name:'{{location.name}}'});">
+    <span class="text-primary">{{location.name}}</span>
+    <span class="small ms-1 text-secondary">
+      {{location.country}}, {{location.district}}, {{location.subdistrict}}
+    </span>
+    <span></span>
+  </a>
  {% endfor %}
 </ul>
+<script>
+  (function () {
+    document.loadLocations = () => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      const container = document.querySelector('#locations');
+      container.innerHTML = '';
+      for (const [id, name] of Object.entries(locations)) {
+        const element = document.createElement('a');
+        element.href = `weather/${id}`;
+        element.className = 'list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start';
+        element.innerHTML = `
+        <span class="text-primary me-auto">${name}</span>
+        <span class="text-danger" onclick="removeLocation('${id}'); event.preventDefault();">&#x2715;</span>
+        `;
+        container.appendChild(element);
+      }
+    }
+
+    document.saveLocation = (location) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      locations[location.id] = location.name;
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+    }
+
+    document.removeLocation = (id) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      delete locations[id];
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+      document.loadLocations();
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const searchQuery = params.get('query');
+    if (searchQuery) {
+      document.querySelector('#query').value = searchQuery;
+    } else {
+      document.loadLocations();
+    }
+  })();
+</script>
 {% endblock %}
--- a/gallery/easel/route/view/weather/templates/weather.html
+++ b/gallery/easel/route/view/weather/templates/weather.html
@@ -9,24 +9,23 @@
      type="image/x-icon">
 {% endblock %}

-{% block header %}
-{% if response.period == 'day' %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="../tag/days-10">⬆️</a>
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endif %}
-{% if response.period == 'days' %}
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-{% endif %}
-{% endblock %}
-
 {% block content %}
-<div>
-  <table style="margin: auto;">
+<h4>
+  {% if response.period == 'day' %}
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="../tag/days-10">⬆️</a>
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+  {% endif %}
+  {% if response.period == 'days' %}
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  {% endif %}
+</h4>
+<div class="table-responsive">
+  <table class="table table-borderless table-compact text-center w-auto" style="font-size: 130%;">
    <tbody>
      <!-- date -->
      <tr>