diff --git a/frontend/src/Config/Helpers/ServiceFormat.elm b/frontend/src/Config/Helpers/ServiceFormat.elm index 76ad01c..1101f8a 100755 --- a/frontend/src/Config/Helpers/ServiceFormat.elm +++ b/frontend/src/Config/Helpers/ServiceFormat.elm @@ -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 diff --git a/frontend/src/Config/Style/Images.elm b/frontend/src/Config/Style/Images.elm new file mode 100644 index 0000000..a28477b --- /dev/null +++ b/frontend/src/Config/Style/Images.elm @@ -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 diff --git a/frontend/src/Pages/Blog.elm b/frontend/src/Pages/Blog.elm index 9846f2b..ba8c694 100755 --- a/frontend/src/Pages/Blog.elm +++ b/frontend/src/Pages/Blog.elm @@ -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) ] ] diff --git a/frontend/src/Pages/Debate.elm b/frontend/src/Pages/Debate.elm index 03f4a8d..9ffa79a 100755 --- a/frontend/src/Pages/Debate.elm +++ b/frontend/src/Pages/Debate.elm @@ -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) ] diff --git a/frontend/src/Pages/Debate/Arguments.elm b/frontend/src/Pages/Debate/Arguments.elm index 0da640c..06caffe 100755 --- a/frontend/src/Pages/Debate/Arguments.elm +++ b/frontend/src/Pages/Debate/Arguments.elm @@ -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 diff --git a/frontend/src/Pages/Debate/Cucklist.elm b/frontend/src/Pages/Debate/Cucklist.elm index 78a666e..da2b336 100755 --- a/frontend/src/Pages/Debate/Cucklist.elm +++ b/frontend/src/Pages/Debate/Cucklist.elm @@ -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 diff --git a/frontend/src/Pages/Debate/Gibberish.elm b/frontend/src/Pages/Debate/Gibberish.elm index af15cf5..611c558 100755 --- a/frontend/src/Pages/Debate/Gibberish.elm +++ b/frontend/src/Pages/Debate/Gibberish.elm @@ -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 ] diff --git a/frontend/src/Pages/Donate.elm b/frontend/src/Pages/Donate.elm index a4110d8..26971d1 100755 --- a/frontend/src/Pages/Donate.elm +++ b/frontend/src/Pages/Donate.elm @@ -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 diff --git a/frontend/src/Pages/Services.elm b/frontend/src/Pages/Services.elm index 3c69137..3d48dde 100755 --- a/frontend/src/Pages/Services.elm +++ b/frontend/src/Pages/Services.elm @@ -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) diff --git a/frontend/static/donate/patreon.png b/frontend/static/donate/patreon.png old mode 100755 new mode 100644 index 518975d..c939708 Binary files a/frontend/static/donate/patreon.png and b/frontend/static/donate/patreon.png differ diff --git a/frontend/static/donate/youtube.png b/frontend/static/donate/youtube.png index 5ef7753..b961a29 100755 Binary files a/frontend/static/donate/youtube.png and b/frontend/static/donate/youtube.png differ