mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: standardized formatting conventions across pages
This commit is contained in:
Nick
parent
d5e7cfe814
commit
ead41f0ed0
19 changed files with 503 additions and 446 deletions
133
frontend/src/Config/CardFormat.elm
Normal file
133
frontend/src/Config/CardFormat.elm
Normal 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
|
||||
|
|
@ -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") ]
|
||||
|
|
|
|||
38
frontend/src/Config/StrengthBar.elm
Normal file
38
frontend/src/Config/StrengthBar.elm
Normal 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
|
||||
|
|
@ -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,42 +20,14 @@ 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
|
||||
]
|
||||
topLevelBox
|
||||
[ cardImageMaker (cuckImage cuck)
|
||||
, cardMaker
|
||||
[ cardTitleMaker (cuckTitle cuck)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
[ paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, spacing 8
|
||||
[ fieldSpacer
|
||||
]
|
||||
[ socialMaker cuck
|
||||
, dodgeTitle cuck
|
||||
|
|
@ -63,50 +36,19 @@ cuckMaker 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
|
||||
]
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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,23 +24,15 @@ 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
|
||||
]
|
||||
topLevelBox
|
||||
[ cardImageMaker (argumentImage argument)
|
||||
, cardMaker
|
||||
[ cardTitleMaker (argumentTitle argument)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
[ B.color colourTheme.cardBackground
|
||||
, rounded 26
|
||||
[ fieldSpacer
|
||||
]
|
||||
[ titleMaker argument
|
||||
, column [ paddingEach { top = 10, right = 30, bottom = 10, left = 30 }, spacing 10 ]
|
||||
[ propositionMaker argument
|
||||
, reductioMaker argument
|
||||
, summaryMaker argument
|
||||
|
|
@ -48,51 +43,19 @@ argumentMaker 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
|
||||
]
|
||||
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,26 +110,17 @@ 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
|
||||
row [ E.width fill ]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
[ el [ tooltip below (myTooltip "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ]
|
||||
]
|
||||
}
|
||||
, tooltip below (myTooltip (getConfidenceTooltip num))
|
||||
, column
|
||||
[ E.width fill, E.alignLeft, centerY ]
|
||||
[ barMaker getConfidenceTooltip argument.argumentCertainty ]
|
||||
]
|
||||
none
|
||||
|
||||
|
||||
getConfidenceTooltip : Int -> String
|
||||
getConfidenceTooltip num =
|
||||
|
|
@ -206,17 +160,6 @@ strengthMaker argument =
|
|||
|
||||
_ ->
|
||||
"Confidence level out of expected range."
|
||||
in
|
||||
row [ E.width fill ]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
[ el [ tooltip below (myTooltip "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ]
|
||||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft, centerY ]
|
||||
[ barMaker argument.argumentCertainty ]
|
||||
]
|
||||
|
||||
|
||||
tableMaker : Argument -> Element msg
|
||||
|
|
|
|||
|
|
@ -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." }
|
||||
|
|
|
|||
|
|
@ -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." }
|
||||
|
|
|
|||
|
|
@ -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?" }
|
||||
|
|
|
|||
|
|
@ -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 doesn’t cost high blood pressure?" }
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ markBellsPowerProject =
|
|||
[ { appearanceTitle = "Seed Oils Aren’t 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?" }
|
||||
|
|
|
|||
|
|
@ -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." }
|
||||
|
|
|
|||
|
|
@ -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." }
|
||||
|
|
|
|||
30
frontend/src/Interviews/Episodes/StrenuousLifePodcast.elm
Normal file
30
frontend/src/Interviews/Episodes/StrenuousLifePodcast.elm
Normal 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." }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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
|
||||
topLevelBox
|
||||
[ cardImageMaker (interviewImage interview)
|
||||
, cardMaker
|
||||
[ cardTitleMaker (interviewTitle interview)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
[ fieldSpacer
|
||||
, 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
|
||||
}
|
||||
]
|
||||
[ column
|
||||
[ spacing 8
|
||||
]
|
||||
[ 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
|
||||
]
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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/@" "@"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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,42 +22,14 @@ 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
|
||||
]
|
||||
topLevelBox
|
||||
[ cardImageMaker (serviceImage service)
|
||||
, cardMaker
|
||||
[ cardTitleMaker (serviceTitle service)
|
||||
, cardFormatter
|
||||
[ cardContentSpacing
|
||||
[ column
|
||||
[ paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, spacing 8
|
||||
[ fieldSpacer
|
||||
]
|
||||
[ rateMaker service
|
||||
, descriptionMaker service
|
||||
|
|
@ -64,65 +38,23 @@ serviceMaker 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
|
||||
]
|
||||
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
|
||||
|
|
|
|||
BIN
frontend/static/interviews/strenuouslifepodcast.png
Normal file
BIN
frontend/static/interviews/strenuouslifepodcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Loading…
Add table
Add a link
Reference in a new issue