diff --git a/public/style.css b/public/style.css index 322e4d5..55ad1d9 100644 --- a/public/style.css +++ b/public/style.css @@ -49,6 +49,44 @@ color: #9baec8; } +/* Spoiler */ + +.spoiled input[type=checkbox] { + display: none; +} + +.spoiled input[type=checkbox] + label { + display: block; + text-align: center; + margin-top: .5em; + font-weight: normal; + background: #222; + color: #fff; + padding: .3em; + border: 1px solid #444; + cursor: pointer; +} + + +.spoiled input[type=checkbox]:checked + label + .spoiled-content { + height: auto; + opacity: 1; + padding: 10px; +} + +.spoiled .spoiled-content { + height: 0; + overflow: hidden; + opacity: 0; + padding: 10px; + background: #333; + border: 1px solid #777; + border-radius: 4px; + transition: all .6s; +} + +/* Status text content rules */ + .attachment { white-space: pre-wrap; word-wrap: break-word; diff --git a/src/View.elm b/src/View.elm index 3308016..bfc629d 100644 --- a/src/View.elm +++ b/src/View.elm @@ -56,8 +56,28 @@ icon name = i [ class <| "glyphicon glyphicon-" ++ name ] [] +statusContentView : Mastodon.Status -> Html Msg +statusContentView status = + case status.spoiler_text of + "" -> + div [ class "status-text" ] <| formatContent status.content + + spoiler -> + -- Note: Spoilers are dealt with using pure CSS. + let + statusId = + "spoiler" ++ (toString status.id) + in + div [ class "status-text spoiled" ] + [ div [ class "spoiler" ] <| formatContent status.spoiler_text + , input [ type_ "checkbox", id statusId, class "spoiler-toggler" ] [] + , label [ for statusId ] [ text "Reveal content" ] + , div [ class "spoiled-content" ] <| formatContent status.content + ] + + statusView : Mastodon.Status -> Html Msg -statusView { account, content, reblog } = +statusView ({ account, content, reblog } as status) = case reblog of Just (Mastodon.Reblog reblog) -> div [ class "reblog" ] @@ -79,7 +99,7 @@ statusView { account, content, reblog } = , span [ class "acct" ] [ text <| " @" ++ account.username ] ] ] - , div [ class "status-text" ] <| formatContent content + , statusContentView status ]