feat: started working on responsiveness

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

View file

@ -14,10 +14,18 @@
"meta": [
{ "charset": "UTF-8" },
{ "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
{ "name": "viewport", "content": "width=device-width, initial-scale=1.0" }
{
"name": "viewport",
"content": "width=device-width, initial-scale=1.0"
}
],
"link": [
{ "rel": "stylesheet", "href": "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap" }
{ "rel": "icon", "type": "png", "href": "/favicon.png" },
{ "rel": "stylesheet", "href": "/styles.css" },
{
"rel": "stylesheet",
"href": "https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap"
}
],
"script": []
},

View file

@ -17,19 +17,25 @@ import View exposing (View)
topLevelBox =
[ spacing 20
, E.width fill
[ E.width fill
, E.height fill
, E.alignTop
, E.alignRight
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
]
cardMaker : List (Element msg) -> Element msg
cardMaker =
column
[ E.width <| px 650
[ E.width fill
, D.width 5
, centerX
, D.color colourTheme.backgroundDarkGrey
, D.rounded 32
]
@ -40,6 +46,7 @@ cardFormatter =
column
[ E.height fill
, E.width fill
, centerX
, B.color colourTheme.backgroundDarkGrey
, paddingEach
{ top = 10
@ -57,6 +64,17 @@ cardFormatter =
]
cardSubTitleMaker : List (Element msg) -> Element msg
cardSubTitleMaker =
paragraph
(paragraphFormat
++ [ F.size 18
, centerX
, F.center
]
)
cardContentSpacing : List (Element msg) -> Element msg
cardContentSpacing =
column
@ -100,9 +118,44 @@ cardImageMaker image =
]
cardImageMakerMobile : { src : String, description : String } -> Element msg
cardImageMakerMobile image =
column
[ alignTop
, centerX
, alignLeft
, paddingEach
{ top = 0
, bottom = 10
, left = 0
, right = 0
}
]
[ column
[ D.rounded 100
, D.width 5
, centerX
, alignBottom
, D.color colourTheme.backgroundLightGrey
, B.color colourTheme.backgroundLightGrey
, mouseOver [ D.color colourTheme.textDarkOrange ]
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
]
[ E.image
[ D.rounded 100
, clip
, centerX
, E.width <| px 45
, E.height <| px 45
]
image
]
]
cardTitleMaker : String -> Element msg
cardTitleMaker title =
row
paragraph
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.textDarkOrange
@ -114,6 +167,8 @@ cardTitleMaker title =
}
, alignBottom
, width fill
, centerX
, F.center
, D.roundEach
{ topLeft = 26
, topRight = 26

View file

@ -14,16 +14,8 @@ topLevelContainer =
el
[ E.width fill
, height fill
, B.color colourTheme.backgroundLightGrey
]
pageList : List (Attribute msg)
pageList =
[ spacing 30
, centerX
, alignTop
, paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
, B.color colourTheme.backgroundLightGrey
]
@ -143,20 +135,15 @@ paragraphBoldFormat =
++ paragraphText
paragraphWidth : Attribute msg
paragraphWidth =
E.width <| px 700
paragraphAlignLeft : List (Attr () msg)
paragraphAlignLeft =
[ alignLeft, paragraphWidth ]
[ alignLeft ]
++ paragraphText
paragraphAlignCenter : List (Attr () msg)
paragraphAlignCenter =
[ centerX, paragraphWidth ]
[ centerX ]
++ paragraphText

View file

@ -0,0 +1,21 @@
module Config.Response exposing (..)
import Config.Colour exposing (..)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D exposing (..)
import Element.Font as F
import Html exposing (col)
import Html.Attributes as H exposing (style)
pageListDesktop : List (Attribute msg)
pageListDesktop =
[ spacing 30
, centerX
, alignTop
, height fill
, paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
, E.width (fill |> minimum 100)
, E.width (fill |> maximum 875)
]

View file

@ -29,8 +29,7 @@ contactMaker : Contact -> Element msg
contactMaker contact =
row
topLevelBox
[ cardImageMaker (contactImage contact)
, cardMaker
[ cardMaker
[ cardTitleMaker (contactTitle contact)
, cardFormatter
[ cardContentSpacing
@ -109,49 +108,13 @@ instructionMaker : Element msg
instructionMaker =
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 "CONTACT" ]
[ cardMaker
[ cardTitleMaker "CONTACT"
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ paragraph
(paragraphFormat
++ [ F.size 18
, F.center
]
)
[ cardSubTitleMaker
[ instructionBody ]
]
]
@ -222,6 +185,7 @@ instructionBody =
[ paragraph
[ width fill
, F.size 16
, F.alignLeft
]
term
]

View file

@ -38,6 +38,34 @@ cuckMaker cuck =
]
cuckMakerMobile : Cuck -> Element msg
cuckMakerMobile cuck =
column
topLevelBox
[ column [] []
, cardMaker
[ cardTitleMaker (cuckTitle cuck)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ column
[ alignTop
, centerX
, alignLeft
]
[ cardImageMakerMobile (cuckImage cuck)
, socialMaker cuck
, dodgeTitle cuck
, dodgeMaker cuck
]
]
]
]
]
]
cuckImage :
Cuck
->
@ -231,7 +259,7 @@ propositionMaker dodgeEntry =
]
[ text "Proposition:"
]
, column
, paragraph
[ E.width fill
, alignLeft
]
@ -249,7 +277,7 @@ attitudeMaker dodgeEntry =
]
[ text "Attitude:"
]
, column
, paragraph
[ E.width fill
, alignLeft
]
@ -332,11 +360,7 @@ reasonMaker dodgeEntry =
]
[ text "Reason:"
]
, column
[ E.width fill
, alignLeft
]
[ paragraph [ F.regular ]
, paragraph [ F.regular ]
[ text <|
case dodgeEntry.dodgeNicksDoxasticReason of
NoProp ->
@ -349,7 +373,6 @@ reasonMaker dodgeEntry =
str
]
]
]
displayFallacy : String -> Element msg
@ -361,7 +384,7 @@ displayFallacy fallacyText =
]
[ text "Fallacy:"
]
, column
, paragraph
[ E.width fill
, alignLeft
]

