Allow tracks names to wrap to multiple lines also in the 'Genres' view

Long track names are now wrapped to multiple lines (on narrow screen) also in the 'Genres' view. This was already previously possible in the similar 'All tracks' and 'Folders' views, but 'Genres' had been forgotten. Hence, the long names on narrow screen were overlapping with the alphabet navigation control.
owncloud · May 2, 2021 · 76399da · 76399da
1 parent 6bcdabb
commit 76399da
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/css/style-tracklist.css b/css/style-tracklist.css
@@ -83,15 +83,13 @@
 }
 
 /**
- * View specific rules for the track-list directive in the 'All tracks' and 'Folders' views
+ * Rules for the track-list directive in "flat list views" like 'All tracks', 'Genres', and 'Folders'
  */
 
-#alltracks-area .track-list,
-#folders-area .track-list {
+.flat-list-view .track-list {
 	margin-right: 50px;
 }
 
-#alltracks-area .track-list li > div > span,
-#folders-area .track-list li > div > span {
+.flat-list-view .track-list li > div > span {
 	white-space: normal;
 }
diff --git a/templates/partials/alltracksview.php b/templates/partials/alltracksview.php
@@ -1,4 +1,4 @@
-<div class="view-container playlist-area" id="alltracks-area" ng-show="!loading && !loadingCollection">
+<div class="view-container playlist-area flat-list-view" id="alltracks-area" ng-show="!loading && !loadingCollection">
 	<h1>
 		<span ng-click="onHeaderClick()">
 			<span translate>All tracks</span>

diff --git a/templates/partials/foldersview.php b/templates/partials/foldersview.php
@@ -1,5 +1,5 @@
 <div class="view-container" id="folders-area" ng-show="!loading && !loadingCollection">
-	<div class="playlist-area folder-area" id="folder-{{ ::folder.id }}" in-view-observer
+	<div class="playlist-area folder-area flat-list-view" id="folder-{{ ::folder.id }}" in-view-observer
 		in-view-observer-margin="1000"
 		ng-repeat="folder in folders | limitTo: incrementalLoadLimit"
 	>

diff --git a/templates/partials/genresview.php b/templates/partials/genresview.php
@@ -1,5 +1,5 @@
 <div class="view-container" id="genres-area" ng-show="!loading && !loadingCollection">
-	<div class="playlist-area genre-area" id="genre-{{ ::genre.id }}" in-view-observer
+	<div class="playlist-area genre-area flat-list-view" id="genre-{{ ::genre.id }}" in-view-observer
 		in-view-observer-margin="1000"
 		ng-repeat="genre in genres | limitTo: incrementalLoadLimit"
 	>