feat(view): fix index page

2026-07-02 02:43:43 +03:00
parent 4fdb7e9717
commit a3fab92e3d
10 changed files with 50 additions and 29 deletions
--- a/gallery/easel/route/api/init.py
+++ b/gallery/easel/route/api/init.py
@@ -2,6 +2,6 @@ from fastapi import APIRouter

 from . import schedule, weather

-router = APIRouter(prefix="/api", tags=["API"])
+router = APIRouter(prefix="/api")
 router.include_router(weather.router)
 router.include_router(schedule.router)
--- a/gallery/easel/route/api/schedule.py
+++ b/gallery/easel/route/api/schedule.py
@@ -7,7 +7,7 @@ from gallery.easel.depends.schedule import ScheduleApiDepends
 from gallery.sketch.schedule.api import ScheduleApi
 from gallery.sketch.schedule.model import Channel, Schedule

-router = APIRouter(prefix="/schedule")
+router = APIRouter(prefix="/schedule", tags=["Schedule"])


@router.get("/providers")
--- a/gallery/easel/route/api/weather.py
+++ b/gallery/easel/route/api/weather.py
@@ -7,7 +7,7 @@ from gallery.easel.depends.weather import WeatherApiDepends
 from gallery.sketch.weather.api import WeatherApi
 from gallery.sketch.weather.model import Location, WeatherResponse

-router = APIRouter(prefix="/weather")
+router = APIRouter(prefix="/weather", tags=["Weather"])


@router.get("/providers")
--- a/gallery/easel/route/view/common/templates/base.html
+++ b/gallery/easel/route/view/common/templates/base.html
@@ -30,9 +30,6 @@
        {% block header %}{% endblock %}
      </div>
      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-        <li class="nav-item me-2">
-          <span class="nav-link">{{ version }}</span>
-        </li>
        <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-language"
@@ -115,8 +112,11 @@
      {% block content %}{% endblock %}
    </main>
    {% if not is_widget %}
-    <footer class="pt-5 my-5 text-muted border-top">
-      Created by shmyga &middot; &copy; 2026
+    <footer class="app-footer pt-5 my-5 text-muted border-top">
+      <div class="d-flex justify-content-between">
+        <span>Created by shmyga &middot; &copy; 2026</span>
+        <span>v{{ version }}</span>
+      </div>
    </footer>
    {% endif %}
  </div>
--- a/gallery/easel/route/view/root/templates/root_index.html
+++ b/gallery/easel/route/view/root/templates/root_index.html
@@ -6,21 +6,28 @@

 {% block content %}
 <h1>{{_("View")}}</h1>
-<div class="list-group mb-5">
+<div class="list-group mb-3">
  {% for section in sections %}
-  <a href="{{section.link}}"
-     class="list-group-item list-group-item-action px-4">
-    <app-link href="{{section.link}}"
-              icon="{{section.icon}}">
-      {{_(section.title)}}
-    </app-link>
-  </a>
+  <app-link href="{{section.link}}"
+            icon="{{section.icon}}"
+            class="list-group-item list-group-item-action">
+    {{_(section.title)}}
+  </app-link>
  {% endfor %}
 </div>
-<hr class="col-3 col-md-2 mb-5">
 <h1>{{_("Docs")}}</h1>
-<a href="/docs"
-   target="_blank">
-  <h4>Swagger</h4>
-</a>
+<div class="list-group mb-3">
+  <app-link href="/docs"
+            target="_blank"
+            icon="file-earmark-text"
+            class="list-group-item list-group-item-action">
+    Swagger UI
+  </app-link>
+  <app-link href="/redoc"
+            target="_blank"
+            icon="file-earmark-text"
+            class="list-group-item list-group-item-action">
+    ReDoc
+  </app-link>
+</div>
 {% endblock %}
