mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 12:25:12 -05:00
feat: standardized formatting conventions across pages
This commit is contained in:
Nick
parent
f2c6f1ce26
commit
d5e7cfe814
12 changed files with 831 additions and 536 deletions
|
|
@ -17,75 +17,6 @@ import Shared
|
|||
import View exposing (View)
|
||||
|
||||
|
||||
makeSubject : Subjects -> Element msg
|
||||
makeSubject subjects =
|
||||
column [ E.width fill, alignLeft ]
|
||||
[ paragraph [ F.regular ]
|
||||
[ text ("‣ " ++ subjects.subject) ]
|
||||
]
|
||||
|
||||
|
||||
makeAppearance : Appearance -> Int -> Element msg
|
||||
makeAppearance appearanceEntry index =
|
||||
column
|
||||
(paragraphAlignLeft
|
||||
++ [ spacing 3
|
||||
, width fill
|
||||
]
|
||||
)
|
||||
[ row
|
||||
(paragraphFormat
|
||||
++ [ F.size 18
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, E.width fill
|
||||
]
|
||||
)
|
||||
[ text " "
|
||||
, text (String.fromInt index ++ ". ")
|
||||
, paragraphLinkFormat
|
||||
{ url = appearanceEntry.appearanceLink
|
||||
, label =
|
||||
row
|
||||
[ F.size 18
|
||||
]
|
||||
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|
||||
|> el
|
||||
[ F.color colourTheme.highlightText
|
||||
, mouseOver [ F.color colourTheme.highlightTextHover ]
|
||||
, transitionStyle
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
, row paragraphBoldFormat
|
||||
[ column [ alignTop, width <| px 125 ]
|
||||
[ text "Subjects:"
|
||||
|> el
|
||||
[ paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 55
|
||||
}
|
||||
]
|
||||
]
|
||||
, column
|
||||
[ spacing 8
|
||||
, width fill
|
||||
]
|
||||
<|
|
||||
List.map2 (\x y -> makeSubject x)
|
||||
appearanceEntry.appearanceSubjects
|
||||
(List.range 1 (List.length appearanceEntry.appearanceSubjects))
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
interviewMaker : Interview -> Element msg
|
||||
interviewMaker interview =
|
||||
row
|
||||
|
|
@ -95,67 +26,13 @@ interviewMaker interview =
|
|||
, alignTop
|
||||
, alignRight
|
||||
]
|
||||
[ column
|
||||
[ E.width <| px 115
|
||||
, E.height <| px 115
|
||||
, alignTop
|
||||
, alignRight
|
||||
]
|
||||
[ column
|
||||
[ D.rounded 100
|
||||
, D.width 5
|
||||
, D.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
|
||||
}
|
||||
]
|
||||
]
|
||||
[ imageMaker interview
|
||||
, column
|
||||
[ E.width <| px 600 ]
|
||||
[ 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
|
||||
}
|
||||
|
||||
-- , B.gradient
|
||||
-- { angle = 1.5708
|
||||
-- , steps =
|
||||
-- [ colourTheme.highlightTextHover
|
||||
-- , colourTheme.highlightTextHover
|
||||
-- , colourTheme.transparent
|
||||
-- , colourTheme.transparent
|
||||
-- ]
|
||||
-- }
|
||||
]
|
||||
)
|
||||
[ text interview.interviewName ]
|
||||
[ E.width <| px 650 ]
|
||||
[ nameMaker interview
|
||||
, column
|
||||
[ E.height fill
|
||||
, E.width fill
|
||||
|
||||
, B.color colourTheme.cardBackground
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
|
|
@ -170,50 +47,209 @@ interviewMaker interview =
|
|||
, bottomLeft = 26
|
||||
}
|
||||
, spacing 3
|
||||
-- , B.gradient
|
||||
-- { angle = 1.5708
|
||||
-- , steps =
|
||||
-- [ colourTheme.cardBackground
|
||||
-- , colourTheme.cardBackground
|
||||
-- , colourTheme.transparent
|
||||
-- , colourTheme.transparent
|
||||
-- ]
|
||||
-- }
|
||||
]
|
||||
[ row
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, spacing 5
|
||||
]
|
||||
)
|
||||
[ text "Social:"
|
||||
, paragraphLinkFormat
|
||||
{ url = interview.interviewSocial
|
||||
, label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
|
||||
[ column
|
||||
[ paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
]
|
||||
, row
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
]
|
||||
)
|
||||
[ text "Appearances:" ]
|
||||
, column [ spacing 8, width fill ] <|
|
||||
List.map2 (\x y -> makeAppearance x y)
|
||||
interview.interviewAppearances
|
||||
(List.range 1 (List.length interview.interviewAppearances))
|
||||
[ column
|
||||
[ spacing 8
|
||||
]
|
||||
[ socialMaker interview
|
||||
, appearanceTitle interview
|
||||
, appearanceMaker 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
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
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 ]
|
||||
|
||||
|
||||
socialMaker : Interview -> Element msg
|
||||
socialMaker interview =
|
||||
row
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, spacing 5
|
||||
]
|
||||
)
|
||||
[ text "Social:"
|
||||
, paragraphLinkFormat
|
||||
{ url = interview.interviewSocial
|
||||
, label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
appearanceTitle : Interview -> Element msg
|
||||
appearanceTitle interview =
|
||||
row
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
]
|
||||
)
|
||||
[ text "Appearances:" ]
|
||||
|
||||
|
||||
appearanceMaker : Interview -> Element msg
|
||||
appearanceMaker interview =
|
||||
column [ spacing 15, width fill ] <|
|
||||
List.map2 (\x y -> makeAppearance x y)
|
||||
interview.interviewAppearances
|
||||
(List.range 1 (List.length interview.interviewAppearances))
|
||||
|
||||
|
||||
makeAppearance : Appearance -> Int -> Element msg
|
||||
makeAppearance appearanceEntry index =
|
||||
column
|
||||
(paragraphAlignLeft
|
||||
++ [ spacing 8
|
||||
, width fill
|
||||
]
|
||||
)
|
||||
[ appearanceEpisode appearanceEntry index
|
||||
, subjectMaker appearanceEntry index
|
||||
, subjectList appearanceEntry
|
||||
]
|
||||
|
||||
|
||||
appearanceEpisode : Appearance -> Int -> Element msg
|
||||
appearanceEpisode appearanceEntry index =
|
||||
row
|
||||
(paragraphFormat
|
||||
++ [ F.size 18
|
||||
, E.width fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 35
|
||||
, right = 0
|
||||
}
|
||||
]
|
||||
)
|
||||
[ text (String.fromInt index ++ ". ")
|
||||
, paragraphLinkFormat
|
||||
{ url = appearanceEntry.appearanceLink
|
||||
, label =
|
||||
row
|
||||
[ F.size 18
|
||||
]
|
||||
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|
||||
|> el
|
||||
[ F.color colourTheme.highlightText
|
||||
, mouseOver [ F.color colourTheme.highlightTextHover ]
|
||||
, transitionStyle
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
subjectMaker : Appearance -> Int -> Element msg
|
||||
subjectMaker appearanceEntry index =
|
||||
row paragraphBoldFormat
|
||||
[ column
|
||||
[ alignTop
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 55
|
||||
}
|
||||
]
|
||||
[ text "Subjects:"
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
subjectList : Appearance -> Element msg
|
||||
subjectList appearanceEntry =
|
||||
column
|
||||
[ spacing 8
|
||||
, width fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 75
|
||||
}
|
||||
]
|
||||
<|
|
||||
List.map2 (\x y -> makeSubject x)
|
||||
appearanceEntry.appearanceSubjects
|
||||
(List.range 1 (List.length appearanceEntry.appearanceSubjects))
|
||||
|
||||
|
||||
makeSubject : Subjects -> Element msg
|
||||
makeSubject subjects =
|
||||
column
|
||||
[ E.width fill
|
||||
, alignLeft
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 8
|
||||
}
|
||||
]
|
||||
[ paragraph [ F.regular ]
|
||||
[ text ("‣ " ++ subjects.subject) ]
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue