feat(view): fix index page
This commit is contained in:
@@ -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>
|
||||
|
||||
3
static/src/lib/bootstrap-icons.scss
vendored
3
static/src/lib/bootstrap-icons.scss
vendored
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user