Side-scrolling details and actions

src/js/locale/nl.yaml

@@ -43,9 +43,9 @@ actions:
   delete: Wissen
   remove: Verwijderen
   cancel: Annuleren
-  created: %{name} aangemaakt
-  saved: %{name} opgeslagen
-  deleted: %{name} verwijderd
+  created: '%{name} aangemaakt'
+  saved: '%{name} opgeslagen'
+  deleted: '%{name} verwijderd'
 common:
   popularity: Populariteit
   name: Naam

src/js/util/helpers.js

@@ -548,7 +548,6 @@ const scrollTo = function (target = null, smooth_scroll = false) {
     // Target is a number, so treat as pixel position
     if (target && Number.isInteger(target)) {
       if (typeof main.scrollTo === 'function') {
-        console.debug('Scrolling to', { main, target })
         main.scrollTo(0, target);
       }
 

src/js/util/library.js

@@ -115,7 +115,7 @@ const ensureLoaded = ({
 
       const uris = dependentUris(item);
       if (uris.length) {
-        console.info(`Loading ${uris.length} dependents`);
+        console.info(`Loading ${uris.length} dependents`, { uris });
         store.dispatch(coreActions.loadItems(type, uris));
       }
       return;

src/scss/global/_core.scss

@@ -561,6 +561,7 @@ footer {
 }
 
 .details {
+  @include horizontal_scroll;
   list-style-type: none;
   opacity: 0.5;
 

src/scss/global/_variables.scss

@@ -400,3 +400,8 @@ $bp_shallow: 650px;
     );
   }
 }
+
+@mixin horizontal_scroll {
+  white-space: nowrap;
+  overflow-x: auto;
+}

src/scss/views/_album.scss

@@ -17,6 +17,7 @@ main .album-view {
   }
 
   .actions {
+    @include horizontal_scroll;
     padding-bottom: 30px;
   }
 
@@ -59,6 +60,10 @@ main .album-view {
       padding: 40px 0 0 0;
       text-align: center;
 
+      h1 {
+        display: block;
+      }
+
       .description {
         padding-top: 10px;
       }

src/scss/views/_artist.scss

@@ -29,6 +29,7 @@
       }
 
       .actions {
+        @include horizontal_scroll;
         .context-menu-trigger {
           color: colour('white');
 

src/scss/views/_playlist.scss

@@ -17,6 +17,7 @@ main .playlist-view {
   }
 
   .actions {
+    @include horizontal_scroll;
     padding-bottom: 30px;
   }
 
@@ -55,6 +56,10 @@ main .playlist-view {
       padding: 40px 0 0 0;
       text-align: center;
 
+      h1 {
+        display: block;
+      }
+
       .description {
         padding-top: 10px;
       }

src/scss/views/_track.scss

@@ -86,6 +86,8 @@ main .track-view {
 
 		.actions {
 			padding: 0;
+			white-space: nowrap;
+			overflow-x: auto;
 		}
 	}
 }

src/scss/views/_user.scss

@@ -14,6 +14,10 @@
 				line-height: 5rem;
 			}
 
+			.actions {
+				@include horizontal_scroll;
+			}
+
       .heading {
         display: flex;
         align-items: center;
@@ -54,28 +58,39 @@
 
 	@include responsive($bp_medium){
 		.intro {
-
-			.thumbnail {
-				float: none;
-				margin: 0 auto 20px;
-			}
-
-			.heading {
-				display: block;
-
-				&__thumbnail {
-					display: none;
-				}
-			}
-
 			.liner {
 				padding: 15vh 10px 0;
-			}
 
-			h1 {
-				padding-top: 0;
-				font-size: 3rem;
-				line-height: 3rem;
+				.thumbnail {
+					float: none;
+					margin: 0 auto 20px;
+				}
+
+				.heading {
+					display: block;
+
+					&__thumbnail {
+						display: none;
+					}
+
+					&__content {
+						&__details {
+							flex-flow: column;
+							align-items: flex-start;
+
+							h2 {
+								order: -1;
+								padding-bottom: 1rem;
+							}
+						}
+					}
+				}
+
+				h1 {
+					padding-top: 0;
+					font-size: 3rem;
+					line-height: 3rem;
+				}
 			}
 		}
 	}