Merge pull request #13 from juandahurt/story

feat: improve story view ui
payan-app · Jun 3, 2022 · f413576 · f413576
2 parents 614c84e + 0e12624
commit f413576
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/PuraceDemo/PuraceDemo/Examples/Complex/StoryExample.swift b/PuraceDemo/PuraceDemo/Examples/Complex/StoryExample.swift
@@ -29,7 +29,7 @@ struct StoryExample: View {
                 title: "Third title",
                 subtitle: "La Ajliyh dlkjsouoy ojsf del Cauca es una universidad pública de Colombia, sujeta a inspección y vigilancia por medio de la Ley 174Sholj ljlih osdfyán, "
             )
-        ])
+        ]).frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.55)
         Spacer()
     }
 }

diff --git a/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift b/Sources/Purace/Views/Complex/Story/PuraceStoryView.swift
@@ -37,44 +37,47 @@ public struct PuraceStoryView: View {
     }
 
     public var body: some View {
-        ZStack {
-            PuraceImageView(url: stories[currentIndex].image)
-            LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.35)]), startPoint: .top, endPoint: .center)
-            VStack {
-                Spacer()
-                HStack {
-                    PuraceTextView(stories[currentIndex].title, fontSize: 16, textColor: .white, weight: .medium)
+        GeometryReader { outterReader in
+            ZStack {
+                PuraceImageView(url: stories[currentIndex].image)
+                    .aspectRatio(contentMode: .fill)
+                    .frame(width: outterReader.size.width)
+                Color.black.opacity(0.3)
+                VStack(spacing: 8) {
                     Spacer()
-                }
-                HStack {
-                    PuraceTextView(stories[currentIndex].subtitle, fontSize: 12, textColor: .white)
+                    HStack {
+                        PuraceTextView(stories[currentIndex].title, fontSize: 18, textColor: .white, weight: .medium)
+                        Spacer()
+                    }
+                    HStack {
+                        PuraceTextView(stories[currentIndex].subtitle, fontSize: 14, textColor: .white)
+                        Spacer()
+                    }
+                }.padding()
+                VStack {
+                    indicators
                     Spacer()
                 }
-            }.padding()
-            VStack {
-                indicators
-                Spacer()
-            }
-                .padding(5)
-            GeometryReader { geometry in
-                HStack {
-                    Color.gray
-                        .opacity(0.001)
-                        .frame(width: geometry.size.width * 0.4)
-                        .onTapGesture {
-                            back()
-                        }
-                    Spacer()
-                    Color.gray // When opacity = 0 or the color is `clear`, tap gesture doesn't work :c
-                        .opacity(0.001)
-                        .frame(width: geometry.size.width * 0.4)
-                        .onTapGesture {
-                            next()
-                        }
+                    .padding(5)
+                GeometryReader { innerReader in
+                    HStack {
+                        Color.gray
+                            .opacity(0.001)
+                            .frame(width: innerReader.size.width * 0.4)
+                            .onTapGesture {
+                                back()
+                            }
+                        Spacer()
+                        Color.gray // When opacity = 0 or the color is `clear`, tap gesture doesn't work :c
+                            .opacity(0.001)
+                            .frame(width: innerReader.size.width * 0.4)
+                            .onTapGesture {
+                                next()
+                            }
+                    }
+
                 }
-
             }
-        }.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.33)
-
+        }
     }
 }