mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: massive refactor
This commit is contained in:
Nick
parent
c619757eff
commit
fc7b85afc1
214 changed files with 4764 additions and 4716 deletions
|
|
@ -1,27 +1,56 @@
|
|||
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
|
||||
( paragraphFontSize
|
||||
, paragraphSpacing
|
||||
)
|
||||
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.Helpers exposing (..)
|
||||
import Config.Pages.Donate.Methods.Cardano exposing (donateCardano)
|
||||
import Config.Pages.Donate.Methods.KoFi exposing (donateKoFi)
|
||||
import Config.Pages.Donate.Methods.LiberaPay exposing (donateLiberaPay)
|
||||
import Config.Pages.Donate.Methods.Merch exposing (donateMerch)
|
||||
import Config.Pages.Donate.Methods.Patreon exposing (donatePatreon)
|
||||
import Config.Pages.Donate.Methods.PayPal exposing (donatePayPal)
|
||||
import Config.Pages.Donate.Methods.Stripe exposing (donateStripe)
|
||||
import Config.Pages.Donate.Methods.YouTube exposing (donateYouTube)
|
||||
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.Pages.Headers.Helpers exposing (headerMaker)
|
||||
import Config.Pages.Headers.Pages.Donate exposing (donateHeader)
|
||||
import Config.Pages.Headers.Records.Donate exposing (donateHeader)
|
||||
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)
|
||||
|
|
@ -136,3 +165,460 @@ donateList device =
|
|||
, donateMerch
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
donateMaker : Donate -> Element msg
|
||||
donateMaker donate =
|
||||
row
|
||||
topLevelBox
|
||||
[ desktopCardMaker desktopImageBoxSize desktopImageSize (donateImage donate) (donateLink donate)
|
||||
, cardMaker
|
||||
[ cardTitleMaker (donateTitle donate)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
fieldSpacer
|
||||
[ feeMaker donate
|
||||
, preferenceMaker donate
|
||||
, tableMaker donate
|
||||
, proTitleMaker donate
|
||||
, proMaker donate
|
||||
, conTitleMaker donate
|
||||
, conMaker donate
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
donateMakerMobile : Donate -> Element msg
|
||||
donateMakerMobile donate =
|
||||
row
|
||||
topLevelBox
|
||||
[ column [] []
|
||||
, cardMaker
|
||||
[ cardTitleMaker (donateTitle donate)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
fieldSpacer
|
||||
[ row [ width fill, spacing 10 ]
|
||||
[ mobileCardMaker mobileImageBoxSize
|
||||
mobileImageSize
|
||||
(donateImage donate)
|
||||
(donateLink donate)
|
||||
, column
|
||||
[ width fill ]
|
||||
[ feeMaker donate
|
||||
, preferenceMaker donate
|
||||
]
|
||||
]
|
||||
, tableMakerMobile donate
|
||||
, proTitleMaker donate
|
||||
, proMaker donate
|
||||
, conTitleMaker donate
|
||||
, conMaker donate
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
donateImage :
|
||||
Donate
|
||||
->
|
||||
{ src : String
|
||||
, description : String
|
||||
}
|
||||
donateImage donate =
|
||||
{ src = "donate/" ++ donate.donateImage ++ ".png"
|
||||
, description = donate.donateName
|
||||
}
|
||||
|
||||
|
||||
donateTitle : Donate -> String
|
||||
donateTitle donate =
|
||||
donate.donateName
|
||||
|
||||
|
||||
donateLink : Donate -> String
|
||||
donateLink donate =
|
||||
donate.donateLink
|
||||
|
||||
|
||||
donateWidth =
|
||||
width <| px 45
|
||||
|
||||
|
||||
feeMaker : Donate -> Element msg
|
||||
feeMaker donate =
|
||||
row
|
||||
([ F.color colourTheme.textLightGrey
|
||||
, paragraphSpacing
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
++ [ F.size 18
|
||||
, E.width fill
|
||||
]
|
||||
)
|
||||
[ column
|
||||
[ alignTop
|
||||
, donateWidth
|
||||
]
|
||||
[ text "Fees:"
|
||||
]
|
||||
, column
|
||||
[ E.width fill
|
||||
, alignLeft
|
||||
]
|
||||
[ paragraph [ F.regular ]
|
||||
[ el [ F.color colourTheme.textLightOrange ] <|
|
||||
text donate.donateFees
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
proTitleMaker : Donate -> Element msg
|
||||
proTitleMaker donate =
|
||||
row
|
||||
[ F.color colourTheme.textLightGrey
|
||||
, paragraphSpacing
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
[ column
|
||||
[ alignTop
|
||||
, width <| px 80
|
||||
]
|
||||
[ text "Pros:"
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
conTitleMaker : Donate -> Element msg
|
||||
conTitleMaker donate =
|
||||
row
|
||||
[ F.color colourTheme.textLightGrey
|
||||
, paragraphSpacing
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
[ column
|
||||
[ 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
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
++ [ F.size 18
|
||||
, 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
|
||||
}
|
||||
]
|
||||
<|
|
||||
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 -> Element msg
|
||||
tableMaker donate =
|
||||
column
|
||||
[ centerX
|
||||
, E.width fill
|
||||
]
|
||||
[ wrappedRow
|
||||
([ F.color colourTheme.textLightGrey
|
||||
, paragraphSpacing
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
++ [ E.alignLeft
|
||||
, E.width fill
|
||||
, htmlAttribute <| H.style "position" "relative"
|
||||
]
|
||||
)
|
||||
[ E.table
|
||||
[ spacing 0
|
||||
, D.rounded 10
|
||||
, D.width 2
|
||||
, D.color colourTheme.textDarkGrey
|
||||
, clip
|
||||
]
|
||||
{ data = donate.donateFeatures
|
||||
, columns =
|
||||
List.map createColumn
|
||||
[ { label = "Zero Fees"
|
||||
, getter = .free
|
||||
}
|
||||
, { label = "Subscriptions"
|
||||
, getter = .subscriptions
|
||||
}
|
||||
, { label = "User Friendly"
|
||||
, getter = .userFriendly
|
||||
}
|
||||
, { label = "Anonymous"
|
||||
, getter = .anonymous
|
||||
}
|
||||
, { label = "Rewards"
|
||||
, getter = .rewardTiers
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
tableMakerMobile : Donate -> Element msg
|
||||
tableMakerMobile donate =
|
||||
column
|
||||
[ centerX
|
||||
, E.width fill
|
||||
]
|
||||
[ wrappedRow
|
||||
([ F.color colourTheme.textLightGrey
|
||||
, paragraphSpacing
|
||||
, paragraphFontSize
|
||||
, F.bold
|
||||
]
|
||||
++ [ E.alignLeft
|
||||
, E.width fill
|
||||
, htmlAttribute <| H.style "position" "relative"
|
||||
]
|
||||
)
|
||||
[ E.table
|
||||
[ spacing 0
|
||||
, D.rounded 10
|
||||
, D.width 2
|
||||
, D.color colourTheme.textDarkGrey
|
||||
, clip
|
||||
]
|
||||
{ data = donate.donateFeatures
|
||||
, columns =
|
||||
List.map createColumn
|
||||
[ { 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 = "" }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue