diff --git a/src/components/EntityList.jsx b/src/components/EntityList.jsx
index fa266da..4980121 100644
--- a/src/components/EntityList.jsx
+++ b/src/components/EntityList.jsx
@@ -5,6 +5,7 @@ import "./EntityList.scss"
const EntityPlaceholder = (props) => {
return (
+
{props.cover &&
}
@@ -12,6 +13,7 @@ const EntityPlaceholder = (props) => {
+
)
}
@@ -19,6 +21,7 @@ const EntityPlaceholder = (props) => {
const EntityItem = (props) => {
return (
+
{props.cover &&
@@ -30,6 +33,12 @@ const EntityItem = (props) => {
{props.subtitle}
+ { props.widget &&
+
+
+
+ }
+
)
}
@@ -45,7 +54,7 @@ export const EntityList = (props) => {
}else{
entities = props.items.map(item => );
+ selected={item.selected} widget={item.widget}/>);
}
const className = props.grid ? "grid" : "column";
diff --git a/src/components/EntityList.scss b/src/components/EntityList.scss
index 6afff34..f81d877 100644
--- a/src/components/EntityList.scss
+++ b/src/components/EntityList.scss
@@ -29,17 +29,29 @@
// Column mode
.entity-list.column {
- display: flex;
- flex-direction: column;
- .entity-item a {
+ .entity-item .entity-container {
display: flex;
- flex-direction: row;
- align-items: center;
- padding: 1em 1em;
- .body {
+ justify-content: space-between;
+
+ a {
display: flex;
- flex-direction: column;
+ flex-direction: row;
+ align-items: center;
+
+ padding: 1em 1em;
+
+ flex-grow: 2;
+ .body {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .widget {
+ display: flex;
+ align-items: center;
+ padding-right: 1em;
}
}
}
@@ -93,7 +105,7 @@
// Highligth Column
.entity-list.column{
- .entity-item {
+ .entity-item {
border-bottom: solid var(--line-width) var(--gray-1);
transition: background-color 300ms ease-in;
@@ -111,7 +123,7 @@
}
background-color: var(--gray-1);
}
- }
+ }
}
// Highligth Grid
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ac14ea7..58ac66e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -107,6 +107,7 @@ button.button {
font-weight: 500;
font-size: var(--font-5);
color: var(--accent);
+ white-space: nowrap;
cursor: pointer;
diff --git a/src/views/Release.jsx b/src/views/Release.jsx
index affa10d..0bce784 100644
--- a/src/views/Release.jsx
+++ b/src/views/Release.jsx
@@ -22,7 +22,8 @@ const Recordings = (props) => {
{recording.length && [{toDuration(recording.length)}]
}
{recording.disambiguation && {capitalize(recording.disambiguation)}
}
),
- 'selected': props.selected === recording.id
+ 'selected': props.selected === recording.id,
+ 'widget':
}));
recordingsComponent =