Make NTP Grid layout adaptive for various screen sizes

duckduckgo · Dec 2, 2024 · 78a579b · 78a579b
1 parent cc448e0
commit 78a579b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/DuckDuckGo/FavoriteIconView.swift b/DuckDuckGo/FavoriteIconView.swift
@@ -33,25 +33,22 @@ struct FavoriteIconView: View {
     let faviconLoading: FavoritesFaviconLoading?
 
     var body: some View {
-        ZStack {
-            RoundedRectangle(cornerRadius: 8)
-                .fill(Color(designSystemColor: .surface))
-                .shadow(color: .shade(0.12), radius: 0.5, y: 1)
-                .aspectRatio(1, contentMode: .fit)
-
-            Image(uiImage: favicon.image)
-                .resizable()
-                .aspectRatio(1.0, contentMode: .fit)
-                .if(favicon.isUsingBorder) {
-                    $0.padding(Constant.borderSize)
+        RoundedRectangle(cornerRadius: 8)
+            .fill(Color(designSystemColor: .surface))
+            .shadow(color: .shade(0.12), radius: 0.5, y: 1)
+            .aspectRatio(1, contentMode: .fit)
+            .overlay {
+                Image(uiImage: favicon.image)
+                    .resizable()
+                    .aspectRatio(1.0, contentMode: .fill)
+                    .padding(favicon.isUsingBorder ? Constant.borderSize : 0)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+            }
+            .task {
+                if favicon.isFake, let favicon = await faviconLoading?.loadFavicon(for: favorite, size: Constant.faviconSize) {
+                    self.favicon = favicon
                 }
-                .clipShape(RoundedRectangle(cornerRadius: 8))
-        }
-        .task {
-            if favicon.isFake, let favicon = await faviconLoading?.loadFavicon(for: favorite, size: Constant.faviconSize) {
-                self.favicon = favicon
             }
-        }
     }
 }
 

diff --git a/DuckDuckGo/NewTabPageGridView.swift b/DuckDuckGo/NewTabPageGridView.swift
@@ -32,7 +32,7 @@ struct NewTabPageGridView<Content: View>: View {
     var body: some View {
         let columnsCount = NewTabPageGrid.columnsCount(for: horizontalSizeClass, isLandscape: isLandscape, isDynamic: isUsingDynamicSpacing)
 
-        LazyVGrid(columns: createColumns(columnsCount), spacing: 24, content: {
+        LazyVGrid(columns: createColumns(columnsCount), alignment: .center, spacing: 24, content: {
             content(columnsCount)
         })
         .frame(maxWidth: .infinity)
@@ -67,10 +67,17 @@ struct NewTabPageGridView<Content: View>: View {
     }
 
     private func staticColumns(_ count: Int) -> [GridItem] {
-        return Array(repeating: GridItem(.fixed(NewTabPageGrid.Item.edgeSize),
-                                         spacing: NewTabPageGrid.Item.staticSpacing,
-                                         alignment: .top),
+        let isRegularSizeClassOnPad =  UIDevice.current.userInterfaceIdiom == .pad && horizontalSizeClass == .regular
+
+        let spacing: CGFloat = isRegularSizeClassOnPad ? NewTabPageGrid.Item.staticSpacingPad : NewTabPageGrid.Item.staticSpacing
+        let maximumSize = NewTabPageGrid.Item.maximumWidth - spacing
+        let itemSize = GridItem.Size.flexible(minimum: NewTabPageGrid.Item.edgeSize,
+                                          // This causes automatic (larger) spacing, when spacing itself is small comparing to parent view width.
+                                              maximum: maximumSize)
+
+        return Array(repeating: GridItem(itemSize, spacing: spacing, alignment: .top),
                      count: count)
+
     }
 
     private func createColumns(_ count: Int) -> [GridItem] {
@@ -106,6 +113,12 @@ enum NewTabPageGrid {
         return isPad && sizeClass == .regular ? ColumnCount.staticWideLayout : ColumnCount.compact
     }
 
+    static func staticGridSpacing(for sizeClass: UserInterfaceSizeClass?) -> CGFloat? {
+        let isPad = UIDevice.current.userInterfaceIdiom == .pad
+
+        return isPad && sizeClass == .regular ? NewTabPageGrid.Item.staticSpacingPad : nil
+    }
+
     enum Item {
         static let edgeSize = 64.0
     }
@@ -120,5 +133,7 @@ private extension NewTabPageGrid {
 }
 
 private extension NewTabPageGrid.Item {
-    static let staticSpacing = 32.0
+    static let staticSpacing = 10.0
+    static let staticSpacingPad = 32.0
+    static let maximumWidth = 128.0
 }
diff --git a/DuckDuckGo/SimpleNewTabPageView.swift b/DuckDuckGo/SimpleNewTabPageView.swift
@@ -81,7 +81,8 @@ private extension SimpleNewTabPageView {
 
                     favoritesSectionView(proxy: proxy)
                 }
-                .padding(sectionsViewPadding(in: proxy))
+                .padding(.vertical, Metrics.regularPadding)
+                .padding(.horizontal, Metrics.smallPadding)
             }
             .withScrollKeyboardDismiss()
         }