reduce text on filter buttons

dashboard-ui/collections.html

@@ -10,12 +10,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <button id="btnNewCollection" data-mini="true" data-icon="plus" data-inline="true" class="hide">New</button>
                 <div class="viewSummary"></div>
             </div>

dashboard-ui/css/librarybrowser.css

@@ -7,9 +7,9 @@
     padding-top: 48px !important;
 }
 
-.libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage) {
+    .libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage):not(#itemListPage) {
-    padding-top: 91px !important;
+        padding-top: 91px !important;
-}
+    }
 
 .ui-panel fieldset + fieldset {
     margin-top: 2em;
@@ -651,6 +651,10 @@ a.itemTag:hover {
         height: 7px;
     }
 
+.viewControls, .listTopPaging {
+    display: inline-block;
+}
+
 @media all and (min-width: 600px) {
     .inlineDetailSection:not(.hide) {
         display: inline-block;
@@ -736,6 +740,7 @@ a.itemTag:hover {
         }
 }
 
+
 @media all and (min-width: 750px) {
 
     .viewMenuLink {
@@ -763,16 +768,6 @@ a.itemTag:hover {
     }
 }
 
-@media all and (min-width: 650px) {
-    .viewControls, .listTopPaging {
-        display: inline-block;
-    }
-
-        .viewControls + .listTopPaging {
-            margin-left: 1em;
-        }
-}
-
 @media all and (min-width: 750px) {
     .detailPageContent {
         max-width: 900px;

dashboard-ui/episodes.html

@@ -21,12 +21,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/gamegenres.html

@@ -14,11 +14,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/games.html

@@ -16,12 +16,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
 

dashboard-ui/gamestudios.html

@@ -14,11 +14,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/itemlist.html

@@ -22,11 +22,13 @@
                             <option value="Poster">Poster</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/moviegenres.html

@@ -18,11 +18,11 @@
 
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/moviepeople.html

@@ -20,11 +20,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/movies.html

@@ -28,11 +28,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/moviestudios.html

@@ -18,11 +18,11 @@
 
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/movietrailers.html

@@ -20,12 +20,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/musicalbumartists.html

@@ -19,11 +19,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/musicalbums.html

@@ -25,11 +25,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/musicartists.html

@@ -19,11 +19,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/musicgenres.html

@@ -16,11 +16,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/musicvideos.html

@@ -20,12 +20,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/songs.html

@@ -16,12 +16,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/tvgenres.html

@@ -17,11 +17,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/tvpeople.html

@@ -20,11 +20,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>

dashboard-ui/tvshows.html

@@ -27,11 +27,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>

dashboard-ui/tvstudios.html

@@ -17,11 +17,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>