From a0ccbc3facdfffa3395e9dad5441945c03891ff6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 29 Jun 2016 11:55:19 +0200
Subject: [PATCH] package details information: label as block element, wrap
 words, don't show empty information item

---
 .../src/less/components/umb-packages.less     |  8 +++--
 .../src/views/packager/views/repo.html        | 34 +++++++++----------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 4ad5e8e803..d3af5164f1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -461,15 +461,17 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__information-item {
-    display: flex;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
     font-size: 13px;
 }
 
 .umb-package-details__information-item-label {
     color: black;
     font-weight: bold;
-    margin-right: 3px;
+}
+
+.umb-package-details__information-item-content {
+    word-break: break-word;
 }
 
 .umb-package-details__information-item-label-2 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
index 8f53a33866..0829da8814 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
@@ -179,46 +179,46 @@
                         <div class="umb-package-details__section-title">Information</div>
                         <div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
                                 <div class="umb-package-details__information-item-label">Owner:</div>
-                                <div>{{vm.package.ownerInfo.owner}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
                                 <div class="umb-package-details__information-item-label">Contributors:</div>
-                                <div ng-repeat="contributor in vm.package.ownerInfo.contributors">
-                                    <a class="umb-package-details__link" href="{{ contributor.profileUrl }}" target="_blank">{{ contributor.name }}<span ng-if="!$last">,&nbsp;&nbsp;</span></a>
+                                <div class="umb-package-details__information-item-content">
+                                    <span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">,&nbsp;</span></span>
                                 </div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.created">
                                 <div class="umb-package-details__information-item-label">Created:</div>
-                                <div>{{vm.package.created}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.created}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
                                 <div class="umb-package-details__information-item-label">Current version:</div>
-                                <div>{{vm.package.latestVersion}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
                                 <div class="umb-package-details__information-item-label">.Net Version:</div>
-                                <div>{{vm.package.information.netVersion}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
                                 <div class="umb-package-details__information-item-label">License:</div>
-                                <div>{{vm.package.licenseName}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.downloads">
                                 <div class="umb-package-details__information-item-label">Downloads:</div>
-                                <div>{{vm.package.downloads}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
                             </div>
 
-                            <div class="umb-package-details__information-item">
+                            <div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
                                 <div class="umb-package-details__information-item-label">Karma:</div>
-                                <div>{{vm.package.ownerInfo.karma}}</div>
+                                <div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.karma}}</div>
                             </div>
 
                         </div>