better dashboard background and text adjustments

dashboard-ui/css/librarybrowser.css

@@ -16,7 +16,7 @@
 
 .libraryPage, .itemListContent {
     background: #262626!important;
-    /*background: #494949 url(images/bgflip.png) repeat-x!important;*/
+    background: #494949 url(images/bgflip.png) repeat-x!important;
     background-attachment: fixed!important;
 }
 
@@ -26,7 +26,7 @@
 
 .listHeader {
     margin-top: 1.25em;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
     font-weight: normal;
 }
 

dashboard-ui/css/site.css

@@ -467,11 +467,6 @@ form, .readOnlyContent {
 
 @media all and (min-width: 750px) {
 
-    .posterViewItem {
-        font-size: 16px;
-        padding-bottom: 29px;
-    }
-
     .posterViewItemWithDualText {
         padding-bottom: 58px;
     }
@@ -492,6 +487,11 @@ form, .readOnlyContent {
 
 @media all and (min-width: 1200px) {
 
+    .posterViewItem {
+        font-size: 16px;
+        padding-bottom: 29px;
+    }
+
     .posterViewItem img {
         max-width: 250px;
         max-height: 200px;

dashboard-ui/index.html

@@ -10,7 +10,7 @@
             <div class="ehsContent">
                 <h1 class="listHeader firstListHeader">Views</h1>
 
-                <div>
+                <div id="views">
                     <div class="posterViewItem">
                         <a href="moviesrecommended.html">
                             <img style="background: #E12026;" src="css/images/items/list/chapter.png"><div class="posterViewItemText">Movies</div>

dashboard-ui/itemlist.html

@@ -17,6 +17,7 @@
 
             <div id="listItems" style="clear: both;"></div>
 
+        </div>
         <div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
 
             <div data-role="controlgroup" data-type="horizontal">
@@ -102,6 +103,5 @@
             </form>
         </div>
     </div>
-    </div>
 </body>
 </html>

dashboard-ui/scripts/indexpage.js

@@ -25,6 +25,27 @@
             }));
 
         });
+
+        var views = [
+            { name: "Movies", url: "moviesrecommended.html", img: "css/images/items/list/chapter.png", background: "#E12026" },
+            { name: "TV Shows", url: "tvrecommended.html", img: "css/images/items/list/collection.png", background: "#FF870F" },
+            { name: "Music", url: "musicrecommended.html", img: "css/images/items/list/audiowide.png", background: "#4BB3DD" }
+        ];
+
+        var html = '';
+
+        for (var i = 0, length = views.length; i < length; i++) {
+
+            var view = views[i];
+
+            html += '<div class="posterViewItem">';
+            html += '<a href="' + view.url + '">';
+            html += '<img style="background: ' + view.background + ';" src="' + view.img + '"><div class="posterViewItemText">' + view.name + '</div>';
+            html += '</a>';
+            html += '</div>';
+        }
+
+        $('#views', page).html(html);
     });
 
 })(jQuery, document);