feat: so very close

This commit is contained in:
Nick 2024-12-27 23:24:35 -06:00
parent 185d922ffb
commit 071c823c41
20 changed files with 293 additions and 570 deletions

View file

@ -1,6 +1,7 @@
module Pages.Donate exposing (Model, Msg, page)
import Config.Data.Identity as I exposing (..)
import Config.Helpers.Cards.Inner.Helpers exposing (detailBodyMaker, detailFormat, detailFormatEl, detailTitleMaker, listItem, listMaker)
import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
import Config.Helpers.Cards.Outer.Types as C
import Config.Helpers.Format
@ -169,194 +170,55 @@ contentList device donate =
<|
imageSquareMaker device (imagePathMaker M.Donate donate.donateImage) True size
in
[ row [ width fill ]
[ image "Small"
, column [ width fill ]
[ detailFormat row
[ image "Fatty"
, detailFormat column
[ feeMaker donate
, preferenceMaker donate
, tableMaker donate device
]
]
, tableMaker donate device
, proTitleMaker donate
, proMaker donate
, conTitleMaker donate
, conMaker donate
, proConMaker donate
]
donateWidth =
width <| px 45
feeMaker : Donate -> Element msg
feeMaker donate =
row
[ F.color colourTheme.textLightOrange
, paragraphSpacing
, F.bold
, headerFontSizeSmall
, E.width fill
, spacing 5
]
[ column
[ alignTop
]
[ text "Fees:"
]
, el
[ E.width fill
, alignLeft
]
<|
el
[ F.regular
, paragraphFontSize
, F.color colourTheme.textLightGrey
]
<|
text donate.donateFees
detailFormat row
[ detailTitleMaker TextLightOrange "Fees:"
, detailBodyMaker TextLightGrey (text donate.donateFees)
]
proTitleMaker : Donate -> Element msg
proTitleMaker donate =
row
[ F.color colourTheme.textLightOrange
, paragraphSpacing
, headerFontSizeSmall
, F.bold
proConMaker : Donate -> Element msg
proConMaker donate =
detailFormat column
[ detailTitleMaker TextLightOrange "Pros:"
, listMaker makePro donate.donatePros
, detailTitleMaker TextLightOrange "Cons:"
, listMaker makeCon donate.donateCons
]
[ el
[ alignTop
, width <| px 80
]
<|
text "Pros:"
]
conTitleMaker : Donate -> Element msg
conTitleMaker donate =
row
[ F.color colourTheme.textLightOrange
, paragraphSpacing
, headerFontSizeSmall
, F.bold
]
[ el
[ alignTop
, width <| px 80
]
<|
text "Cons:"
]
proMaker : Donate -> Element msg
proMaker donate =
column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
<|
List.map2 (\x y -> makePro x)
donate.donatePros
(List.range 1 (List.length donate.donatePros))
makePro : Pros -> Element msg
makePro pro =
column
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, F.bold
, alignLeft
, spacing 8
, width fill
]
[ paragraph [ F.regular ]
[ text (" " ++ pro.pro) ]
]
conMaker : Donate -> Element msg
conMaker donate =
column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
<|
List.map2 (\x y -> makeCon x)
donate.donateCons
(List.range 1 (List.length donate.donateCons))
listItem TextLightGrey pro.pro
makeCon : Cons -> Element msg
makeCon con =
column
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, F.bold
, alignLeft
, spacing 8
, width fill
]
[ paragraph [ F.regular ] <|
[ text (" " ++ con.con)
]
]
listItem TextLightGrey con.con
preferenceMaker : Donate -> Element msg
preferenceMaker donate =
row
[ width fill
, height fill
]
[ column
[ E.alignTop
, E.alignLeft
]
[ paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, F.bold
, headerFontSizeSmall
, alignLeft
, E.width fill
]
[ el
[ tooltip
"This represents how strongly I prefer a given platform relative to other platforms."
]
(el
[ paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
, F.color colourTheme.textLightOrange
]
<|
text "Preference:"
)
]
detailFormat row
[ el
[ tooltip
"This represents how strongly I prefer a given platform relative to other platforms."
]
<|
detailTitleMaker TextLightOrange "Preference:"
, barPadding
[ barMaker getPreferenceTooltip donate.donatePreference ]
]
@ -404,48 +266,44 @@ getPreferenceTooltip num =
tableMaker : Donate -> Device -> Element msg
tableMaker donate device =
column
[ centerX
el
[ E.alignLeft
, E.width fill
, centerX
]
[ el
[ E.alignLeft
, E.width fill
]
<|
E.table
([ spacing 0
, D.rounded 10
, D.width 2
, D.color colourTheme.textDarkGrey
, clip
]
++ (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
[ B.color colourTheme.backgroundSpreadsheet ]
<|
E.table
([ spacing 0
, D.rounded 10
, D.width 2
, D.color colourTheme.textDarkGrey
, clip
]
++ (case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
[ B.color colourTheme.backgroundSpreadsheet ]
( Tablet, Portrait ) ->
[ B.color colourTheme.backgroundSpreadsheet ]
( Tablet, Portrait ) ->
[ B.color colourTheme.backgroundSpreadsheet ]
_ ->
[]
)
)
{ data = donate.donateFeatures
, columns =
List.map createColumn
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
mobileLabels
_ ->
[]
)
)
{ data = donate.donateFeatures
, columns =
List.map createColumn
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
mobileLabels
( Tablet, Portrait ) ->
mobileLabels
( Tablet, Portrait ) ->
mobileLabels
_ ->
desktopLabels
)
}
]
_ ->
desktopLabels
)
}
desktopLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b, rewardTiers : b } -> b }
@ -497,7 +355,7 @@ createColumn { label, getter } =
, right = 0
}
, D.color colourTheme.textDarkGrey
, padding 8
, padding 5
, E.width fill
, F.center
]
@ -516,10 +374,13 @@ createColumn { label, getter } =
, right = 0
}
, D.color colourTheme.textDarkGrey
, padding 8
, padding 5
, E.height fill
]
[ row [ centerX ]
[ row
[ centerX
, centerY
]
[ paragraph []
[ E.image
[ E.width <| px 30