feat: added new images

This commit is contained in:
Nick 2024-12-24 03:08:39 -06:00
parent b1a190d9ad
commit 6763b6a860
11 changed files with 332 additions and 157 deletions

View file

@ -36,16 +36,14 @@ bodyFormat =
chunkMaker : List (Element msg) -> Element msg
chunkMaker elements =
row [ alignLeft, spacing 10 ]
[ paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, F.alignLeft
, width fill
]
elements
paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, F.alignLeft
, width fill
]
elements
titleMaker : String -> Element msg

View file

@ -0,0 +1,41 @@
module Config.Style.Images exposing (..)
import Config.Helpers.ImageFolders exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Element as E exposing (..)
import Element.Background as B exposing (color)
import Element.Border as D
exposing
( color
, rounded
, width
)
imageSquareMaker : Device -> String -> Bool -> String -> Element msg
imageSquareMaker device imagePath isLeft size =
E.image
[ D.rounded 10
, clip
, E.width <| px (imageSizer size)
, E.height <| px (imageSizer size)
]
{ src = imagePath
, description = ""
}
imageSizer : String -> Int
imageSizer size =
case size of
"Fatty" ->
80
"Big" ->
65
"Medium" ->
45
_ ->
35

View file

@ -18,6 +18,7 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (blogHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Markdown
exposing
( renderDeviceMarkdown
@ -43,6 +44,7 @@ import Config.Pages.Blog.Records.SweetDeception exposing (articleSweetDeception)
import Config.Pages.Blog.Types exposing (..)
import Config.Style.Colour as T exposing (..)
import Config.Style.Icons.Icons exposing (construction)
import Config.Style.Images exposing (imageSquareMaker)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
@ -145,7 +147,7 @@ blogList device =
[ [ headerMaker (R.BlogPage blogHeader) ]
, List.map
(\article ->
cardMaker device (C.BlogCard article) (contentList article)
cardMaker device (C.BlogCard article) (contentList device article)
)
[ articleShenanigans
, articleSweetDeception
@ -162,9 +164,9 @@ blogList device =
]
contentList : BlogArticle -> List (Element msg)
contentList article =
[ articleMaker article ]
contentList : Device -> BlogArticle -> List (Element msg)
contentList device article =
[ articleMaker device article ]
articleImage :
@ -179,36 +181,62 @@ articleImage article =
}
articleMaker : BlogArticle -> Element msg
articleMaker article =
articleMaker : Device -> BlogArticle -> Element msg
articleMaker device article =
let
image : String -> Element msg
image size =
el
[ alignLeft
, alignTop
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
<|
imageSquareMaker device (imagePathMaker M.BlogCard article.articleImage) True size
in
column
[ E.width fill
, centerX
, spacing 8
]
[ column
[ row
[ width fill
]
(articleRows article
++ [ row []
[ paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, spacing 3
, F.regular
, F.alignLeft
, paddingEach
{ top = 8
, bottom = 0
, left = 0
, right = 0
}
]
[ renderDeviceMarkdownNoToc (extractFirstWords article.articleBody) ]
]
]
)
[ case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
none
( Tablet, Portrait ) ->
none
_ ->
image "Big"
, column
[ width fill
, alignTop
]
(articleRows article)
]
, el [] <|
paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, spacing 3
, F.regular
, F.alignLeft
, paddingEach
{ top = 8
, bottom = 0
, left = 0
, right = 0
}
]
[ renderDeviceMarkdownNoToc (extractFirstWords article.articleBody) ]
]

View file

@ -23,6 +23,7 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (debateHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
exposing
( pageList
@ -40,6 +41,7 @@ import Config.Style.Glow
( glowDeepDarkGrey
, glowDeepDarkOrange
)
import Config.Style.Images exposing (imageSquareMaker)
import Config.Style.Transitions
exposing
( transitionStyleSlow
@ -148,7 +150,7 @@ debateList device =
[ [ headerMaker (R.Debate debateHeader) ]
, List.map
(\debate ->
cardMaker device (C.Debate debate) (contentList debate)
cardMaker device (C.Debate debate) (contentList device debate)
)
[ debateArguments
, debateCuckList
@ -157,50 +159,68 @@ debateList device =
]
contentList : Debate -> List (Element msg)
contentList debate =
[ descriptionMaker debate ]
contentList : Device -> Debate -> List (Element msg)
contentList device debate =
[ descriptionMaker device debate ]
descriptionMaker : Debate -> Element msg
descriptionMaker debate =
column [ alignTop ]
[ column
[ spacing 3
, alignTop
]
[ row [ spacing 5 ]
[ paragraph
[ F.color colourTheme.textLightOrange
, paragraphSpacing
, F.bold
, headerFontSizeSmall
, E.width fill
]
[ if debate.debateTitle == "Arguments" then
text "Inferences: "
else if debate.debateTitle == "Cucklist" then
text "Cucks: "
else if debate.debateTitle == "Gibberish" then
text "Gibberations: "
else
text ""
]
, text (String.fromInt debate.debateCount)
|> el
[ F.color colourTheme.textLightGrey
, F.regular
, paragraphFontSize
]
descriptionMaker : Device -> Debate -> Element msg
descriptionMaker device debate =
let
image : String -> Element msg
image size =
el
[ alignLeft
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
, el [ width fill ] <|
chunkMaker
[ text debate.debateDescription
]
<|
imageSquareMaker device (imagePathMaker M.Debate debate.debateImage) True size
in
chunkMaker
[ image "Fatty"
, el [] <|
inferenceMaker debate
, el [ width fill, height (px 0) ] none
, el
[ F.color colourTheme.textLightGrey ]
(text debate.debateDescription)
]
inferenceMaker : Debate -> Element msg
inferenceMaker debate =
row [ spacing 5 ]
[ el
[ F.color colourTheme.textLightOrange
, paragraphSpacing
, F.bold
, headerFontSizeSmall
]
<|
if debate.debateTitle == "Arguments" then
text "Inferences: "
else if debate.debateTitle == "Cucklist" then
text "Cucks: "
else if debate.debateTitle == "Gibberish" then
text "Gibberations: "
else
text ""
, el
[ F.color colourTheme.textLightGrey
, F.regular
, paragraphFontSize
]
<|
text
(String.fromInt debate.debateCount)
]

View file

@ -37,6 +37,7 @@ import Config.Style.Glow
( glowDeepDarkGrey
, glowDeepDarkOrange
)
import Config.Style.Images exposing (imageSquareMaker)
import Config.Style.Transitions exposing (transitionStyleSlow)
import Effect exposing (Effect)
import Element as E exposing (..)
@ -151,6 +152,22 @@ debateList device =
contentList : Device -> Argument -> List (Element msg)
contentList device argument =
let
image : String -> Element msg
image size =
el
[ alignLeft
, alignTop
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 10
}
]
<|
imageSquareMaker device (imagePathMaker M.Argument argument.argumentImage) False size
in
[ row
[ width fill
, paddingEach
@ -169,7 +186,10 @@ contentList device argument =
, left = 0
}
]
[ column [ width fill, spacing 8 ]
[ column
[ width fill
, spacing 8
]
[ summaryMakerDesktop device argument
, strengthBar device argument
]
@ -181,7 +201,7 @@ contentList device argument =
none
_ ->
argumentImageMaker argument
image "Fatty"
]
, tableMaker device argument
, desktopFormalizationMaker argument
@ -189,40 +209,6 @@ contentList device argument =
]
argumentImageMaker : Argument -> Element msg
argumentImageMaker argument =
el
[ alignRight
, alignTop
, centerY
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 20
}
]
<|
el
[ D.rounded 10
, D.width 3
, D.color colourTheme.backgroundLightGrey
, B.color colourTheme.backgroundLightGrey
]
<|
E.image
[ alignRight
, alignTop
, D.rounded 10
, clip
, E.width <| px 65
, E.height <| px 65
]
{ src = imagePathMaker M.Argument argument.argumentImage
, description = ""
}
proofTreeButton : String -> Element msg
proofTreeButton url =
newTabLink

View file

@ -14,6 +14,7 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (cuckListHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
exposing
( pageList
@ -28,6 +29,7 @@ import Config.Pages.Debate.Cuckery.List
)
import Config.Pages.Debate.Cuckery.Types exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Images exposing (imageSquareMaker)
import Config.Style.Transitions
exposing
( hoverFontDarkOrange
@ -143,28 +145,55 @@ cucksList device =
contentList : Device -> Cuck -> List (Element msg)
contentList device cuck =
[ column
[ width fill
, spacing 3
, paddingEach
{ top =
case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
3
let
image : String -> Element msg
image size =
el
[ alignRight
, alignTop
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
<|
imageSquareMaker device (imagePathMaker M.Cuck cuck.cuckImage) True size
in
[ row [ width fill ]
[ case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
image "Small"
( Tablet, Portrait ) ->
3
( Tablet, Portrait ) ->
image "Small"
_ ->
0
, right = 0
, bottom = 0
, left = 0
}
]
[ socialMaker cuck
, dodgeTitle cuck
, dodgeMaker device cuck
_ ->
image "Fatty"
, column
[ width fill
, spacing 3
, paddingEach
{ top =
case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
3
( Tablet, Portrait ) ->
3
_ ->
0
, right = 0
, bottom = 0
, left = 0
}
]
[ socialMaker cuck
, dodgeTitle cuck
, dodgeMaker device cuck
]
]
]
@ -230,12 +259,20 @@ makeDodge device cuck dodge index =
]
[ row
[ width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 10
}
, case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
moveLeft 40
( Tablet, Portrait ) ->
moveLeft 40
_ ->
paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 10
}
]
[ column
[ F.color colourTheme.textLightGrey

View file

@ -13,11 +13,13 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (gibberishHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
exposing
( pageList
, topLevelContainer
)
import Config.Helpers.ServiceFormat exposing (chunkMaker)
import Config.Helpers.StrengthBar
exposing
( barMaker
@ -36,6 +38,7 @@ import Config.Pages.Debate.Gibberish.Records.PhilOfMind exposing (philOfMindGibb
import Config.Pages.Debate.Gibberish.Records.Theology exposing (theologyGibberish)
import Config.Pages.Debate.Gibberish.Types exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Images exposing (imageSquareMaker)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
@ -140,7 +143,7 @@ gibberishList device =
[ [ headerMaker (R.Gibberish gibberishHeader) ]
, List.map
(\gibberish ->
cardMaker device (C.Gibberish gibberish) (contentList gibberish)
cardMaker device (C.Gibberish gibberish) (contentList device gibberish)
)
[ epistemologyGibberish
, theologyGibberish
@ -153,9 +156,32 @@ gibberishList device =
]
contentList : Gibberish -> List (Element msg)
contentList gibberish =
[ descriptionMaker gibberish
contentList : Device -> Gibberish -> List (Element msg)
contentList device gibberish =
let
image : String -> Element msg
image size =
el
[ alignLeft
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
<|
imageSquareMaker device (imagePathMaker M.Gibberish gibberish.gibberishImage) True size
in
[ paragraph
[ F.color colourTheme.textLightGrey
, paragraphSpacing
, paragraphFontSize
, width fill
]
[ image "Big"
, text gibberish.gibberishDescription
]
, gibberishMakerBody gibberish
]

View file

@ -12,6 +12,7 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (donateHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
exposing
( pageList
@ -34,6 +35,7 @@ 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 Config.Style.Images exposing (imageSquareMaker)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
@ -151,8 +153,29 @@ donateList device =
contentList : Device -> Donate -> List (Element msg)
contentList device donate =
[ feeMaker donate
, preferenceMaker donate
let
image : String -> Element msg
image size =
el
[ alignLeft
, alignTop
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
<|
imageSquareMaker device (imagePathMaker M.Donate donate.donateImage) True size
in
[ row [ width fill ]
[ image "Small"
, column [ width fill ]
[ feeMaker donate
, preferenceMaker donate
]
]
, tableMaker donate device
, proTitleMaker donate
, proMaker donate

View file

@ -14,6 +14,7 @@ import Config.Helpers.Format
import Config.Helpers.Headers.Helpers exposing (..)
import Config.Helpers.Headers.Records exposing (servicesHeader)
import Config.Helpers.Headers.Types as R exposing (..)
import Config.Helpers.ImageFolders as M exposing (..)
import Config.Helpers.Response
exposing
( pageList
@ -28,6 +29,7 @@ import Config.Pages.Services.Records.NutritionScience exposing (..)
import Config.Pages.Services.Types exposing (..)
import Config.Style.Colour as T exposing (..)
import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
import Config.Style.Images exposing (imageSquareMaker)
import Config.Style.Transitions exposing (transitionStyleMedium)
import Effect exposing (Effect)
import Element as E exposing (..)
@ -130,7 +132,7 @@ servicesList device =
]
, List.map
(\service ->
cardMaker device (C.Service service) (contentList service)
cardMaker device (C.Service service) (contentList device service)
)
[ servicesDebateAnalysis
, servicesDebateCoaching
@ -141,10 +143,30 @@ servicesList device =
]
contentList : Service msg -> List (Element msg)
contentList service =
[ rateMaker service
, descriptionMaker service
contentList : Device -> Service msg -> List (Element msg)
contentList device service =
let
image : String -> Element msg
image size =
el
[ alignLeft
, paddingEach
{ top = 0
, right = 10
, bottom = 0
, left = 0
}
]
<|
imageSquareMaker device (imagePathMaker M.ServicePage service.serviceImage) True size
in
[ row []
[ image "Small"
, column [ alignBottom ]
[ rateMaker service
, descriptionMaker service
]
]
, offeringMaker service
]
@ -205,12 +227,6 @@ offeringMaker service =
column
[ spacing 8
, width fill
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 35
}
]
<|
List.map2 (\x y -> makeDescription x)

BIN
frontend/static/donate/patreon.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After