1
0
Fork 0

Close #20: Render spoilers appropriately. (#21)

This commit is contained in:
Nicolas Perriault 2017-04-21 14:07:55 +02:00 committed by GitHub
parent 9b1520ffbc
commit 0a9abd449c
2 changed files with 60 additions and 2 deletions

View File

@ -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;

View File

@ -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
]