feat: started working on responsiveness

This commit is contained in:
Nick 2024-12-06 03:02:37 -06:00
parent 31be063412
commit d8ac47c5ee
3 changed files with 108 additions and 60 deletions

View file

@ -53,6 +53,7 @@ cuckMakerMobile cuck =
[ alignTop
, centerX
, alignLeft
, spacing 3
]
[ cardImageMakerMobile (cuckImage cuck)
, socialMaker cuck
@ -97,13 +98,13 @@ dodgeMaker cuck =
socialMaker : Cuck -> Element msg
socialMaker cuck =
row
paragraph
(paragraphBoldFormat
++ [ F.size 18
, spacing 8
]
)
[ text "Social:"
[ text "Social: "
, paragraphLinkFormat
{ url = cuck.cuckSocial
, label = transitionHighlightedLinkHover <| text (formatCuckSocial cuck.cuckSocial)
@ -113,12 +114,12 @@ socialMaker cuck =
dodgeTitle : Cuck -> Element msg
dodgeTitle cuck =
row
paragraph
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Dodges:" ]
[ text "Dodges: " ]
makeDodge : Dodge -> Int -> Element msg
@ -148,12 +149,12 @@ makeDodge dodgeEntry index =
)
[ text (String.fromInt index ++ ". ") ]
, column
[ spacing 8
[ spacing 3
, width fill
]
[ circumstanceMaker dodgeEntry
, column
[ spacing 8
[ spacing 3
, width fill
]
[ propositionMaker dodgeEntry
@ -198,6 +199,8 @@ circumstanceMaker dodgeEntry =
{ url = dodgeEntry.dodgeLink
, label =
row [ F.size 18 ]
[ column [ width fill ]
[ paragraph []
[ transitionHighlightedLinkHover <|
text
(case dodgeEntry.dodgeDescription of
@ -222,23 +225,25 @@ circumstanceMaker dodgeEntry =
VagueGesture ->
"Chose to gesture vaguely instead of engaging"
)
, text "." |> el [ F.color colourTheme.textLightGrey ]
, row [ alignTop, alignLeft ]
, paragraph [ F.color colourTheme.textLightGrey ] [ text "." ]
, column
[ spacing 5
, F.size 12
]
(List.indexedMap
(\index2 link ->
newTabLink
[ paddingEach
{ top = 0
, right = 15
, right = 0
, bottom = 0
, left = 5
}
, F.size 13
]
{ url = link
, label =
row []
[ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
row [ moveUp 5 ]
[ transitionHighlightedLinkHover <| text (String.fromInt (index2 + 1))
, text ", " |> el [ F.color colourTheme.textLightGrey ]
]
}
@ -246,6 +251,8 @@ circumstanceMaker dodgeEntry =
dodgeEntry.dodgeReceipts
)
]
]
]
}
]
@ -253,7 +260,7 @@ circumstanceMaker dodgeEntry =
propositionMaker : Dodge -> Element msg
propositionMaker dodgeEntry =
row paragraphBoldFormat
[ column
[ paragraph
[ alignTop
, dodgeWidth
]
@ -271,7 +278,7 @@ propositionMaker dodgeEntry =
attitudeMaker : Dodge -> Element msg
attitudeMaker dodgeEntry =
row (paragraphBoldFormat ++ [ width fill ])
[ column
[ paragraph
[ alignTop
, dodgeWidth
]
@ -354,7 +361,7 @@ reductioMaker dodgeEntry =
reasonMaker : Dodge -> Element msg
reasonMaker dodgeEntry =
row (paragraphBoldFormat ++ [ width fill ])
[ column
[ paragraph
[ alignTop
, dodgeWidth
]
@ -378,7 +385,7 @@ reasonMaker dodgeEntry =
displayFallacy : String -> Element msg
displayFallacy fallacyText =
row paragraphBoldFormat
[ column
[ paragraph
[ alignTop
, dodgeWidth
]

View file

@ -65,7 +65,7 @@ donateMakerMobile donate =
[ cardImageMakerMobile (donateImage donate)
, feeMaker donate
, preferenceMaker donate
, tableMaker donate
, tableMakerMobile donate
, proTitleMaker donate
, proMaker donate
, conTitleMaker donate
@ -333,6 +333,47 @@ tableMaker donate =
]
tableMakerMobile : Donate -> Element msg
tableMakerMobile donate =
column
[ centerX
, E.width fill
]
[ wrappedRow
(paragraphBoldFormat
++ [ E.alignLeft
, E.width fill
, htmlAttribute <| H.style "position" "relative"
]
)
[ E.table
[ spacing 0
, D.rounded 10
, D.width 2
, D.color colourTheme.textDarkGrey
, clip
]
{ data = donate.donateFeatures
, columns =
List.map createColumn
[ { label = "Free"
, getter = .free
}
, { label = "Subs"
, getter = .subscriptions
}
, { label = "Easy"
, getter = .userFriendly
}
, { label = "Safe"
, getter = .anonymous
}
]
}
]
]
createColumn : { label : String, getter : Features -> Maybe Bool } -> Column Features msg
createColumn { label, getter } =
{ header =

View file

@ -76,13 +76,13 @@ interviewTitle interview =
socialMaker : Interview -> Element msg
socialMaker interview =
row
paragraph
(paragraphBoldFormat
++ [ F.size 18
, spacing 5
]
)
[ text "Social:"
[ text "Social: "
, paragraphLinkFormat
{ url = interview.interviewSocial
, label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
@ -92,12 +92,12 @@ socialMaker interview =
appearanceTitle : Interview -> Element msg
appearanceTitle interview =
row
paragraph
(paragraphBoldFormat
++ [ F.size 18
]
)
[ text "Appearances:" ]
[ text "Appearances: " ]
appearanceMaker : Interview -> Element msg
@ -156,7 +156,7 @@ episodeMaker appearanceEntry =
paragraphLinkFormat
{ url = appearanceEntry.appearanceLink
, label =
row
paragraph
[ F.size 18
]
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
@ -265,18 +265,18 @@ dateMaker appearanceEntry =
subjectMaker : Appearance -> Element msg
subjectMaker appearanceEntry =
row paragraphBoldFormat
paragraph paragraphBoldFormat
[ column
[ alignTop
]
[ text "Subjects:"
[ text "Subjects: "
]
]
subjectList : Appearance -> Element msg
subjectList appearanceEntry =
column
paragraph
[ spacing 8
, width fill
, paddingEach
@ -294,7 +294,7 @@ subjectList appearanceEntry =
makeSubject : Subjects -> Element msg
makeSubject subjects =
column
paragraph
[ E.width fill
, alignLeft
, paddingEach