From c82a8a2fa4566485c05a6b5c89191d0ff71de1cc Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Fri, 21 Feb 2020 23:56:26 +0100
Subject: [PATCH] add design to queue

---
 src/assets/img/playbar.svg           | 16 +++++++
 src/assets/scss/5-modules/queue.scss | 17 +++++++
 src/assets/scss/5-modules/track.scss | 63 ++++++++++++++++++++++++++
 src/assets/scss/style.scss           |  2 +
 src/components/Queue.svelte          | 66 ++++++++++++++++++----------
 5 files changed, 141 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/img/playbar.svg
 create mode 100644 src/assets/scss/5-modules/queue.scss
 create mode 100644 src/assets/scss/5-modules/track.scss

diff --git a/src/assets/img/playbar.svg b/src/assets/img/playbar.svg
new file mode 100644
index 0000000..2a9fb57
--- /dev/null
+++ b/src/assets/img/playbar.svg
@@ -0,0 +1,16 @@
+<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <g transform="matrix(1 0 0 -1 0 80)" fill="#635776">
+    <rect width="10" height="20" rx="3">
+      <animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="15" width="10" height="80" rx="3">
+      <animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="30" width="10" height="50" rx="3">
+      <animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="45" width="10" height="30" rx="3">
+      <animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+  </g>
+</svg>
diff --git a/src/assets/scss/5-modules/queue.scss b/src/assets/scss/5-modules/queue.scss
new file mode 100644
index 0000000..1edba81
--- /dev/null
+++ b/src/assets/scss/5-modules/queue.scss
@@ -0,0 +1,17 @@
+/* ----------------------------------------------------------- */
+/* == track queue module */
+/* ----------------------------------------------------------- */
+
+.queue__section {
+  margin-bottom: 2rem;
+}
+
+.queue__sectionTitle {
+  margin: 0;
+  margin-bottom: 1rem;
+  color: rgba($color-primary, .8);
+  text-transform: uppercase;
+  letter-spacing: .03rem;
+  font-size: 1rem;
+  line-height: 1.2em;
+}
diff --git a/src/assets/scss/5-modules/track.scss b/src/assets/scss/5-modules/track.scss
new file mode 100644
index 0000000..641da36
--- /dev/null
+++ b/src/assets/scss/5-modules/track.scss
@@ -0,0 +1,63 @@
+/* ----------------------------------------------------------- */
+/* == track module */
+/* ----------------------------------------------------------- */
+
+.track {
+  position: relative;
+  display: flex;
+  padding: 1rem 0;
+}
+
+.track--active::before {
+  position: absolute;
+  top: 0;
+  top: calc(50% - .5rem);
+  left: -2.1rem;
+  width: 1rem;
+  height: 1rem;
+  background: no-repeat url("/assets/img/playbar.svg");
+  background-position: left center;
+  background-size: 1rem 1rem;
+  content: "";
+}
+
+.track__main {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.track__title {
+  overflow: hidden;
+  color: $color-secondary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 1.14em;
+}
+
+.track--active .track__title {
+  font-weight: bold;
+}
+
+.track__subtitle {
+  margin-top: .2rem;
+  color: $color-grey-1;
+  font-size: 1.2rem;
+}
+
+.track__menu {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: -1rem;
+  margin-left: 1rem;
+  padding: 1rem;
+  border: none;
+  background: none;
+  color: $color-primary;
+  font-size: 0;
+}
+
+.track__menu svg {
+  width: 2rem;
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 43cd932..0f8d2bd 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -67,6 +67,8 @@
 @import "5-modules/player-track";
 @import "5-modules/volume";
 @import "5-modules/controls";
+@import "5-modules/queue";
+@import "5-modules/track";
 
 
 // --------------------------------------------------------------
diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte
index de34f03..b67a9e1 100644
--- a/src/components/Queue.svelte
+++ b/src/components/Queue.svelte
@@ -1,35 +1,55 @@
 <div>
-    <h6>PLAY NEXT</h6>
-
-    {#if $next}
-        <div class="entry" on:click={() => select($next)}>
-            <div class="title">{$next.title}</div>
-            <div class="user">shared by {$next.referer.username} <DistanceDate date={$next.date} /></div>
+    <div class="queue__section">
+        <div class="queue__sectionTitle">Next song</div>
+        <div class="track" on:click={() => select($next)}>
+            <div class="track__main">
+                <div class="track__title" class:placeholder={!$next}>
+                    {#if $next}{$next.title}{/if}
+                </div>
+                <div class="track__subtitle" class:placeholder={!$next}>
+                {#if $next}
+                    shared by {$next.referer.username} • 
+                    <DistanceDate date={$next.date} />
+                {/if}
+                </div>
+            </div>
+            {#if $next}
+                <button class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
+            {/if}
         </div>
-    {:else}
-        NO NEXT TRACK
-    {/if}
+    </div>
 
 
+    <div class="queue__section">
+        <div class="queue__sectionTitle">History</div>
+        {#each history as track}
+            <div class="track" class:track--active={track === $current} on:click={() => select(track)}>
+                <div class="track__main">
+                    <div class="track__title">{track.title}</div>
+                    <div class="track__subtitle">
+                        shared by {track.referer.username} • 
+                        <DistanceDate date={track.date} />
+                    </div>
+                </div>
+                <button class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
+            </div>
+        {/each}
+        {#if history.length === 0}
+            <div class="track">
+                <div class="track__main">
+                    <div class="track__title placeholder"></div>
+                    <div class="track__subtitle placeholder"></div>
+                </div>
+            </div>
+        {/if}
 
-    {#if $enqueueing}
-        ENQUEING
-    {/if}
-
-
-    <h6>HISTORY</h6>
-
-    {#each history as track}
-        <div class="entry" class:active={track === $current} on:click={() => select(track)}>
-            <div class>{track.title}</div>
-            <div class>shared by {track.referer.username} <DistanceDate date={track.date} /></div>
-        </div>
-    {/each}
+    </div>
 </div>
 
 <script>
     import { getContext } from 'svelte'
-    import DistanceDate from '/components/DistanceDate.svelte'
+    import DistanceDate from '/components/DistanceDate'
+    import IconMenu from '/components/icons/Menu'
 
     const current = getContext('current')
     const enqueueing = getContext('enqueueing')