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

View file

@ -65,7 +65,7 @@ donateMakerMobile donate =
[ cardImageMakerMobile (donateImage donate) [ cardImageMakerMobile (donateImage donate)
, feeMaker donate , feeMaker donate
, preferenceMaker donate , preferenceMaker donate
, tableMaker donate , tableMakerMobile donate
, proTitleMaker donate , proTitleMaker donate
, proMaker donate , proMaker donate
, conTitleMaker 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 : String, getter : Features -> Maybe Bool } -> Column Features msg
createColumn { label, getter } = createColumn { label, getter } =
{ header = { header =

View file

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