feat: standardized formatting conventions across pages

This commit is contained in:
Nick 2024-11-27 22:36:35 -06:00
parent d5e7cfe814
commit ead41f0ed0
19 changed files with 503 additions and 446 deletions

View file

@ -0,0 +1,133 @@
module Config.CardFormat exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Cuckery.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)
topLevelBox =
[ spacing 20
, E.width fill
, E.height fill
, E.alignTop
, E.alignRight
]
cardMaker : List (Element msg) -> Element msg
cardMaker =
column
[ E.width <| px 650
, D.width 5
, D.color colourTheme.cardBackground
, D.roundEach
{ topLeft = 32
, topRight = 32
, bottomRight = 32
, bottomLeft = 32
}
]
cardFormatter : List (Element msg) -> Element msg
cardFormatter =
column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 8
]
cardContentSpacing : List (Element msg) -> Element msg
cardContentSpacing =
column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 8
, width fill
]
cardImageMaker : { src : String, description : String } -> Element msg
cardImageMaker image =
column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
image
]
]
cardTitleMaker : String -> Element msg
cardTitleMaker title =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, width fill
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text title ]
fieldSpacer : Attribute msg
fieldSpacer =
spacing 8

View file

@ -186,6 +186,7 @@ tooltip usher tooltip_ =
[ E.width fill
, height fill
, transparent True
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
, mouseOver [ transparent False ]
, (usher << map never) <|
el [ htmlAttribute (style "pointerEvents" "none") ]

View file

@ -0,0 +1,38 @@
module Config.StrengthBar exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Cuckery.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)
barMaker : (Int -> String) -> Int -> Element msg
barMaker getTooltip num =
el
([ E.height <| px 12
, E.width fill
, D.rounded 10
, D.color colourTheme.nonHighlightedDarkText
, D.width 2
, B.gradient
{ angle = 90
, steps =
List.concat
[ List.repeat num colourTheme.barGreen
, List.repeat (10 - num) colourTheme.barRed
]
}
]
++ [ tooltip below (myTooltip (getTooltip num)) ]
)
none

View file

@ -1,5 +1,6 @@
module Cuckery.Helpers exposing (..)
import Config.CardFormat exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Cuckery.Types exposing (..)
@ -19,94 +20,35 @@ import View exposing (View)
cuckMaker : Cuck -> Element msg
cuckMaker cuck =
row
[ spacing 20
, width fill
, E.height fill
, alignTop
, alignRight
]
[ imageMaker cuck
, column
[ E.width <| px 650 ]
[ cuckTitle cuck
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 8
]
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 8
]
[ socialMaker cuck
, dodgeTitle cuck
, dodgeMaker cuck
topLevelBox
[ cardImageMaker (cuckImage cuck)
, cardMaker
[ cardTitleMaker (cuckTitle cuck)
, cardFormatter
[ cardContentSpacing
[ column
[ fieldSpacer
]
[ socialMaker cuck
, dodgeTitle cuck
, dodgeMaker cuck
]
]
]
]
]
imageMaker : Cuck -> Element msg
imageMaker cuck =
column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
, description = cuck.cuckName
}
]
]
cuckImage : Cuck -> { src : String, description : String }
cuckImage cuck =
{ src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
, description = cuck.cuckName
}
cuckTitle : Cuck -> Element msg
cuckTitle : Cuck -> String
cuckTitle cuck =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
, alignBottom
, width fill
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
]
)
[ text cuck.cuckName ]
cuck.cuckName
dodgeMaker : Cuck -> Element msg
@ -117,16 +59,6 @@ dodgeMaker cuck =
(List.range 1 (List.length cuck.cuckDodges))
dodgeTitle : Cuck -> Element msg
dodgeTitle cuck =
row
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Dodges:" ]
socialMaker : Cuck -> Element msg
socialMaker cuck =
row
@ -143,6 +75,16 @@ socialMaker cuck =
]
dodgeTitle : Cuck -> Element msg
dodgeTitle cuck =
row
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Dodges:" ]
makeDodge : Dodge -> Int -> Element msg
makeDodge dodgeEntry index =
column

View file

@ -1,7 +1,9 @@
module Debate.Helpers exposing (..)
import Config.CardFormat exposing (..)
import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.StrengthBar exposing (..)
import Debate.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
@ -11,6 +13,7 @@ import Element.Events as V exposing (..)
import Element.Font as F exposing (..)
import Html exposing (div, hr)
import Html.Attributes as H exposing (style, title, wrap)
import Json.Decode exposing (field)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
@ -21,78 +24,38 @@ import View exposing (View)
argumentMaker : Argument -> Element msg
argumentMaker argument =
row
[ spacing 20
, E.width fill
, E.height fill
, E.alignTop
, E.alignRight
]
[ imageMaker argument
, column
[ E.width <| px 650
, alignTop
]
[ column
[ B.color colourTheme.cardBackground
, rounded 26
]
[ titleMaker argument
, column [ paddingEach { top = 10, right = 30, bottom = 10, left = 30 }, spacing 10 ]
[ propositionMaker argument
, reductioMaker argument
, summaryMaker argument
, strengthMaker argument
, tableMaker argument
, proofTreeMaker argument
topLevelBox
[ cardImageMaker (argumentImage argument)
, cardMaker
[ cardTitleMaker (argumentTitle argument)
, cardFormatter
[ cardContentSpacing
[ column
[ fieldSpacer
]
[ propositionMaker argument
, reductioMaker argument
, summaryMaker argument
, strengthMaker argument
, tableMaker argument
, proofTreeMaker argument
]
]
]
]
]
imageMaker : Argument -> Element msg
imageMaker argument =
column
[ E.width <| px 115
, E.height <| px 115
, E.alignTop
, E.alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ E.alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
, description = argument.argumentTitle
}
]
]
argumentImage : Argument -> { src : String, description : String }
argumentImage argument =
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
, description = argument.argumentTitle
}
titleMaker : Argument -> Element msg
titleMaker argument =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
, alignBottom
, E.width fill
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
]
)
[ text argument.argumentTitle
]
argumentTitle : Argument -> String
argumentTitle argument =
argument.argumentTitle
propositionMaker : Argument -> Element msg
@ -147,66 +110,6 @@ summaryMaker argument =
strengthMaker : Argument -> Element msg
strengthMaker argument =
let
barMaker : Int -> Element msg
barMaker num =
el
[ E.height <| px 12
, E.width fill
, D.rounded 10
, D.color colourTheme.nonHighlightedDarkText
, D.width 2
, B.gradient
{ angle = 90
, steps =
List.concat
[ List.repeat num colourTheme.barGreen
, List.repeat (10 - num) colourTheme.barRed
]
}
, tooltip below (myTooltip (getConfidenceTooltip num))
]
none
getConfidenceTooltip : Int -> String
getConfidenceTooltip num =
case num of
0 ->
"Extremely low. Speculative reasoning."
1 ->
"Very low. Extremely weak reasoning."
2 ->
"Low. Weak reasoning."
3 ->
"Kinda low. Somewhat weak reasoning."
4 ->
"Below average. More weak than strong."
5 ->
"Moderate. OK reasoning."
6 ->
"Above average. More strong than weak."
7 ->
"Kinda high. Somewhat strong reasoning."
8 ->
"High. Robust reasoning."
9 ->
"Very high. Extremely robust reasoning."
10 ->
"Extremely high. Air tight reasoning."
_ ->
"Confidence level out of expected range."
in
row [ E.width fill ]
[ column
[ E.alignTop, E.alignLeft ]
@ -215,10 +118,50 @@ strengthMaker argument =
]
, column
[ E.width fill, E.alignLeft, centerY ]
[ barMaker argument.argumentCertainty ]
[ barMaker getConfidenceTooltip argument.argumentCertainty ]
]
getConfidenceTooltip : Int -> String
getConfidenceTooltip num =
case num of
0 ->
"Extremely low. Speculative reasoning."
1 ->
"Very low. Extremely weak reasoning."
2 ->
"Low. Weak reasoning."
3 ->
"Kinda low. Somewhat weak reasoning."
4 ->
"Below average. More weak than strong."
5 ->
"Moderate. OK reasoning."
6 ->
"Above average. More strong than weak."
7 ->
"Kinda high. Somewhat strong reasoning."
8 ->
"High. Robust reasoning."
9 ->
"Very high. Extremely robust reasoning."
10 ->
"Extremely high. Air tight reasoning."
_ ->
"Confidence level out of expected range."
tableMaker : Argument -> Element msg
tableMaker argument =
let

