Improve styling for track cards
This commit is contained in:
parent
a2ba99d600
commit
df83066303
|
@ -1,5 +1,6 @@
|
||||||
import { TrackInfo } from "../client";
|
import { TrackInfo } from "../client";
|
||||||
|
|
||||||
|
/*
|
||||||
export class TrackName extends HTMLElement {
|
export class TrackName extends HTMLElement {
|
||||||
container: HTMLElement;
|
container: HTMLElement;
|
||||||
|
|
||||||
|
@ -32,25 +33,60 @@ export class TrackName extends HTMLElement {
|
||||||
this.appendChild(this.container);
|
this.appendChild(this.container);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
export class TrackCard extends HTMLElement {
|
export class TextField extends HTMLElement {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ["id", "trackNumber", "name", "album", "artist", "duration"];
|
return ["text"];
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
attributeChangeCallback(
|
get text(): string | null {
|
||||||
attrName: string,
|
return this.getAttribute("text");
|
||||||
oldValue: string,
|
}
|
||||||
newValue: string
|
|
||||||
): void {
|
set text(text: string | null) {
|
||||||
if (newValue !== oldValue) {
|
if (text) {
|
||||||
this.updateContent();
|
this.setAttribute("text", text);
|
||||||
|
this.innerHTML = text;
|
||||||
|
} else {
|
||||||
|
this.removeAttribute("text");
|
||||||
|
this.innerHTML = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TrackCard extends HTMLElement {
|
||||||
|
trackNumberContainer: TextField;
|
||||||
|
nameContainer: TextField;
|
||||||
|
albumContainer: TextField;
|
||||||
|
artistContainer: TextField;
|
||||||
|
durationContainer: TextField;
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["id", "trackNumber", "name", "album", "artist", "duration"];
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.trackNumberContainer = document.createElement("text-field");
|
||||||
|
|
||||||
|
this.nameContainer = document.createElement("text-field");
|
||||||
|
this.nameContainer.classList.add("track-card__name");
|
||||||
|
|
||||||
|
this.albumContainer = document.createElement("text-field");
|
||||||
|
this.albumContainer.classList.add("track-card__album");
|
||||||
|
|
||||||
|
this.artistContainer = document.createElement("text-field");
|
||||||
|
this.artistContainer.classList.add("track-card__artist");
|
||||||
|
|
||||||
|
this.durationContainer = document.createElement("text-field");
|
||||||
|
this.durationContainer.classList.add("track-card__duration");
|
||||||
|
}
|
||||||
|
|
||||||
get name(): string | null {
|
get name(): string | null {
|
||||||
return this.getAttribute("name");
|
return this.getAttribute("name");
|
||||||
|
@ -59,10 +95,11 @@ export class TrackCard extends HTMLElement {
|
||||||
set name(name: string | null) {
|
set name(name: string | null) {
|
||||||
if (name) {
|
if (name) {
|
||||||
this.setAttribute("name", name);
|
this.setAttribute("name", name);
|
||||||
|
this.nameContainer.text = name;
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("open");
|
this.removeAttribute("open");
|
||||||
|
this.nameContainer.text = null;
|
||||||
}
|
}
|
||||||
this.updateContent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get artist(): string | null {
|
get artist(): string | null {
|
||||||
|
@ -72,10 +109,11 @@ export class TrackCard extends HTMLElement {
|
||||||
set artist(artist: string | null) {
|
set artist(artist: string | null) {
|
||||||
if (artist) {
|
if (artist) {
|
||||||
this.setAttribute("artist", artist);
|
this.setAttribute("artist", artist);
|
||||||
|
this.artistContainer.text = artist;
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("open");
|
this.removeAttribute("open");
|
||||||
|
this.artistContainer.text = null;
|
||||||
}
|
}
|
||||||
this.updateContent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get album(): string | null {
|
get album(): string | null {
|
||||||
|
@ -85,53 +123,34 @@ export class TrackCard extends HTMLElement {
|
||||||
set album(album: string | null) {
|
set album(album: string | null) {
|
||||||
if (album) {
|
if (album) {
|
||||||
this.setAttribute("album", album);
|
this.setAttribute("album", album);
|
||||||
|
this.albumContainer.text = album;
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("open");
|
this.removeAttribute("open");
|
||||||
|
this.albumContainer.text = null;
|
||||||
}
|
}
|
||||||
this.updateContent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get length(): string | null {
|
get duration(): string | null {
|
||||||
return this.getAttribute("length");
|
return this.getAttribute("duration");
|
||||||
}
|
}
|
||||||
|
|
||||||
set length(length: string | null) {
|
set duration(duration: string | null) {
|
||||||
if (length) {
|
if (duration) {
|
||||||
this.setAttribute("length", length);
|
this.setAttribute("duration", duration);
|
||||||
|
this.durationContainer.text = duration;
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("open");
|
this.removeAttribute("open");
|
||||||
|
this.durationContainer.text = null;
|
||||||
}
|
}
|
||||||
this.updateContent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.updateContent();
|
this.classList.add("track-card");
|
||||||
}
|
|
||||||
|
|
||||||
updateContent() {
|
// this.appendChild(this.trackNumberContainer);
|
||||||
const container = document.createElement("div");
|
this.appendChild(this.nameContainer);
|
||||||
container.classList.add("track-card");
|
this.appendChild(this.albumContainer);
|
||||||
this.innerHTML = "";
|
this.appendChild(this.artistContainer);
|
||||||
|
this.appendChild(this.durationContainer);
|
||||||
this.appendChild(container);
|
|
||||||
|
|
||||||
while (container.lastChild) {
|
|
||||||
container.removeChild(container.lastChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this["name"]) {
|
|
||||||
const trackName = document.createElement("track-name");
|
|
||||||
trackName.name = this["name"];
|
|
||||||
container.appendChild(trackName);
|
|
||||||
}
|
|
||||||
if (this["length"]) {
|
|
||||||
container.appendChild(document.createTextNode(this["length"]));
|
|
||||||
}
|
|
||||||
if (this["album"]) {
|
|
||||||
container.appendChild(document.createTextNode(this["album"]));
|
|
||||||
}
|
|
||||||
if (this["artist"]) {
|
|
||||||
container.appendChild(document.createTextNode(this["artist"]));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import * as _ from "lodash";
|
import * as _ from "lodash";
|
||||||
import { TrackInfo, getTracks } from "./client";
|
import { TrackInfo, getTracks } from "./client";
|
||||||
import { TrackName, TrackCard } from "./components/track";
|
import { TextField, TrackCard } from "./components/track";
|
||||||
|
|
||||||
window.customElements.define("track-name", TrackName);
|
window.customElements.define("text-field", TextField);
|
||||||
window.customElements.define("track-card", TrackCard);
|
window.customElements.define("track-card", TrackCard);
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
"track-name": TrackName;
|
"text-field": TextField;
|
||||||
"track-card": TrackCard;
|
"track-card": TrackCard;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ const updateTrackList = (tracks: TrackInfo[]) => {
|
||||||
card.name = info.name || null;
|
card.name = info.name || null;
|
||||||
card.album = info.album || null;
|
card.album = info.album || null;
|
||||||
card.artist = info.artist || null;
|
card.artist = info.artist || null;
|
||||||
card.length = (info.duration && `${info.duration}`) || null;
|
card.duration = (info.duration && `${info.duration}`) || null;
|
||||||
return card;
|
return card;
|
||||||
});
|
});
|
||||||
_.map(track_formats, (trackCard) => {
|
_.map(track_formats, (trackCard) => {
|
||||||
|
|
|
@ -29,33 +29,37 @@ body {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
.track-list__row:nth-child(even) {
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-list__row:nth-child(odd) {
|
|
||||||
background-color: rgb(200, 200, 200);
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.track-card {
|
.track-card {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
display: grid;
|
||||||
|
gap: 4px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-card__name {
|
.track-card__name {
|
||||||
|
display: block;
|
||||||
|
grid-column: 1 / span 1;
|
||||||
|
grid-row: 1 / span 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-card__length {
|
.track-card__length {
|
||||||
|
display: block;
|
||||||
|
grid-column: 1 / span 1;
|
||||||
|
grid-row: 2 / span 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-card__album {
|
.track-card__album {
|
||||||
|
display: block;
|
||||||
|
grid-column: 2 / span 1;
|
||||||
|
grid-row: 1 / span 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-card__artist {
|
.track-card__artist {
|
||||||
|
display: block;
|
||||||
|
grid-column: 2 / span 1;
|
||||||
|
grid-row: 2 / span 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue