progress on music layout

dashboard-ui/boxsets.html

@@ -25,7 +25,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/css/librarybrowser.css

@@ -306,6 +306,16 @@
     }
 }
 
+@media all and (min-width: 1000px) {
+    .tileItem {
+        width: 47.5%;
+    }
+
+    .tileImage {
+        height: 110px;
+    }
+}
+
 @media all and (min-width: 1200px) {
     .tileImage {
         height: 100px;
@@ -321,6 +331,24 @@
 }
 
 @media all and (min-width: 1440px) {
+    .tileImage {
+        height: 110px;
+    }
+
+    .tileItem {
+        width: 31.5%;
+    }
+}
+
+@media all and (min-width: 1700px) {
+
+    .tileImage {
+        height: 132px;
+    }
+
+    .tileItem {
+        width: 32%;
+    }
 }
 
 
@@ -328,18 +356,44 @@
     .tileItem {
         width: 31.5%;
     }
+
+    .tileImage {
+        height: 155px;
+    }
 }
 
 @media all and (min-width: 2000px) {
     .tileItem {
         width: 23.5%;
     }
+
+    .tileImage {
+        height: 117px;
+    }
+}
+
+@media all and (min-width: 2200px) {
+    .tileItem {
+        width: 24%;
+    }
+
+    .tileImage {
+        height: 145px;
+    }
 }
 
 @media all and (min-width: 2540px) {
     .tileItem {
         width: 18.75%;
     }
+
+    .tileImage {
+        height: 120px;
+    }
+}
+
+.itemsContainer {
+    text-align: center;
 }
 
 .detailTable {
@@ -347,6 +401,7 @@
     border-spacing: 0;
     width: 70%;
     max-width: 1200px;
+    text-align: left;
 }
 
 .centeredDetailTable {
@@ -359,7 +414,6 @@
 
 .detailTable a {
     font-weight: normal!important;
-    text-decoration: none;
 }
 
 .detailTable td {

dashboard-ui/gamegenres.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/gamestudios.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/gamesystems.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/itembynamedetails.html

@@ -114,7 +114,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items">
+            <div id="items" class="itemsContainer">
             </div>
         </div>
     </div>

dashboard-ui/itemlist.html

@@ -22,7 +22,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/moviegenres.html

@@ -25,7 +25,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/moviepeople.html

@@ -25,7 +25,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/movies.html

@@ -31,7 +31,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/moviestudios.html

@@ -25,7 +25,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/movietrailers.html

@@ -31,7 +31,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/musicalbums.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/musicartists.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/musicgenres.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/scripts/librarybrowser.js

@@ -89,6 +89,25 @@
                     imgUrl = "css/images/items/list/game.png";
                     isDefault = true;
                 }
+                else if (item.Type == "Studio" || item.Type == "Genre") {
+
+                    if (options.context == "games") {
+
+                        imgUrl = "css/images/items/list/game.png";
+                    }
+                    else if (options.context == "music") {
+
+                        imgUrl = "css/images/items/list/audio.png";
+                    }
+                    else if (options.context == "movies") {
+
+                        imgUrl = "css/images/items/list/chapter.png";
+                    }
+                    else {
+                        imgUrl = "css/images/items/list/collection.png";
+                    }
+                    isDefault = true;
+                }
                 else {
 
                     imgUrl = "css/images/items/list/collection.png";

dashboard-ui/songs.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/tvgenres.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/tvpeople.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/tvshows.html

@@ -29,7 +29,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 

dashboard-ui/tvstudios.html

@@ -23,7 +23,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items"></div>
+            <div id="items" class="itemsContainer"></div>
         </div>
         <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">