From a6f4ccdc66cc726e18f5c55141c005ade8a8fbef Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 19 Oct 2015 09:15:37 +0200
Subject: [PATCH] set max width on items in media grid

---
 .../components/umbmediagrid.directive.js      | 41 +++++++++++++------
 .../src/less/components/umb-media-grid.less   |  2 +-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index cd27eb9d01..c02ed4d839 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -6,7 +6,11 @@
       function link(scope, el, attr, ctrl) {
 
          scope.mediaItems = [];
-         var itemMaxHeight = 200;
+
+         var itemDefaultHeight = 200;
+         var itemDefaultWidth = 200;
+         var itemMaxWidth = 300;
+         var itemMaxHeight = 300;
 
          scope.mediaItemsSortingOptions = {
             distance: 10,
@@ -57,29 +61,40 @@
          function setOriginalSize(item, maxHeight) {
 
              //set to a square by default
-             item.originalWidth = maxHeight;
-             item.originalHeight = maxHeight;
+             item.width = itemDefaultWidth;
+             item.height = itemDefaultHeight;
              item.aspectRatio = 1;
 
              var widthProp = _.find(item.properties, function(v) { return (v.alias === "umbracoWidth"); });
 
              if (widthProp && widthProp.value) {
-                 item.originalWidth = parseInt(widthProp.value, 10);
-                 if (isNaN(item.originalWidth)) {
-                     item.originalWidth = maxHeight;
+                 item.width = parseInt(widthProp.value, 10);
+                 if (isNaN(item.width)) {
+                     item.width = itemDefaultWidth;
                  }
              }
 
              var heightProp = _.find(item.properties, function(v) { return (v.alias === "umbracoHeight"); });
 
              if (heightProp && heightProp.value) {
-                 item.originalHeight = parseInt(heightProp.value, 10);
-                 if (isNaN(item.originalHeight)) {
-                     item.originalHeight = maxHeight;
+                 item.height = parseInt(heightProp.value, 10);
+                 if (isNaN(item.height)) {
+                     item.height = itemDefaultWidth;
                  }
              }
 
-             item.aspectRatio = item.originalWidth / item.originalHeight;
+             item.aspectRatio = item.width / item.height;
+
+             // set max width and height
+             if(item.width > itemMaxWidth) {
+                item.width = itemMaxWidth;
+                item.height = itemMaxWidth / item.aspectRatio;
+             }
+
+             if(item.height > itemMaxHeight) {
+                item.height = itemMaxHeight;
+                item.width = itemMaxHeight * item.aspectRatio;
+             }
 
          }
 
@@ -98,13 +113,13 @@
             var widestImageAspectRatio = null;
 
             // sort array after image width with the widest image first
-            flexSortArray = $filter('orderBy')(flexSortArray, 'originalWidth', true);
+            flexSortArray = $filter('orderBy')(flexSortArray, 'width', true);
 
             // find widest image aspect ratio
             widestImageAspectRatio = flexSortArray[0].aspectRatio;
 
             // find smallest image width
-            smallestImageWidth = flexSortArray[flexSortArray.length - 1].originalWidth;
+            smallestImageWidth = flexSortArray[flexSortArray.length - 1].width;
 
             for (var i = 0; flexSortArray.length > i; i++) {
 
@@ -119,7 +134,7 @@
 
                var flexStyle = {
                   "flex": flex + " 1 " + imageMinWidth + "px",
-                  "max-width": mediaItem.originalWidth + "px"
+                  "max-width": mediaItem.width + "px"
                };
 
                mediaItem.flexStyle = flexStyle;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 90ec086147..a4dbaf5440 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -9,7 +9,7 @@
 }
 
 .umb-media-grid__item {
-   margin: 7px;
+   margin: 2px;
    position: relative;
    background: @grayLighter;
    overflow: hidden;