View file

@ -18,6 +18,7 @@ fitAndFurious =
, appearanceEpisode = "51"
, appearanceLink = "https://www.youtube.com/watch?v=7I1IJSZIGm0"
, appearanceExperience = 7
, appearanceYear = "January 14th, 2022"
, appearanceSubjects =
[ { subject = "The story behind the Nutri-Dex." }
, { subject = "Seed oil consumption and health." }

View file

@ -18,6 +18,7 @@ foolproofMastery =
, appearanceEpisode = "14"
, appearanceLink = "https://www.youtube.com/watch?v=3w0wvckA1Hw"
, appearanceExperience = 10
, appearanceYear = "February 6th, 2023"
, appearanceSubjects =
[ { subject = "Vegetable oils & health outcomes." }
, { subject = "Lipid peroxidation." }
@ -30,6 +31,7 @@ foolproofMastery =
, appearanceEpisode = "15"
, appearanceLink = "https://www.youtube.com/watch?v=9k7COJgwCo4"
, appearanceExperience = 10
, appearanceYear = "February 13th, 2023"
, appearanceSubjects =
[ { subject = "Meat eating in Hong Kong." }
, { subject = "Different eating patterns." }

View file

@ -18,6 +18,7 @@ ketoGeeksPodcast =
, appearanceEpisode = "78"
, appearanceLink = "https://ketogeek.libsyn.com/in-defense-of-seed-oils-and-polyunsaturated-fats-nick-hiebert"
, appearanceExperience = 10
, appearanceYear = "March 18th, 2022"
, appearanceSubjects =
[ { subject = "How did you start getting into the seed oil debate?" }
, { subject = "What are some common claims made against seed oils?" }

View file

@ -17,7 +17,8 @@ legendaryLifePodcast =
[ { appearanceTitle = "Common Food And Nutrition Myths Debunked"
, appearanceEpisode = "391"
, appearanceLink = "https://www.legendarylifepodcast.com/391-5-common-food-and-nutrition-myths-debunked-with-nick-hiebert/c"
, appearanceExperience = 10
, appearanceExperience = 9
, appearanceYear = "March 9th, 2020"
, appearanceSubjects =
[ { subject = "The importance of identifying quality evidence." }
, { subject = "Salt doesnt cost high blood pressure?" }

View file

@ -17,7 +17,8 @@ markBellsPowerProject =
[ { appearanceTitle = "Seed Oils Arent as Bad as You May Think"
, appearanceEpisode = "670"
, appearanceLink = "https://www.youtube.com/watch?v=omzCi2CGoxo"
, appearanceExperience = 1
, appearanceExperience = 4
, appearanceYear = "Feburary 1st, 2022"
, appearanceSubjects =
[ { subject = "Quick background on seed oils." }
, { subject = "How does red meat increase disease risk?" }

View file

@ -18,6 +18,7 @@ muscleMemoirsPodcast =
, appearanceEpisode = "11"
, appearanceLink = "https://www.youtube.com/watch?v=SF1BBOA5FAQ"
, appearanceExperience = 10
, appearanceYear = "March 8th, 2020"
, appearanceSubjects =
[ { subject = "The story behind the Nutri-Dex." }
, { subject = "Misconceptions about nutrient density." }
@ -31,6 +32,7 @@ muscleMemoirsPodcast =
, appearanceEpisode = "82"
, appearanceLink = "https://www.youtube.com/watch?v=WfApzH4Dj3M"
, appearanceExperience = 10
, appearanceYear = "May 21st, 2021"
, appearanceSubjects =
[ { subject = "Mechanistic arguments against seed oils." }
, { subject = "Linoleic acid consumption and heart disease." }

View file

@ -17,7 +17,8 @@ sigmaNutritionRadio =
[ { appearanceTitle = "Micronutrients, Anti-nutrients, and Non-essential Nutrients"
, appearanceEpisode = "360"
, appearanceLink = "https://sigmanutrition.com/episode360/"
, appearanceExperience = 1
, appearanceExperience = 10
, appearanceYear = "November 12th, 2020"
, appearanceSubjects =
[ { subject = "How best to measure nutrient density." }
, { subject = "The downsides of maximizing nutrient density." }

View file

@ -0,0 +1,30 @@
module Interviews.Episodes.StrenuousLifePodcast exposing (..)
import Interviews.Types exposing (..)
strenuousLifePodcast : Interview
strenuousLifePodcast =
let
name : String
name =
"Strenuous Life Podcast"
in
{ interviewName = name
, interviewImage = formatInterviewName name
, interviewSocial = "https://www.threads.net/@stephan_kesting"
, interviewAppearances =
[ { appearanceTitle = "Contrarian Thinking About Nutrition"
, appearanceEpisode = "244"
, appearanceLink = "https://www.grapplearts.com/contrarian-thinking-about-nutrition-with-nick-hiebert-strenuous-life-podcast-ep-244/"
, appearanceExperience = 9
, appearanceYear = "December 2nd, 2019"
, appearanceSubjects =
[ { subject = "The nutrient density of different foods." }
, { subject = "The ten all time greatest, most nutrient dense foods." }
, { subject = "The ketogenic diet." }
, { subject = "Fats vs carbs vs proteins." }
]
}
]
}

View file

@ -1,7 +1,9 @@
module Interviews.Helpers exposing (..)
import Config.CardFormat exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Config.StrengthBar exposing (..)
import Cuckery.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
@ -20,44 +22,15 @@ import View exposing (View)
interviewMaker : Interview -> Element msg
interviewMaker interview =
row
[ spacing 20
, width fill
, E.height fill
, alignTop
, alignRight
]
[ imageMaker interview
, column
[ E.width <| px 650 ]
[ nameMaker interview
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 3
]
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
]
topLevelBox
[ cardImageMaker (interviewImage interview)
, cardMaker
[ cardTitleMaker (interviewTitle interview)
, cardFormatter
[ cardContentSpacing
[ column
[ spacing 8
[ fieldSpacer
, width fill
]
[ socialMaker interview
, appearanceTitle interview
@ -69,58 +42,16 @@ interviewMaker interview =
]
imageMaker : Interview -> Element msg
imageMaker interview =
column
[ E.width <| px 115
, E.height <| px 115
, alignTop
, alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "interviews/" ++ interview.interviewImage ++ ".png"
, description = interview.interviewImage
}
]
]
interviewImage : Interview -> { src : String, description : String }
interviewImage interview =
{ src = "interviews/" ++ interview.interviewImage ++ ".png"
, description = interview.interviewImage
}
nameMaker : Interview -> Element msg
nameMaker interview =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, width fill
, B.color colourTheme.highlightTextHover
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text interview.interviewName ]
interviewTitle : Interview -> String
interviewTitle interview =
interview.interviewName
socialMaker : Interview -> Element msg
@ -166,7 +97,9 @@ makeAppearance appearanceEntry index =
]
)
[ appearanceEpisode appearanceEntry index
, subjectMaker appearanceEntry index
, experienceMaker appearanceEntry
, dateMaker appearanceEntry
, subjectMaker appearanceEntry
, subjectList appearanceEntry
]
@ -203,8 +136,103 @@ appearanceEpisode appearanceEntry index =
]
subjectMaker : Appearance -> Int -> Element msg
subjectMaker appearanceEntry index =
experienceMaker : Appearance -> Element msg
experienceMaker appearanceEntry =
row
[ width fill
, height fill
, paddingEach
{ top = 0
, bottom = 0
, left = 55
, right = 0
}
]
[ column
[ E.alignTop, E.alignLeft ]
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 112 ])
[ el [ tooltip below (myTooltip "This represents how pleasant it was to interact with the host(s).") ] (text "Pleasantness:") ]
]
, column
[ E.width fill, E.alignLeft, centerY, height fill ]
[ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
]
getExperienceTooltip : Int -> String
getExperienceTooltip num =
case num of
0 ->
"Nightmare. Deliberately malicious."
1 ->
"Toxic. Utter fucking twat(s)."
2 ->
"Hostile. Consistently disruptive."
3 ->
"Belligerent. Consistently disrespectful."
4 ->
"Uncivil. Frequently dismissive."
5 ->
"Neutral. Unremarkable social interaction."
6 ->
"Civil. Slightly considerate."
7 ->
"Pleasant. Genuinely respectful."
8 ->
"Very kind. Consistently supportive."
9 ->
"Compassionate. Went out of their way."
10 ->
"Absolute angel. Perfectly empathetic."
_ ->
"Behavior level out of expected range."
dateMaker : Appearance -> Element msg
dateMaker appearanceEntry =
row paragraphBoldFormat
[ column
[ alignTop
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 55
}
]
[ text "Published:"
]
, column
[ alignTop
, width fill
]
[ paragraph
[ F.regular
, paddingEach
{ top = 0
, right = 0
, bottom = 0
, left = 3
}
]
[ text appearanceEntry.appearanceYear ]
]
]
subjectMaker : Appearance -> Element msg
subjectMaker appearanceEntry =
row paragraphBoldFormat
[ column
[ alignTop

View file

@ -13,6 +13,7 @@ type alias Appearance =
{ appearanceEpisode : String
, appearanceLink : String
, appearanceTitle : String
, appearanceYear : String
, appearanceExperience : Int
, appearanceSubjects : List Subjects
}
@ -42,3 +43,4 @@ formatInterviewSocial : String -> FormattedInterviewSocial
formatInterviewSocial name =
name
|> String.replace "https://x.com/" "@"
|> String.replace "https://www.threads.net/@" "@"

View file

@ -164,53 +164,7 @@ view { toContentMsg, model, content } =
]
]
]
, row
[ alignBottom
, E.width fill
, E.height <| px 100
]
[ row
[ centerX
, centerY
, E.width fill
, E.height fill
, spacing 10
, paddingEach { top = 40, bottom = 10, left = 20, right = 20 }
]
[ E.image
[ E.width <| px 30
, alignBottom
, centerX
]
{ src = "navbar/gitlab-light.png"
, description = ""
}
, E.image
[ E.width <| px 30
, alignBottom
, centerX
]
{ src = "navbar/twitter-light.png"
, description = ""
}
, E.image
[ E.width <| px 30
, alignBottom
, centerX
]
{ src = "navbar/mastodon-light.png"
, description = ""
}
, E.image
[ E.width <| px 33
, alignBottom
, centerX
]
{ src = "navbar/discord-light.png"
, description = ""
}
]
]
, footerIcons
]
, el
[ E.width fill
@ -231,6 +185,49 @@ localhostUrl =
"http://localhost:1234/"
footerIcons : Element msg
footerIcons =
row
[ alignBottom
, E.width fill
, E.height <| px 100
]
[ row
[ centerX
, centerY
, E.width fill
, E.height fill
, spacing 20
, paddingEach { top = 40, bottom = 20, left = 20, right = 20 }
]
<|
List.map
footerImageMaker
iconList
]
footerImageMaker : String -> Element msg
footerImageMaker name =
E.image
[ E.width <| px 20
, alignBottom
, centerX
]
{ src = "navbar/" ++ name ++ "-light.png"
, description = ""
}
iconList : List String
iconList =
[ "gitlab"
, "twitter"
, "mastodon"
, "discord"
]
buttonMaker : String -> Element msg
buttonMaker name =
row

View file

@ -16,6 +16,7 @@ import Interviews.Episodes.LegendaryLifePodcast exposing (legendaryLifePodcast)
import Interviews.Episodes.MarkBellsPowerProject exposing (markBellsPowerProject)
import Interviews.Episodes.MuscleMemoirsPodcast exposing (muscleMemoirsPodcast)
import Interviews.Episodes.SigmaNutritionRadio exposing (sigmaNutritionRadio)
import Interviews.Episodes.StrenuousLifePodcast exposing (strenuousLifePodcast)
import Interviews.Helpers exposing (..)
import Layouts
import Page exposing (Page)
@ -111,4 +112,5 @@ interviewList =
, legendaryLifePodcast
, muscleMemoirsPodcast
, fitAndFurious
, strenuousLifePodcast
]

View file

@ -1,5 +1,6 @@
module Services.Helpers exposing (..)
import Config.CardFormat exposing (..)
import Config.Colour exposing (..)
import Config.Format exposing (..)
import Effect exposing (Effect)
@ -8,6 +9,7 @@ import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Interviews.Helpers exposing (interviewImage)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
@ -20,109 +22,39 @@ import View exposing (View)
serviceMaker : Service -> Element msg
serviceMaker service =
row
[ spacing 20
, E.width fill
, E.height fill
, E.alignTop
, E.alignRight
]
[ imageMaker service
, column
[ E.width <| px 650 ]
[ titleMaker service
, column
[ E.height fill
, E.width fill
, B.color colourTheme.cardBackground
, paddingEach
{ top = 10
, bottom = 10
, left = 10
, right = 10
}
, D.roundEach
{ topLeft = 0
, topRight = 0
, bottomRight = 26
, bottomLeft = 26
}
, spacing 3
]
[ column
[ paddingEach
{ top = 0
, bottom = 0
, left = 15
, right = 15
}
, spacing 8
]
[ rateMaker service
, descriptionMaker service
, offeringMaker service
topLevelBox
[ cardImageMaker (serviceImage service)
, cardMaker
[ cardTitleMaker (serviceTitle service)
, cardFormatter
[ cardContentSpacing
[ column
[ fieldSpacer
]
[ rateMaker service
, descriptionMaker service
, offeringMaker service
]
]
]
]
]
imageMaker : Service -> Element msg
imageMaker service =
column
[ E.width <| px 115
, E.height <| px 115
, E.alignTop
, E.alignRight
]
[ column
[ D.rounded 100
, D.width 5
, D.color colourTheme.cardBackground
, B.color colourTheme.cardBackground
]
[ E.image
[ E.alignRight
, alignTop
, D.rounded 100
, clip
, E.width <| px 90
, E.height <| px 90
]
{ src = "services/" ++ service.serviceImage ++ ".png"
, description = service.serviceName
}
]
]
serviceImage : Service -> { src : String, description : String }
serviceImage service =
{ src = "services/" ++ service.serviceImage ++ ".png"
, description = service.serviceName
}
titleMaker : Service -> Element msg
titleMaker service =
row
(nonHighlightedTitleFormat
++ [ F.size 20
, B.color colourTheme.highlightTextHover
, paddingEach
{ top = 6
, bottom = 3
, left = 25
, right = 15
}
, alignBottom
, E.width fill
, D.roundEach
{ topLeft = 26
, topRight = 26
, bottomRight = 0
, bottomLeft = 0
}
]
)
[ text service.serviceName
]
serviceTitle : Service -> String
serviceTitle service =
service.serviceName
serviceWidth =
width <| px 80
width <| px 45
rateMaker : Service -> Element msg

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB