-
+
{
/>
-
{ this.getTrackName() }
-
{ this.getTrackArtistName() }
+
{ this.getTrackName() }
+
{ this.getTrackArtistName() }
);
diff --git a/src/components/PlaybackControls/PlaybackControls.scss b/src/components/PlaybackControls/PlaybackControls.scss
index 3b00858..deca05e 100644
--- a/src/components/PlaybackControls/PlaybackControls.scss
+++ b/src/components/PlaybackControls/PlaybackControls.scss
@@ -1,21 +1,59 @@
-
-
.bf-playback-controls {
display: grid;
- grid-template-columns: minmax(250px, 1fr) 3fr minmax(250px, 1fr);
+ grid-template-columns: minmax(300px, 1fr) 3fr minmax(250px, 1fr);
+ grid-template-rows: auto auto;
justify-content: center;
align-items: center;
background-color: #111;
- .primary-controls {
- padding: 8px 24px;
+ .bf-current-track-info {
+ grid-row-start: 1;
+ grid-row-end: 3;
}
.bf-playback-controls-primary {
- margin-bottom: 8px;
+ margin-top: 16px;
+ grid-row-start: 1;
+ grid-row-end: 2;
}
.bf-playback-progress {
- margin-top: 8px;
+ grid-row-start: 2;
+ grid-row-end: 3;
+ padding: 0 16px;
+ }
+
+ .bf-playback-controls-secondary {
+ grid-row-start: 1;
+ grid-row-end: 3;
+ }
+
+ @media screen and (max-width: 960px) {
+ grid-template-columns: 300px 1fr;
+ grid-template-rows: auto 1fr;
+
+ .bf-playback-controls-secondary {
+ display: none;
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ grid-template-columns: minmax(200px, 1fr) auto;
+
+ .bf-current-track-info {
+ grid-row-start: 1;
+ grid-row-end: 1;
+ }
+
+ .bf-playback-controls-primary {
+ grid-row-start: 1;
+ grid-row-end: 1;
+ }
+
+ .bf-playback-progress {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ margin: 8px 0 4px 0;
+ }
}
}
\ No newline at end of file
diff --git a/src/components/PlaybackControls/PlaybackControls.tsx b/src/components/PlaybackControls/PlaybackControls.tsx
index 71ad3a6..1cedeb0 100644
--- a/src/components/PlaybackControls/PlaybackControls.tsx
+++ b/src/components/PlaybackControls/PlaybackControls.tsx
@@ -53,23 +53,21 @@ export class PlaybackControls extends React.Component
{
ready={ this.props.ready }
playbackState={ this.props.playbackState }
/>
+
+
-
+
{
this.props.onPlayTrack(metaTrack);
}
- handleTrackDoubleClick = (metaTrack: MetaTrack) => {
+ handleTrackPlayClick = (metaTrack: MetaTrack) => {
this.playTrack(metaTrack);
}
@@ -83,21 +85,28 @@ export class TrackList extends React.Component {
- Title
- Artist
- Album
+
+ Title
+ Artist
+ Album
{this.props.tracks.map((track) => (
this.handleTrackDoubleClick(track) }
- >
- { this.getTrackName(track) }
- { this.getTrackArtistName(track) }
- { this.getTrackAlbumName(track) }
+ key={ track.track.id }>
+
+ this.handleTrackPlayClick(track) }
+ size="small">
+
+
+
+ { this.getTrackName(track) }
+ { this.getTrackArtistName(track) }
+ { this.getTrackAlbumName(track) }
))}
diff --git a/src/index.scss b/src/index.scss
index 39568fb..8a0dc2e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,13 +1,20 @@
-html, body {
- height: 100%;
- overflow: hidden;
+html,
+body {
+ height: 100%;
+ overflow: hidden;
}
body {
- margin: 0;
- font-family: 'Roboto', helvetica, sans-serif;
+ margin: 0;
+ font-family: "Roboto", helvetica, sans-serif;
}
#root {
- height: 100%;
-}
\ No newline at end of file
+ height: 100%;
+}
+
+.truncate {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}