feat(view): fix index page

This commit is contained in:
2026-07-02 02:43:43 +03:00
parent 4fdb7e9717
commit a3fab92e3d
10 changed files with 50 additions and 29 deletions

View File

@@ -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>

View File

@@ -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);
}
}

View File

@@ -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;
}
}
}

View File

@@ -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);
@@ -107,4 +108,4 @@ declare global {
window.scheduleChannelStorage = new ScheduleChannelStorage();
window.scheduleChannelManager = new ScheduleChannelManager();
console.log("ok");
console.log("ok");

View File

@@ -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);