Theming

amitaibu · Jul 18, 2024 · dd1e8eb · dd1e8eb
1 parent 3e3be79
commit dd1e8eb
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 22 deletions.
diff --git a/Web/Controller/ParagraphHeroImages.hs b/Web/Controller/ParagraphHeroImages.hs
@@ -68,7 +68,7 @@ instance Controller ParagraphHeroImagesController where
         redirectTo EditLandingPageAction { landingPageId = paragraphHeroImage.landingPageId }
 
 buildParagraphHeroImage paragraphHeroImage = paragraphHeroImage
-    |> fill @["landingPageId", "weight", "title", "subtitle"]
+    |> fill @["landingPageId", "weight", "title", "subtitle", "link"]
     |> validateField #title nonEmpty
     |> validateField #imageUrl nonEmpty
     |> return

diff --git a/Web/Element/ElementWrap.hs b/Web/Element/ElementWrap.hs
@@ -332,6 +332,7 @@ wrapTextFontWeight fontweight element =
             case fontweight of
                 FontWeightLight  -> "font-light"
                 FontWeightNormal -> "font-normal"
+                FontWeightMedium -> "font-medium"
                 FontWeightBold   -> "font-bold"
 
 wrapHeaderTag :: Int -> Html -> Html

diff --git a/Web/Element/HeroImage.hs b/Web/Element/HeroImage.hs
@@ -5,38 +5,47 @@ import Web.View.Prelude
 import Application.Helper.Icons
 import Web.Element.ElementWrap
 import Web.Element.Types
-
+import Web.Element.Button
 
 render :: RenderHeroImage -> Html
-render record@RenderHeroImage {title, subtitle, imageUrl} =
+render record@RenderHeroImage {title, subtitle, button, imageUrl} =
      titleWrapped
         ++ subTitleWrapped
-        |> wrapVerticalSpacing AlignNone
-        |> renderImageAndContent (pathTo $ RenderImageStyleAction 400 200 imageUrl signed)
+        ++ buttonHtml
+        |> wrapVerticalSpacingBig AlignNone
+        |> renderImageAndContent (pathTo $ RenderImageStyleAction 1536 466 imageUrl signed)
     where
         -- Sign the image URL to prevent tampering.
-        signed = signImageUrl imageUrl 400 200
+        signed = signImageUrl imageUrl 1536 466
 
-        titleWrapped = cs subtitle
+        titleWrapped = cs title
+            |> wrapHeaderTag 1
+            |> wrapTextFontWeight FontWeightBold
             |> wrapTextResponsiveFontSize TextSizeSm
 
         subTitleWrapped = cs subtitle
-            |> wrapTextResponsiveFontSize TextSizeSm
+            |> wrapTextFontWeight FontWeightMedium
+            |> wrapTextResponsiveFontSize TextSizeXl
+
+        buttonHtml = case button of
+            Just btn -> Web.Element.Button.render btn
+            Nothing -> mempty
 
 
 renderImageAndContent :: Text -> Html -> Html
 renderImageAndContent imageUrl items =
-    -- We use grid and row/col start to position both the image and the text on the same cell.
     [hsx|
-        <div class="flex flex-col sm:grid sm:grid-rows-1 md:grid-cols-2 gap-2 md:gap-8 lg:gap-10 overflow-hidden bg-gray-50">
-
-            <div class="w-full grid grid-rows-1">
-                <figure class="row-start-1 col-start-1 child-object-cover h-full">
-                    {image}
-                </figure>
-            </div>
-            <div class="pt-5 pb-8 px-5 lg:py-8 lg:max-w-lg my-auto">
-                {items}
+        <div class="grid grid-rows-1">
+            <figure class="row-start-1 col-start-1 child-object-cover">
+                {image}
+            </figure>
+
+            <div class="row-start-1 col-start-1 z-10 flex flex-col justify-center">
+                <div class="container-wide w-full">
+                    <div class="max-w-prose my-6 md:my-8 p-6 md:p-8 lg:p-10 bg-white/90 flex flex-col gap-3 md:gap-4 lg:gap-5 rounded-lg">
+                        {items}
+                    </div>
+                </div>
             </div>
         </div>
     |]

diff --git a/Web/Element/Types.hs b/Web/Element/Types.hs
@@ -5,7 +5,7 @@ data Align = AlignNone | AlignStart | AlignCenter | AlignEnd | AlignBaseline der
 
 data Justify = JustifyStart | JustifyCenter | JustifyEnd | JustifyBetween deriving (Eq, Show)
 
-data FontWeight = FontWeightLight | FontWeightNormal | FontWeightBold deriving (Eq, Show)
+data FontWeight = FontWeightLight | FontWeightNormal | FontWeightMedium | FontWeightBold deriving (Eq, Show)
 
 data Color
     = ColorTransparent
@@ -64,6 +64,7 @@ data RenderHeroImage = RenderHeroImage
     { title    :: Text
     , subtitle :: Text
     , imageUrl :: Text
+    , button :: Maybe RenderButton
     }
 
 

diff --git a/Web/View/LandingPages/Show.hs b/Web/View/LandingPages/Show.hs
@@ -96,9 +96,20 @@ renderParagraphQuote paragraphQuote =
 
 renderParagraphHeroImage :: ParagraphHeroImage -> Html
 renderParagraphHeroImage paragraphHeroImage =
+    let
+        button = case paragraphHeroImage.link of
+            Just linkText ->
+                Just RenderButton
+                    { text = "Read More"
+                    , url = linkText
+                    , isPrimary = True
+                    }
+            _ -> Nothing
+    in
     RenderHeroImage
         { title = paragraphHeroImage.title
         , subtitle = paragraphHeroImage.subtitle |> fromMaybe ""
         , imageUrl = paragraphHeroImage.imageUrl |> fromMaybe ""
+        , button = button
         }
         |> Web.Element.HeroImage.render
diff --git a/Web/View/ParagraphHeroImages/Edit.hs b/Web/View/ParagraphHeroImages/Edit.hs
@@ -11,7 +11,7 @@ instance View EditView where
     html EditView { .. } = [hsx|
         {breadcrumb}
         <h1>Edit Paragraph Hero Image</h1>
-        {renderForm paragraphHeroImage False formStatus}
+        {renderForm paragraphHeroImage True formStatus}
     |]
         where
             breadcrumb = renderBreadcrumb

diff --git a/Web/View/ParagraphHeroImages/Form.hs b/Web/View/ParagraphHeroImages/Form.hs
@@ -20,15 +20,16 @@ renderForm paragraphHeroImage isImageRequired formStatus = formFor paragraphHero
         visibleForm paragraphHeroImage =
             [hsx|
                 {(textField #title) {required = True}}
-                {(textField #subtitle) {required = True}}
+                {(textField #subtitle)}
+                {(textField #link)}
 
                 <div class="flex flex-row">
                     {(fileField #imageUrl) {required = isImageRequired, additionalAttributes = [("accept", "image/*"), ("data-preview", "#imageUrlPreview")]}}
 
                     <img id="imageUrlPreview" src={paragraphHeroImage.imageUrl} class="w-20 h-20" />
                 </div>
 
-                {renderSubmitButtonwithFormStatus submitButton formStatus}
+                {renderSubmitButtonwithFormStatus (submitButton {label = "Save Hero Image"}) formStatus}
             |]
             |> wrapVerticalSpacing AlignNone
             |> wrapContainerWide