feat: ✨ Restyled tracklist

EricLambrecht · Sep 11, 2018 · 045d038 · 045d038
1 parent ecba3ae
commit 045d038
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 22 deletions.
diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css
@@ -8,6 +8,9 @@
   --color-danger: #e2403e;
   --color-warning: #ffcb5d;
   --color-info: #4a97cc;
+  --color-background-grey: #F0F0F0;
+  --color-light-grey: #F7F7F7;
+  --color-track-item: #FAFAFA;
 
   /* Typography */
 

diff --git a/src/components/EditorOperationPanel.vue b/src/components/EditorOperationPanel.vue
@@ -25,5 +25,6 @@ export default {
   .operation-panel {
     padding: 12px 0;
     box-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
+    background-color: var(--color-light-grey);
   }
 </style>
diff --git a/src/components/EditorPlaylist.vue b/src/components/EditorPlaylist.vue
@@ -127,13 +127,14 @@ export default {
     }
 
     .drag-hover {
-      background-color: #F0F0F0;
+      background-color: white;
+      box-shadow: 0 0 5px 0px var(--spotify-green);
     }
     .drag-origin:hover {
-      background-color: transparent;
+      background-color: var(--color-track-item);
     }
     .drag-hover.drag-origin:hover {
-      background-color: #F0F0F0;
+      background-color: white;
     }
   }
 </style>
diff --git a/src/components/EditorPlaylistItem.vue b/src/components/EditorPlaylistItem.vue
@@ -1,17 +1,17 @@
 <template>
   <b-list-item class="playlist-item">
-    <b-text v-if="showStartingTime">
-      {{ item.track.relative_start_time_ms | formatTime('h:mm') }} -
+    <b-text v-if="showStartingTime" class="time">
+      {{ item.track.relative_start_time_ms | formatTime('h:mm') }}
     </b-text>
-    <b-text>
+    <b-text class="artist">
       {{ item.track.artists[0].name }}
     </b-text>
-    -
-    <b-text>
+    <b-text class="song">
       {{ item.track.name }}
     </b-text>
-    <b-text>
-      ({{ item.track.duration_ms | formatTime('mm:ss') }})
+    <b-text class="track-menu">···</b-text>
+    <b-text class="duration">
+      {{ item.track.duration_ms | formatTime('mm:ss') }}
     </b-text>
   </b-list-item>
 </template>
@@ -47,17 +47,52 @@ export default {
 
 <style lang="scss" scoped>
   .playlist-item {
+    display: flex;
     width: 100%;
     padding: 15px;
     position: relative;
+    background-color: var(--color-track-item);
     left: -15px;
 
-    margin-top: 2px;
+    margin-top: 6px;
     border-radius: 5px;
 
+    transition: background-color .1s ease;
+
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:not(:first-child) {
+        margin-left: 20px;
+      }
+    }
+
+    .artist {
+      width: 200px;
+    }
+
+    .song {
+      width: 200px;
+    }
+
+    .track-menu {
+      width: 20px;
+      margin-left: auto;
+      opacity: 0;
+      pointer-events: none;
+      font-weight: bold;
+    }
+
     &:hover {
-      background-color: #F0F0F0;
+      background-color:  white;
       cursor: pointer;
+
+      .track-menu {
+        opacity: 0; /* TODO: enable */
+        pointer-events: all;
+      }
     }
   }
 </style>
diff --git a/src/components/EditorTrackAdder.vue b/src/components/EditorTrackAdder.vue
@@ -34,20 +34,20 @@ export default {
     padding: 10px;
     border-radius: 20px;
     cursor: pointer;
-    background-color: #F0F0F0;
+    background-color: var(--color-light-grey);
     transition: background-color .1s ease;
 
     .label {
       font-size: 18px;
       font-weight: bold;
-      opacity: 0.7;
+      opacity: 0.6;
       transition: opacity .1s ease;
     }
 
     &:hover {
-      background-color: #F4F4F4;
+      background-color: white;
       .label {
-        opacity: 0.6;
+        opacity: 0.7;
       }
     }
   }

diff --git a/src/components/LoggedOutWindow.vue b/src/components/LoggedOutWindow.vue
@@ -53,7 +53,7 @@ export default {
       border-radius: 5px;
 
       &:hover {
-        background-color: #F0F0F0;
+        background-color: var(--color-background-grey);
       }
     }
   }

diff --git a/src/components/MainWindow.vue b/src/components/MainWindow.vue
@@ -72,5 +72,6 @@ export default {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    background-color: var(--color-background-grey);
   }
 </style>
diff --git a/src/components/MainWindowHeader.vue b/src/components/MainWindowHeader.vue
@@ -58,7 +58,7 @@ export default {
 
 <style lang="scss" scoped>
   .header {
-    background-color: #F0F0F0;
+    background-color: white;
     padding: 60px 0;
   }
 

diff --git a/src/components/TrackSearch.vue b/src/components/TrackSearch.vue
@@ -59,7 +59,7 @@ export default {
     }
 
     &:hover {
-      background-color: #F0F0F0;
+      background-color: var(--color-background-grey);
       position: relative;
       overflow: hidden;
       &::after {
@@ -87,7 +87,7 @@ export default {
         width: 50px;
         background-color: var(--spotify-green);
         transform: translateY(-50%) rotate(45deg);
-        box-shadow: 0 0 2px 10px #F0F0F0;
+        box-shadow: 0 0 2px 10px var(--color-background-grey);
       }
       /* wow. sorry. */
     }

diff --git a/src/components/base/Button.vue b/src/components/base/Button.vue
@@ -59,7 +59,7 @@ export default {
       box-shadow: none;
       &:hover {
         background-image: none;
-        background-color: #E9E9E9;
+        background-color: var(--color-light-grey);
       }
     }
   }

diff --git a/src/components/base/Modal.vue b/src/components/base/Modal.vue
@@ -72,7 +72,7 @@ export default {
 
       .footer {
         padding: 20px 30px;
-        background-color: #F0F0F0;
+        background-color: var(--color-background-grey);
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;