upRootNutrition/website
1
0
Fork 0
mirror of https://gitlab.com/upRootNutrition/website.git synced 2025-06-16 12:25:12 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: started working on responsiveness

Browse source
This commit is contained in:
Nick 2024-12-06 00:43:00 -06:00
parent e6b3e90698
commit 0339496f42
37 changed files with 790 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

173
frontend/src/Products/Helpers.elm
View file

@ -27,49 +27,13 @@ nutriDexMaker : NutriDex -> Element msg
nutriDexMaker nutridex =
row
topLevelBox
[ column
[ E.width <| px 785
, D.width 5
, D.color colourTheme.backgroundDarkGrey
, D.roundEach
{ topLeft = 32
, topRight = 32
, bottomRight = 32
, bottomLeft = 32
}
]
[ paragraph
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.textDarkOrange
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, width fill
, F.center
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text (String.toUpper nutridex.nutriDexTitle) ]
[ cardMaker
[ cardTitleMaker (nutriDexTitle nutridex)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ paragraph
(paragraphFormat
++ [ F.size 18
, F.center
]
)
[ cardSubTitleMaker
[ featureList nutridex
, nutriDexTitleMaker
, nutriDexBodyMaker
@ -90,6 +54,42 @@ nutriDexMaker nutridex =
]
nutriDexMakerMobile : NutriDex -> Element msg
nutriDexMakerMobile nutridex =
row
topLevelBox
[ cardMaker
[ cardTitleMaker (nutriDexTitle nutridex)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ cardSubTitleMaker
[ featureListMobile nutridex
, nutriDexTitleMaker
, nutriDexBodyMaker
, nutriDexAdjustments
, column [ spacing 10 ]
[ nutriDexVitamins
, nutriDexFattyAcids
, nutriDexMinerals
, nutriDexAminoAcids
]
, nutriDexReferenceTitleMaker
, nutriDexReferences nutridex
]
]
]
]
]
]
nutriDexTitle : NutriDex -> String
nutriDexTitle nutridex =
String.toUpper nutridex.nutriDexTitle
makeFeature : Features -> Element msg
makeFeature features =
column
@ -133,19 +133,14 @@ featureList nutridex =
[ spacing 20
]
[ row
[ D.rounded 25
, D.width 5
, centerX
, D.color colourTheme.backgroundLightGrey
, B.color colourTheme.backgroundLightGrey
[ centerX
]
[ E.image
[ D.rounded 20
, clip
, E.width <| px 305
, E.height <| px 231
, E.width <| px 250
]
{ src = "nutridex/nutridex.png", description = "" }
{ src = "assets/nutridex.png", description = "" }
]
, row
[ D.width 5
@ -199,10 +194,88 @@ featureList nutridex =
]
featureListMobile : NutriDex -> Element msg
featureListMobile nutridex =
column
[ spacing 8
, width fill
, height fill
, paddingEach
{ top = 10
, bottom = 0
, left = 0
, right = 0
}
]
[ column
[ spacing 20
, centerX
]
[ row
[ centerX
]
[ E.image
[ D.rounded 20
, clip
, E.width <| px 150
]
{ src = "assets/nutridex.png", description = "" }
]
, row
[ D.width 5
, D.rounded 25
, centerX
, D.color colourTheme.backgroundLightGrey
, B.color colourTheme.backgroundLightGrey
]
[ row
[ B.color colourTheme.textDarkOrange
, D.rounded 30
, F.size 25
, F.bold
, paddingEach
{ top = 10
, right = 25
, bottom = 10
, left = 25
}
]
[ newTabLink []
{ url = "https://the-nutrivore.myshopify.com/cart/31192710807615:1?channel=buy_button"
, label = row [ F.center ] [ text "$19.99" ]
}
]
]
, column
[ centerX ]
[ column
[ F.size 18
, F.bold
, F.color colourTheme.textLightOrange
]
[ newTabLink []
{ url = "https://drive.google.com/file/d/1sk7VgjuL2rEqQdnBRdZjr2_Ab9vwrbmo/view?usp=sharing"
, label =
paragraph
[ centerX
, centerY
]
[ text "Free Cost Efficiency Score!" ]
}
]
]
]
, column [ width fill, F.size 12, spacing 3 ] <|
List.map2 (\x y -> makeFeature x)
nutridex.nutriDexFeatures
(List.range 1 (List.length nutridex.nutriDexFeatures))
]
nutriDexTitleMaker : Element msg
nutriDexTitleMaker =
column
[ width <| px 725
[ width fill
, height fill
, spacing 20
]
@ -321,7 +394,7 @@ nutriDexAdjustments =
, height fill
]
[ column
[ width <| px 725
[ width fill
, height fill
, spacing 20
]
@ -774,7 +847,7 @@ nutriDexAminoAcids =
nutriDexReferenceTitleMaker : Element msg
nutriDexReferenceTitleMaker =
column
[ width <| px 725
[ width fill
, height fill
, spacing 20
]