From fca737be13fa29da9fb521c94bc65d3b105d1317 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 18 May 2013 18:48:19 -0400
Subject: [PATCH] fixed user data icon wrapping

---
 dashboard-ui/css/librarybrowser.css    | 10 +++--
 dashboard-ui/itemdetails.html          | 60 +++++++++++---------------
 dashboard-ui/scripts/Itemdetailpage.js | 16 +++----
 3 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index dc825bfbd0..53a282e026 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -379,6 +379,13 @@ a.itemTag:hover {
     overflow: hidden;
 }
 
+@media all and (min-width: 600px) {
+    .inlineDetailSection:not(.hide) {
+        display: inline-block;
+        margin-bottom: 2em;
+    }
+}
+
 @media all and (max-width: 750px) {
 
     .itemBackdrop {
@@ -425,9 +432,6 @@ a.itemTag:hover {
     }
 }
 
-@media all and (min-width: 1200px) {
-}
-
 @media all and (min-width: 650px) {
     .libraryPage .ui-content {
         padding: 15px 20px 100px;
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 3010694b8d..b755e5e05f 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -122,47 +122,39 @@
         <div data-role="content">
             <div class="detailPageContent">
 
-                <div style="display: inline-block;">
-                    <div id="detailsSection" style="display: none;" class="detailSection">
-                        <div class="detailSectionHeader" style="margin-top: 0;">
-                            Details
-                        </div>
-                        <div class="detailSectionContent" style="padding: 0 1em;">
+                <div id="detailsSection" class="detailSection inlineDetailSection hide">
+                    <div class="detailSectionHeader" style="margin-top: 0;">
+                        Details
+                    </div>
+                    <div class="detailSectionContent" style="padding: 0 1em;">
 
-                            <div id="mediaInfoContent"></div>
-                            <p id="players"></p>
-                            <p id="seriesAirTime"></p>
-                            <p id="itemPremiereDate"></p>
-                            <p id="itemBudget"></p>
-                            <p id="itemRevenue"></p>
-                            <p class="itemStudios"></p>
-                            <p class="itemExternalLinks"></p>
-                            <div class="mediaInfo"></div>
-                            <p class="itemTags"></p>
-                        </div>
+                        <div id="mediaInfoContent"></div>
+                        <p id="players"></p>
+                        <p id="seriesAirTime"></p>
+                        <p id="itemPremiereDate"></p>
+                        <p id="itemBudget"></p>
+                        <p id="itemRevenue"></p>
+                        <p class="itemStudios"></p>
+                        <p class="itemExternalLinks"></p>
+                        <div class="mediaInfo"></div>
+                        <p class="itemTags"></p>
                     </div>
                 </div>
-                <div style="display: inline-block;" class="detailSection">
-                    <div id="childrenCollapsible" class="hide">
-                        <div class="detailSectionHeader"><span id="childrenTitle"></span></div>
-                        <div id="childrenContent" class="detailSectionContent"></div>
-                    </div>
+                <div id="childrenCollapsible" class="hide detailSection inlineDetailSection">
+                    <div class="detailSectionHeader"><span id="childrenTitle"></span></div>
+                    <div id="childrenContent" class="detailSectionContent"></div>
                 </div>
-                <div style="display: inline-block;" class="detailSection">
-                    <div id="trailersCollapsible" style="display: none;">
-                        <div class="detailSectionHeader">
-                            Trailers
-                        </div>
-                        <div id="trailersContent" class="detailSectionContent"></div>
+                <div id="trailersCollapsible" class="detailSection inlineDetailSection hide">
+                    <div class="detailSectionHeader">
+                        Trailers
                     </div>
+                    <div id="trailersContent" class="detailSectionContent"></div>
                 </div>
-                <div style="display: inline-block;" class="detailSection">
-                    <div id="specialsCollapsible" style="display: none;">
-                        <div class="detailSectionHeader">
-                            Special Features
-                        </div>
-                        <div id="specialsContent" class="detailSectionContent"></div>
+                <div id="specialsCollapsible" class="detailSection inlineDetailSection hide">
+                    <div class="detailSectionHeader">
+                        Special Features
                     </div>
+                    <div id="specialsContent" class="detailSectionContent"></div>
                 </div>
                 <div id="castCollapsible" style="display: none;" class="detailSection">
                     <div class="detailSectionHeader">
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index bff7015f2f..8534152ed2 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -119,11 +119,11 @@
     function setInitialCollapsibleState(page, item, context) {
 
         if (item.ChildCount) {
-            $('#childrenCollapsible', page).show();
+            $('#childrenCollapsible', page).removeClass('hide');
             renderChildren(page, item);
         }
         else {
-            $('#childrenCollapsible', page).hide();
+            $('#childrenCollapsible', page).addClass('hide');
         }
         if (LibraryBrowser.shouldDisplayGallery(item)) {
             $('#galleryCollapsible', page).show();
@@ -142,15 +142,15 @@
             renderScenes(page, item, 6);
         }
         if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
-            $('#trailersCollapsible', page).hide();
+            $('#trailersCollapsible', page).addClass('hide');
         } else {
-            $('#trailersCollapsible', page).show();
+            $('#trailersCollapsible', page).removeClass('hide');
             renderTrailers(page, item);
         }
         if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) {
-            $('#specialsCollapsible', page).hide();
+            $('#specialsCollapsible', page).addClass('hide');
         } else {
-            $('#specialsCollapsible', page).show();
+            $('#specialsCollapsible', page).removeClass('hide');
             renderSpecials(page, item, 6);
         }
         if (!item.People || !item.People.length) {
@@ -224,9 +224,9 @@
         var text = elem.textContent || elem.innerText;
 
         if (!text.trim()) {
-            detailsSection.hide();
+            detailsSection.addClass('hide');
         } else {
-            detailsSection.show();
+            detailsSection.removeClass('hide');
         }
 
         renderSeriesAirTime(page, item, context);