frontpage-recommendations-externalAd-layout (#1371)

* Revert "frontpage-recommendations-layout-fix (#1324)" This reverts commit 2b786a4. * add missing constraint * snapshot tests * wip * snapshot tests wip --------- Co-authored-by: Adrian Sergheev <[email protected]>
finn-no · Aug 15, 2024 · 9005270 · 9005270
1 parent bc9a446
commit 9005270
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 6 deletions.
diff --git a/...RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPad_threecolumns.png b/...RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPad_threecolumns.png
diff --git a/..._/RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPad_twocolumns.png b/..._/RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPad_twocolumns.png
diff --git a/.../RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_fullwidth.png b/.../RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_fullwidth.png
diff --git a/...cyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_threecolumns.png b/...cyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_threecolumns.png
diff --git a/...RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_twocolumns.png b/...RecyclingViewTests/AdRecommendationsGridViewDemoView.dark_iPhone_twocolumns.png
diff --git a/...ecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPad_threecolumns.png b/...ecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPad_threecolumns.png
diff --git a/.../RecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPad_twocolumns.png b/.../RecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPad_twocolumns.png
diff --git a/...RecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_fullwidth.png b/...RecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_fullwidth.png
diff --git a/...yclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_threecolumns.png b/...yclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_threecolumns.png
diff --git a/...ecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_twocolumns.png b/...ecyclingViewTests/AdRecommendationsGridViewDemoView.light_iPhone_twocolumns.png
diff --git a/Demo/Sources/Recycling/GridViews/AdRecommendations/AdRecommendationsGridViewDemoView.swift b/Demo/Sources/Recycling/GridViews/AdRecommendations/AdRecommendationsGridViewDemoView.swift
@@ -13,9 +13,9 @@ struct AdDataSource {
         ads.insert(.ad(AdFactory.googleDemoAd), at: 4)
         ads.insert(.ad(AdFactory.nativeDemoAd), at: 8)
         var externals: [AdRecommendation] = ExternalAdFactory.create(numberOfModels: 4)
-            .map { .external($0) }
-        ads.insert(externals[0], at: 0)
-        ads.append(contentsOf: externals.dropFirst())
+             .map { .external($0) }
+         ads.insert(externals[0], at: 0)
+         ads.append(contentsOf: externals.dropFirst())
         return ads
     }()
 }

diff --git a/...Kit/Sources/Recycling/GridViews/AdRecommendations/Cell/ExternalAdRecommendationCell.swift b/...Kit/Sources/Recycling/GridViews/AdRecommendations/Cell/ExternalAdRecommendationCell.swift
@@ -35,7 +35,8 @@ public class ExternalAdRecommendationCell: UICollectionViewCell, AdRecommendatio
     private static let accessoryHeight: CGFloat = 14.0
     private static let margin: CGFloat = 8.0
     private static let cornerRadius: CGFloat = 8.0
-    private static let heightMultiplier: CGFloat = 1
+    private static let minImageAspectRatio: CGFloat = 0.75
+    private static let maxImageAspectRatio: CGFloat = 1.5
 
     private let loadingColor: UIColor = .backgroundSubtle
 
@@ -151,13 +152,19 @@ public class ExternalAdRecommendationCell: UICollectionViewCell, AdRecommendatio
 
         backgroundColor = .clear
 
+        let imageHeightMinimumConstraint = imageContentView.heightAnchor.constraint(equalTo: imageContentView.widthAnchor, multiplier: ExternalAdRecommendationCell.minImageAspectRatio)
+        let imageHeightMaximumConstraint = imageContentView.heightAnchor.constraint(lessThanOrEqualTo: imageContentView.widthAnchor, multiplier: ExternalAdRecommendationCell.maxImageAspectRatio)
+
+        imageHeightMinimumConstraint.priority = .defaultHigh
+
         containerView.fillInSuperview()
 
         NSLayoutConstraint.activate([
             imageContentView.topAnchor.constraint(equalTo: contentView.topAnchor),
             imageContentView.widthAnchor.constraint(equalTo: contentView.widthAnchor),
             imageContentView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
-            imageContentView.heightAnchor.constraint(equalTo: imageContentView.widthAnchor, multiplier: Self.heightMultiplier),
+            imageHeightMinimumConstraint,
+            imageHeightMaximumConstraint,
 
             ribbonView.topAnchor.constraint(equalTo: imageContentView.bottomAnchor, constant: ExternalAdRecommendationCell.ribbonTopMargin),
             ribbonView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
@@ -176,6 +183,7 @@ public class ExternalAdRecommendationCell: UICollectionViewCell, AdRecommendatio
             titleLabel.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: ExternalAdRecommendationCell.titleTopMargin),
             titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
             titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
+            titleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
         ])
     }
 
@@ -239,7 +247,9 @@ public class ExternalAdRecommendationCell: UICollectionViewCell, AdRecommendatio
 
     public static func height(for model: ExternalAdRecommendationViewModel, width: CGFloat) -> CGFloat {
         let titleHeight = model.title.height(withConstrainedWidth: width, font: .body)
-        let imageHeight = width * Self.heightMultiplier
+        let imageRatio = model.imageSize.height / model.imageSize.width
+        let clippedImageRatio = min(max(imageRatio, ExternalAdRecommendationCell.minImageAspectRatio), ExternalAdRecommendationCell.maxImageAspectRatio)
+        let imageHeight = width * clippedImageRatio
         let contentHeight = subtitleTopMargin + subtitleHeight + titleTopMargin + titleHeight + bottomMargin
 
         return imageHeight + contentHeight