View file

@ -28,7 +28,7 @@ argumentMaker argument =
topLevelBox
[ cardImageMaker (argumentImage argument)
, cardMaker
[ cardTitleMaker (argumentTitle argument)
[ cardTitleMaker argument.argumentTitle
, cardFormatter
[ cardContentSpacing
[ column
@ -46,6 +46,31 @@ argumentMaker argument =
]
argumentMakerMobile : Argument -> Element msg
argumentMakerMobile argument =
row
topLevelBox
[ column [] []
, cardMaker
[ cardTitleMaker argument.argumentTitle
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ cardImageMakerMobile (argumentImage argument)
, propositionMaker argument
, reductioMaker argument
, summaryMaker argument
, strengthMaker argument
, tableMaker argument
, proofTreeMaker argument
]
]
]
]
]
argumentImage : Argument -> { src : String, description : String }
argumentImage argument =
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
@ -53,9 +78,8 @@ argumentImage argument =
}
argumentTitle : Argument -> String
argumentTitle argument =
argument.argumentTitle
infoSpacing =
E.width <| px 100
propositionMaker : Argument -> Element msg
@ -66,7 +90,7 @@ propositionMaker argument =
[ paragraph
(paragraphBoldFormat
++ [ F.size 18
, E.width <| px 100
, infoSpacing
]
)
[ el
@ -111,7 +135,7 @@ reductioMaker argument =
[ paragraph
(paragraphBoldFormat
++ [ F.size 18
, E.width <| px 100
, infoSpacing
]
)
[ el
@ -144,7 +168,7 @@ summaryMaker argument =
[ paragraph
(paragraphBoldFormat
++ [ F.size 18
, E.width <| px 100
, infoSpacing
]
)
[ el
@ -360,12 +384,12 @@ formalizationMaker argument =
(paragraphFormat
++ [ spacing 3
, centerX
, E.width <| px 500
, E.width fill
, paddingEach
{ top = 10
, right = 0
, right = 35
, bottom = 0
, left = 0
, left = 35
}
]
)
@ -447,7 +471,6 @@ proofTreeMaker argument =
, right = 12
}
, D.rounded 10
, E.width <| px 105
, F.center
, E.alignRight
, transitionStyle

View file

@ -51,6 +51,32 @@ donateMaker donate =
]
donateMakerMobile : Donate -> Element msg
donateMakerMobile donate =
row
topLevelBox
[ column [] []
, cardMaker
[ cardTitleMaker (donateTitle donate)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ cardImageMakerMobile (donateImage donate)
, feeMaker donate
, preferenceMaker donate
, tableMaker donate
, proTitleMaker donate
, proMaker donate
, conTitleMaker donate
, conMaker donate
]
]
]
]
]
donateImage :
Donate
->

View file

@ -25,7 +25,9 @@ headerMaker header =
row
topLevelBox
[ column
[ E.width <| px 785
[ E.width fill
-- E.width <| px 785
, D.width 5
, D.color colourTheme.backgroundDarkGrey
, D.roundEach

View file

@ -40,6 +40,28 @@ interviewMaker interview =
]
interviewMakerMobile : Interview -> Element msg
interviewMakerMobile interview =
row
topLevelBox
[ column [] []
, cardMaker
[ cardTitleMaker (interviewTitle interview)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ cardImageMakerMobile (interviewImage interview)
, socialMaker interview
, appearanceTitle interview
, appearanceMaker interview
]
]
]
]
]
interviewImage : Interview -> { src : String, description : String }
interviewImage interview =
{ src = "interviews/" ++ interview.interviewImage ++ ".png"

View file

@ -26,7 +26,14 @@ layout props shared route =
Layout.new
{ init = init
, update = update
, view = \layoutArgs -> view { props = props, content = layoutArgs.content, model = layoutArgs.model, toContentMsg = layoutArgs.toContentMsg }
, view =
\layoutArgs ->
view
{ props = props
, content = layoutArgs.content
, model = layoutArgs.model
, toContentMsg = layoutArgs.toContentMsg
}
, subscriptions = subscriptions
}
@ -115,23 +122,18 @@ view { content, model, toContentMsg, props } =
)
[ E.image
[ spacing 2
, E.width <| px 180
, E.width <| px 140
, centerX
, paddingEach
{ top = 20
, right = 0
, bottom = 20
, left = 0
}
]
{ src = "navbar/uprootnutrition.png"
{ src = "assets/logo.png"
, description = ""
}
-- , column []
-- [ link [ centerX ]
-- { url = localhostUrl ++ pageNames.pageHome
-- , label = text "upRoot"
-- }
-- , link [ centerX ]
-- { url = localhostUrl ++ pageNames.pageHome
-- , label = text "Nutrition"
-- }
-- ]
]
, el
[ E.width <| px 140

View file

@ -72,6 +72,7 @@ import Ports exposing (gotArgHeight)
import Route exposing (Route)
import Shared
import View exposing (View)
import Config.Response exposing (..)
page : Shared.Model -> Route () -> Page Model Msg
@ -157,7 +158,7 @@ debateList : Element msg
debateList =
column [ centerX ]
[ column
pageList
pageListDesktop
<|
List.concat
[ List.map headerMaker

View file

@ -3,6 +3,7 @@ module Pages.Contact exposing (Model, Msg, page)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Contact.Helpers exposing (..)
import Contact.Methods.Discord exposing (contactDiscord)
@ -27,7 +28,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -84,22 +85,45 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = contactName
, attributes = []
, element = contactContainer
, element = contactContainer shared.device
}
contactContainer : Element msg
contactContainer =
topLevelContainer contactList
contactContainer : Device -> Element msg
contactContainer device =
topLevelContainer (contactList device)
contactList : Element msg
contactList =
column pageList <|
contactList : Device -> Element msg
contactList device =
column pageListDesktop <|
List.concat
[ [ instructionMaker ]
]
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
[ [] ]
( Phone, Landscape ) ->
[ [instructionMaker] ]
( Tablet, Portrait ) ->
[ [instructionMaker] ]
( Tablet, Landscape ) ->
[ [instructionMaker] ]
( Desktop, Portrait ) ->
[ [instructionMaker] ]
( Desktop, Landscape ) ->
[ [instructionMaker] ]
( BigDesktop, Portrait ) ->
[ [instructionMaker] ]
( BigDesktop, Landscape ) ->
[ [ instructionMaker ] ]
)

View file

@ -3,6 +3,7 @@ module Pages.Cucklist exposing (Model, Msg, page)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Cuckery.CuckList.AdamSinger.AdamSinger exposing (cuckAdamSinger)
import Cuckery.CuckList.AmberOHearn.AmberOHearn exposing (cuckAmberOHearn)
@ -91,7 +92,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -148,28 +149,76 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = dodgersName
, attributes = []
, element = dodgersContainer
, element = dodgersContainer shared.device
}
dodgersContainer : Element msg
dodgersContainer =
topLevelContainer dodgersList
dodgersContainer : Device -> Element msg
dodgersContainer device =
topLevelContainer (dodgersList device)
dodgersList : Element msg
dodgersList =
dodgersList : Device -> Element msg
dodgersList device =
column
pageList
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
pageListDesktop
( Phone, Landscape ) ->
pageListDesktop
( Tablet, Portrait ) ->
pageListDesktop
( Tablet, Landscape ) ->
pageListDesktop
( Desktop, Portrait ) ->
pageListDesktop
( Desktop, Landscape ) ->
pageListDesktop
( BigDesktop, Portrait ) ->
pageListDesktop
( BigDesktop, Landscape ) ->
pageListDesktop
)
<|
List.concat
[ List.map headerMaker
[ cuckListHeader ]
, List.map cuckMaker
, (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
List.map cuckMakerMobile
( Phone, Landscape ) ->
List.map cuckMakerMobile
( Tablet, Portrait ) ->
List.map cuckMakerMobile
( Tablet, Landscape ) ->
List.map cuckMakerMobile
( Desktop, Portrait ) ->
List.map cuckMaker
( Desktop, Landscape ) ->
List.map cuckMaker
( BigDesktop, Portrait ) ->
List.map cuckMaker
( BigDesktop, Landscape ) ->
List.map cuckMaker
)
[ cuckAdamSinger
, cuckAmberOHearn
, cuckAnnChilders

View file

@ -4,6 +4,7 @@ import Browser.Dom as Dom
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Donate.Helpers exposing (..)
import Donate.Methods.Cardano exposing (donateCardano)
@ -36,7 +37,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -93,26 +94,76 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = donateName
, attributes = []
, element = donateContainer
, element = donateContainer shared.device
}
donateContainer : Element msg
donateContainer =
topLevelContainer donateList
donateContainer : Device -> Element msg
donateContainer device =
topLevelContainer (donateList device)
donateList : Element msg
donateList =
column pageList <|
donateList : Device -> Element msg
donateList device =
column
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
pageListDesktop
( Phone, Landscape ) ->
pageListDesktop
( Tablet, Portrait ) ->
pageListDesktop
( Tablet, Landscape ) ->
pageListDesktop
( Desktop, Portrait ) ->
pageListDesktop
( Desktop, Landscape ) ->
pageListDesktop
( BigDesktop, Portrait ) ->
pageListDesktop
( BigDesktop, Landscape ) ->
pageListDesktop
)
<|
List.concat
[ List.map headerMaker
[ donateHeader ]
, List.map donateMaker
, (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
List.map donateMakerMobile
( Phone, Landscape ) ->
List.map donateMakerMobile
( Tablet, Portrait ) ->
List.map donateMakerMobile
( Tablet, Landscape ) ->
List.map donateMakerMobile
( Desktop, Portrait ) ->
List.map donateMaker
( Desktop, Landscape ) ->
List.map donateMaker
( BigDesktop, Portrait ) ->
List.map donateMaker
( BigDesktop, Landscape ) ->
List.map donateMaker
)
[ donateLiberaPay
, donatePayPal
, donatePatreon

View file

@ -29,7 +29,7 @@ import Ports exposing (gotArgHeight)
import Route exposing (Route)
import Shared
import View exposing (View)
import Config.Response exposing (..)
page : Shared.Model -> Route () -> Page Model Msg
page shared route =
@ -114,7 +114,7 @@ gibberishList : Element msg
gibberishList =
column [ centerX ]
[ column
pageList
pageListDesktop
<|
List.concat
[ List.map headerMaker

View file

@ -6,7 +6,9 @@ import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Viewport exposing (..)
import Effect exposing (Effect)
import Element exposing (..)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
@ -14,7 +16,7 @@ import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import View exposing (View)
import Config.Response exposing (..)
page : Shared.Model -> Route () -> Page Model Msg
page shared route =
@ -94,12 +96,31 @@ homeContainer =
homeList : Element msg
homeList =
none
-- column
-- pageList
-- <|
-- List.map homeMaker
-- []
column pageListDesktop
[ column
[ centerX
, centerY
, spacing 20
]
[ row [ centerX ]
[ E.image [ E.width <| px 785 ]
{ src = "assets/logo_extended.png"
, description = ""
}
]
, column
[ paddingEach
{ top = 15
, bottom = 15
, left = 20
, right = 20
}
, B.color colourTheme.backgroundDarkGrey
, rounded 10
, E.width fill
, spacing 8
]
[ paragraph (paragraphFormat ++ [ centerX ]) [ text "upRootNutrition is an open source project, created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media." ]
]
]
]

View file

@ -16,7 +16,7 @@ import Route exposing (Route)
import Shared exposing (..)
import View exposing (View)
import Config.Viewport exposing (..)
import Config.Response exposing (..)
page : Shared.Model -> Route () -> Page Model Msg
page shared route =
Page.new

View file

@ -3,6 +3,7 @@ module Pages.Interviews exposing (Model, Msg, page)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Effect exposing (Effect)
import Element exposing (..)
@ -36,7 +37,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -93,28 +94,76 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = interviewsName
, attributes = []
, element = interviewContainer
, element = interviewContainer shared.device
}
interviewContainer : Element msg
interviewContainer =
topLevelContainer interviewList
interviewContainer : Device -> Element msg
interviewContainer device =
topLevelContainer (interviewList device)
interviewList : Element msg
interviewList =
interviewList : Device -> Element msg
interviewList device =
column
pageList
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
pageListDesktop
( Phone, Landscape ) ->
pageListDesktop
( Tablet, Portrait ) ->
pageListDesktop
( Tablet, Landscape ) ->
pageListDesktop
( Desktop, Portrait ) ->
pageListDesktop
( Desktop, Landscape ) ->
pageListDesktop
( BigDesktop, Portrait ) ->
pageListDesktop
( BigDesktop, Landscape ) ->
pageListDesktop
)
<|
List.concat
[ List.map headerMaker
[ interviewHeader ]
, List.map interviewMaker
, (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
List.map interviewMakerMobile
( Phone, Landscape ) ->
List.map interviewMakerMobile
( Tablet, Portrait ) ->
List.map interviewMakerMobile
( Tablet, Landscape ) ->
List.map interviewMakerMobile
( Desktop, Portrait ) ->
List.map interviewMaker
( Desktop, Landscape ) ->
List.map interviewMaker
( BigDesktop, Portrait ) ->
List.map interviewMaker
( BigDesktop, Landscape ) ->
List.map interviewMaker
)
[ sigmaNutritionRadio
, markBellsPowerProject
, foolproofMastery

View file

@ -7,7 +7,7 @@ import Route exposing (Route)
import Route.Path
import Shared
import View exposing (View)
import Config.Response exposing (..)
page : Shared.Model -> Route () -> Page Model Msg
page shared route =

View file

@ -3,6 +3,7 @@ module Pages.Nutridex exposing (Model, Msg, page)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Donate.Types exposing (..)
import Effect exposing (Effect)
@ -31,7 +32,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -58,6 +59,7 @@ init () =
)
-- UPDATE
@ -87,23 +89,73 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = nutriDexName
, attributes = []
, element = nutriDexContainer
, element = nutriDexContainer shared.device
}
nutriDexContainer : Element msg
nutriDexContainer =
topLevelContainer nutriDexList
nutriDexContainer : Device -> Element msg
nutriDexContainer device =
topLevelContainer (nutriDexList device)
nutriDexList : Element msg
nutriDexList =
column pageList <|
nutriDexList : Device -> Element msg
nutriDexList device =
column
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
pageListDesktop
( Phone, Landscape ) ->
pageListDesktop
( Tablet, Portrait ) ->
pageListDesktop
( Tablet, Landscape ) ->
pageListDesktop
( Desktop, Portrait ) ->
pageListDesktop
( Desktop, Landscape ) ->
pageListDesktop
( BigDesktop, Portrait ) ->
pageListDesktop
( BigDesktop, Landscape ) ->
pageListDesktop
)
<|
List.concat
[ List.map nutriDexMaker
[ (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
List.map nutriDexMakerMobile
( Phone, Landscape ) ->
List.map nutriDexMakerMobile
( Tablet, Portrait ) ->
List.map nutriDexMakerMobile
( Tablet, Landscape ) ->
List.map nutriDexMakerMobile
( Desktop, Portrait ) ->
List.map nutriDexMaker
( Desktop, Landscape ) ->
List.map nutriDexMaker
( BigDesktop, Portrait ) ->
List.map nutriDexMaker
( BigDesktop, Landscape ) ->
List.map nutriDexMaker
)
[ productNutriDex ]
]

View file

@ -3,6 +3,7 @@ module Pages.Services exposing (Model, Msg, page)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Config.Response exposing (..)
import Config.Viewport exposing (..)
import Effect exposing (Effect)
import Element exposing (..)
@ -29,7 +30,7 @@ page shared route =
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
, view = view shared
}
|> Page.withLayout toLayout
@ -86,28 +87,76 @@ subscriptions model =
-- VIEW
view : Model -> View Msg
view model =
view : Shared.Model -> Model -> View Msg
view shared model =
{ title = servicesName
, attributes = []
, element = servicesContainer
, element = servicesContainer shared.device
}
servicesContainer : Element msg
servicesContainer =
topLevelContainer servicesList
servicesContainer : Device -> Element msg
servicesContainer device =
topLevelContainer (servicesList device)
servicesList : Element msg
servicesList =
servicesList : Device -> Element msg
servicesList device =
column
pageList
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
pageListDesktop
( Phone, Landscape ) ->
pageListDesktop
( Tablet, Portrait ) ->
pageListDesktop
( Tablet, Landscape ) ->
pageListDesktop
( Desktop, Portrait ) ->
pageListDesktop
( Desktop, Landscape ) ->
pageListDesktop
( BigDesktop, Portrait ) ->
pageListDesktop
( BigDesktop, Landscape ) ->
pageListDesktop
)
<|
List.concat
[ List.map headerMaker
[ servicesHeader ]
, List.map serviceMaker
, (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
List.map serviceMakerMobile
( Phone, Landscape ) ->
List.map serviceMakerMobile
( Tablet, Portrait ) ->
List.map serviceMakerMobile
( Tablet, Landscape ) ->
List.map serviceMakerMobile
( Desktop, Portrait ) ->
List.map serviceMaker
( Desktop, Landscape ) ->
List.map serviceMaker
( BigDesktop, Portrait ) ->
List.map serviceMaker
( BigDesktop, Landscape ) ->
List.map serviceMaker
)
[ servicesDebateAnalysis
, servicesDebateTutoring
, servicesNutritionScience

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
]

View file

@ -38,6 +38,28 @@ serviceMaker service =
]
serviceMakerMobile : Service -> Element msg
serviceMakerMobile service =
row
topLevelBox
[ column [] []
, cardMaker
[ cardTitleMaker (serviceTitle service)
, cardFormatter
[ cardContentSpacing
[ column
fieldSpacer
[ cardImageMakerMobile (serviceImage service)
, rateMaker service
, descriptionMaker service
, offeringMaker service
]
]
]
]
]
serviceImage : Service -> { src : String, description : String }
serviceImage service =
{ src = "services/" ++ service.serviceImage ++ ".png"

View file

@ -12,6 +12,7 @@ module Shared exposing
-}
import Browser.Events as BR exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Json.Decode exposing (..)
@ -89,8 +90,16 @@ type alias Msg =
update : Route () -> Msg -> Model -> ( Model, Effect Msg )
update route msg model =
case msg of
Shared.Msg.NoOp ->
( model
Shared.Msg.Resize width height ->
( { model
| device =
{ height = height
, width = width
}
|> E.classifyDevice
, height = height
, width = width
}
, Effect.none
)
@ -101,4 +110,4 @@ update route msg model =
subscriptions : Route () -> Model -> Sub Msg
subscriptions route model =
Sub.none
BR.onResize Shared.Msg.Resize

View file

@ -11,4 +11,4 @@ own file, so they can be imported by `Effect.elm`
-}
type Msg
= NoOp
= Resize Int Int

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

View file

@ -0,0 +1,8 @@
* {
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}