--- a/static/src/components.ts
+++ b/static/src/components.ts
@@ -1,10 +1,10 @@
 class AppLinkElement extends HTMLElement {
-  static observedAttributes = ["icon", "href"];
+  static observedAttributes = ["icon", "href", "target"];

  constructor() {
    super();
    this.innerHTML = `
-    <a href="${this.getAttribute("href")}"
+    <a href="${this.getAttribute("href")}" target="${this.getAttribute("target") || ""}"
      class="d-flex align-items-center text-body text-decoration-none">
      <span class="fs-4">
        <span class="bi bi-${this.getAttribute("icon")} me-1"></span>
--- a/static/src/lib/bootstrap-icons.scss
+++ b/static/src/lib/bootstrap-icons.scss
@@ -42,4 +42,7 @@
  &.bi-arrow-up-square {
    mask-image: url(bootstrap-icons/icons/arrow-up-square.svg);
  }
+  &.bi-file-earmark-text {
+    mask-image: url(bootstrap-icons/icons/file-earmark-text.svg);
+  }
 }
--- a/static/src/mobile.scss
+++ b/static/src/mobile.scss
@@ -1,13 +1,17 @@
@import "./lib/bootstrap";

+$default-space: 2;
+
@include media-breakpoint-down(md) {
  .app-header {
    flex-direction: column;
+    padding-bottom: map-get($spacers, $default-space) !important;
+    margin-bottom: map-get($spacers, $default-space) !important;

    > .link-list {
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
-      padding-bottom: map-get($spacers, 1); 
-      margin-bottom: map-get($spacers, 1); 
+      padding-bottom: map-get($spacers, $default-space);
+      margin-bottom: map-get($spacers, $default-space);
      flex-direction: column;
      gap: 0;

@@ -22,12 +26,17 @@
    }
  }

+  .app-footer {
+    padding-top: map-get($spacers, $default-space) !important;
+    margin-top: map-get($spacers, $default-space) !important;
+  }
+
  .navbar-nav {
    flex-direction: column !important;

    > .nav-item {
      .btn {
-        padding: 0.125rem !important;
+        padding: map-get($spacers, 1) !important;
      }
    }
  }
--- a/static/src/schedule/schedule.ts
+++ b/static/src/schedule/schedule.ts
@@ -56,7 +56,7 @@ class ScheduleChannelElement extends HTMLElement {
    this.channel = JSON.parse(this.getAttribute("channel") || "{}");
    this.innerHTML = `
    <a href="${this.channel?.provider}/${this.channel?.id}"
-      class="list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start">
+      class="d-flex justify-content-between align-items-start  text-decoration-none">
      <span>
        <span class="text-primary">${this.channel?.name}</span>
      </span>
@@ -67,6 +67,7 @@ class ScheduleChannelElement extends HTMLElement {
        </span>
      </span>
    </a>`;
+    this.classList = "list-group-item list-group-item-action";
    this.addEventListener("click", this.handleClick);
    if (this.hasAttribute("removable")) {
      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);
--- a/static/src/weather/weather.ts
+++ b/static/src/weather/weather.ts
@@ -60,7 +60,7 @@ class WeatherLocationElement extends HTMLElement {
    this.location = JSON.parse(this.getAttribute("location") || "{}");
    this.innerHTML = `
    <a href="${this.location?.provider}/${this.location?.id}"
-      class="list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start">
+      class="d-flex justify-content-between align-items-start text-decoration-none">
      <span>
        <span class="fi fi-${this.location?.country_code} me-1"></span>
        <span class="text-primary">${this.location?.name}</span>
@@ -75,6 +75,7 @@ class WeatherLocationElement extends HTMLElement {
        </span>
      </span>
    </a>`;
+    this.classList = 'list-group-item list-group-item-action';
    this.addEventListener("click", this.handleClick);
    if (this.hasAttribute("removable")) {
      this.querySelector<HTMLElement>("[data-remove]")?.addEventListener("click", this.handleRemoveClick);