mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 12:25:12 -05:00
600 lines
14 KiB
Elm
Executable file
600 lines
14 KiB
Elm
Executable file
module Pages.Donate exposing (Model, Msg, page)
|
|
|
|
import Config.Data.Identity as I exposing (..)
|
|
import Config.Helpers.CardFormat
|
|
exposing
|
|
( cardContentSpacing
|
|
, cardFormatter
|
|
, cardMaker
|
|
, cardTitleMaker
|
|
, desktopCardMaker
|
|
, desktopImageBoxSize
|
|
, desktopImageSize
|
|
, fieldSpacer
|
|
, mobileCardMaker
|
|
, mobileImageBoxSize
|
|
, mobileImageSize
|
|
, topLevelBox
|
|
)
|
|
import Config.Helpers.Format
|
|
exposing
|
|
( headerFontSizeSmall
|
|
, paragraphFontSize
|
|
, paragraphSpacing
|
|
)
|
|
import Config.Helpers.Headers.Header exposing (headerMaker)
|
|
import Config.Helpers.Headers.Types exposing (Header)
|
|
import Config.Helpers.Response
|
|
exposing
|
|
( pageList
|
|
, topLevelContainer
|
|
)
|
|
import Config.Helpers.StrengthBar
|
|
exposing
|
|
( barMaker
|
|
, barPadding
|
|
)
|
|
import Config.Helpers.ToolTip exposing (tooltip)
|
|
import Config.Helpers.Viewport exposing (..)
|
|
import Config.Pages.Donate.Records.Cardano exposing (donateCardano)
|
|
import Config.Pages.Donate.Records.KoFi exposing (donateKoFi)
|
|
import Config.Pages.Donate.Records.LiberaPay exposing (donateLiberaPay)
|
|
import Config.Pages.Donate.Records.Merch exposing (donateMerch)
|
|
import Config.Pages.Donate.Records.Patreon exposing (donatePatreon)
|
|
import Config.Pages.Donate.Records.PayPal exposing (donatePayPal)
|
|
import Config.Pages.Donate.Records.Stripe exposing (donateStripe)
|
|
import Config.Pages.Donate.Records.YouTube exposing (donateYouTube)
|
|
import Config.Pages.Donate.Types exposing (..)
|
|
import Config.Style.Colour as T exposing (..)
|
|
import Effect exposing (Effect)
|
|
import Element as E exposing (..)
|
|
import Element.Background as B
|
|
import Element.Border as D
|
|
import Element.Font as F
|
|
import Html.Attributes as H
|
|
import Layouts
|
|
import Page exposing (Page)
|
|
import Route exposing (Route)
|
|
import Shared exposing (..)
|
|
import Task
|
|
import View exposing (View)
|
|
|
|
|
|
page : Shared.Model -> Route () -> Page Model Msg
|
|
page shared route =
|
|
Page.new
|
|
{ init = init
|
|
, update = update
|
|
, subscriptions = subscriptions
|
|
, view = view shared
|
|
}
|
|
|> Page.withLayout toLayout
|
|
|
|
|
|
toLayout : Model -> Layouts.Layout Msg
|
|
toLayout model =
|
|
Layouts.Navbar {}
|
|
|
|
|
|
|
|
-- INIT
|
|
|
|
|
|
type alias Model =
|
|
{}
|
|
|
|
|
|
init : () -> ( Model, Effect Msg )
|
|
init () =
|
|
( {}
|
|
, Effect.map
|
|
(\_ -> NoOp)
|
|
(Effect.sendCmd resetViewport)
|
|
)
|
|
|
|
|
|
|
|
-- UPDATE
|
|
|
|
|
|
type Msg
|
|
= NoOp
|
|
|
|
|
|
update : Msg -> Model -> ( Model, Effect Msg )
|
|
update msg model =
|
|
case msg of
|
|
NoOp ->
|
|
( model
|
|
, Effect.none
|
|
)
|
|
|
|
|
|
|
|
-- SUBSCRIPTIONS
|
|
|
|
|
|
subscriptions : Model -> Sub Msg
|
|
subscriptions model =
|
|
Sub.none
|
|
|
|
|
|
|
|
-- VIEW
|
|
|
|
|
|
view : Shared.Model -> Model -> View Msg
|
|
view shared model =
|
|
{ title = pageNames.pageDonate
|
|
, attributes = []
|
|
, element = donateContainer shared.device
|
|
}
|
|
|
|
|
|
donateContainer : Device -> Element msg
|
|
donateContainer device =
|
|
topLevelContainer (donateList device)
|
|
|
|
|
|
donateList : Device -> Element msg
|
|
donateList device =
|
|
column
|
|
(case ( device.class, device.orientation ) of
|
|
_ ->
|
|
pageList
|
|
)
|
|
<|
|
|
List.concat
|
|
[ List.map headerMaker
|
|
[ donateHeader ]
|
|
, (case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
List.map (\donate -> donateMakerMobile donate device)
|
|
|
|
( Tablet, Portrait ) ->
|
|
List.map (\donate -> donateMakerMobile donate device)
|
|
|
|
_ ->
|
|
List.map (\donate -> donateMaker donate device)
|
|
)
|
|
[ donateLiberaPay
|
|
, donateStripe
|
|
, donatePatreon
|
|
, donateCardano
|
|
, donateKoFi
|
|
, donateYouTube
|
|
, donateMerch
|
|
]
|
|
]
|
|
|
|
|
|
donateHeader : Header
|
|
donateHeader =
|
|
let
|
|
name =
|
|
"Donate"
|
|
in
|
|
{ headerTitle = String.toUpper name
|
|
, headerBody = "My site, research, and content all cost time and money to run. If you find my contributions valuable, please consider supporting my work on any of the platforms listed below!"
|
|
}
|
|
|
|
|
|
donateMaker : Donate -> Device -> Element msg
|
|
donateMaker donate device =
|
|
row
|
|
topLevelBox
|
|
[ desktopCardMaker desktopImageBoxSize desktopImageSize (donateImage donate) donate.donateLink
|
|
, cardMaker
|
|
[ cardTitleMaker donate.donateName
|
|
, cardFormatter
|
|
[ cardContentSpacing
|
|
[ column
|
|
fieldSpacer
|
|
[ feeMaker donate
|
|
, preferenceMaker donate
|
|
, tableMaker donate device
|
|
, proTitleMaker donate
|
|
, proMaker donate
|
|
, conTitleMaker donate
|
|
, conMaker donate
|
|
]
|
|
]
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
donateMakerMobile : Donate -> Device -> Element msg
|
|
donateMakerMobile donate device =
|
|
row
|
|
topLevelBox
|
|
[ column [] []
|
|
, cardMaker
|
|
[ cardTitleMaker donate.donateName
|
|
, cardFormatter
|
|
[ cardContentSpacing
|
|
[ column
|
|
fieldSpacer
|
|
[ row [ width fill, spacing 10 ]
|
|
[ mobileCardMaker mobileImageBoxSize
|
|
mobileImageSize
|
|
(donateImage donate)
|
|
donate.donateLink
|
|
, column
|
|
[ width fill ]
|
|
[ feeMaker donate
|
|
, preferenceMaker donate
|
|
]
|
|
]
|
|
, tableMaker donate device
|
|
, proTitleMaker donate
|
|
, proMaker donate
|
|
, conTitleMaker donate
|
|
, conMaker donate
|
|
]
|
|
]
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
donateImage :
|
|
Donate
|
|
->
|
|
{ src : String
|
|
, description : String
|
|
}
|
|
donateImage donate =
|
|
{ src = "donate/" ++ donate.donateImage ++ ".png"
|
|
, description = donate.donateName
|
|
}
|
|
|
|
|
|
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
|
|
]
|
|
|
|
|
|
proTitleMaker : Donate -> Element msg
|
|
proTitleMaker donate =
|
|
row
|
|
[ F.color colourTheme.textLightOrange
|
|
, paragraphSpacing
|
|
, headerFontSizeSmall
|
|
, F.bold
|
|
]
|
|
[ 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))
|
|
|
|
|
|
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)
|
|
]
|
|
]
|
|
|
|
|
|
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:"
|
|
)
|
|
]
|
|
]
|
|
, barPadding
|
|
[ barMaker getPreferenceTooltip donate.donatePreference ]
|
|
]
|
|
|
|
|
|
getPreferenceTooltip : Int -> String
|
|
getPreferenceTooltip num =
|
|
case num of
|
|
0 ->
|
|
"Disdain this platform."
|
|
|
|
1 ->
|
|
"Very negative towards this platform."
|
|
|
|
2 ->
|
|
"Strongly dislike this platform."
|
|
|
|
3 ->
|
|
"Dislike this platform."
|
|
|
|
4 ->
|
|
"Somewhat dislike this platform."
|
|
|
|
5 ->
|
|
"Neutral, no strong feelings."
|
|
|
|
6 ->
|
|
"Somewhat like this platform."
|
|
|
|
7 ->
|
|
"Like this platform."
|
|
|
|
8 ->
|
|
"Strongly like this platform."
|
|
|
|
9 ->
|
|
"Very positive towards this platform."
|
|
|
|
10 ->
|
|
"Absolutely love this platform!"
|
|
|
|
_ ->
|
|
"Preference is out of bounds."
|
|
|
|
|
|
tableMaker : Donate -> Device -> Element msg
|
|
tableMaker donate device =
|
|
column
|
|
[ centerX
|
|
, E.width fill
|
|
]
|
|
[ el
|
|
[ E.alignLeft
|
|
, E.width fill
|
|
]
|
|
<|
|
|
E.table
|
|
[ spacing 0
|
|
, D.rounded 10
|
|
, D.width 2
|
|
, D.color colourTheme.textDarkGrey
|
|
, clip
|
|
]
|
|
{ data = donate.donateFeatures
|
|
, columns =
|
|
List.map createColumn
|
|
(case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
mobileLabels
|
|
|
|
( Tablet, Portrait ) ->
|
|
mobileLabels
|
|
|
|
_ ->
|
|
desktopLabels
|
|
)
|
|
}
|
|
]
|
|
|
|
|
|
desktopLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b, rewardTiers : b } -> b }
|
|
desktopLabels =
|
|
[ { label = "Zero Fees"
|
|
, getter = .free
|
|
}
|
|
, { label = "Subscriptions"
|
|
, getter = .subscriptions
|
|
}
|
|
, { label = "User Friendly"
|
|
, getter = .userFriendly
|
|
}
|
|
, { label = "Anonymous"
|
|
, getter = .anonymous
|
|
}
|
|
, { label = "Rewards"
|
|
, getter = .rewardTiers
|
|
}
|
|
]
|
|
|
|
|
|
mobileLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b } -> b }
|
|
mobileLabels =
|
|
[ { label = "Free"
|
|
, getter = .free
|
|
}
|
|
, { label = "Subs"
|
|
, getter = .subscriptions
|
|
}
|
|
, { label = "Easy"
|
|
, getter = .userFriendly
|
|
}
|
|
, { label = "Safe"
|
|
, getter = .anonymous
|
|
}
|
|
]
|
|
|
|
|
|
createColumn : { label : String, getter : Features -> Maybe Bool } -> Column Features msg
|
|
createColumn { label, getter } =
|
|
{ header =
|
|
el
|
|
[ F.bold
|
|
, D.widthEach
|
|
{ bottom = 1
|
|
, top = 1
|
|
, left = 1
|
|
, right = 1
|
|
}
|
|
, D.color colourTheme.textDarkGrey
|
|
, padding 8
|
|
, E.width fill
|
|
, F.center
|
|
]
|
|
(text label)
|
|
|> el [ F.color colourTheme.textLightOrange ]
|
|
, width = fill
|
|
, view =
|
|
\feature ->
|
|
row
|
|
[ F.color colourTheme.textLightOrange
|
|
, F.bold
|
|
, D.widthEach
|
|
{ bottom = 1
|
|
, top = 0
|
|
, left = 1
|
|
, right = 1
|
|
}
|
|
, D.color colourTheme.textDarkGrey
|
|
, padding 8
|
|
, E.height fill
|
|
]
|
|
[ row [ centerX ]
|
|
[ paragraph []
|
|
[ E.image
|
|
[ E.width <| px 30
|
|
, E.height <| px 30
|
|
]
|
|
(featureToString (getter feature))
|
|
]
|
|
]
|
|
]
|
|
}
|
|
|
|
|
|
featureToString : Maybe Bool -> { src : String, description : String }
|
|
featureToString maybeBool =
|
|
case maybeBool of
|
|
Just True ->
|
|
{ src = "donate/checkmark.png", description = "" }
|
|
|
|
Just False ->
|
|
{ src = "donate/ex.png", description = "" }
|
|
|
|
Nothing ->
|
|
{ src = "donate/question.png", description = "" }
|