parent
9b1520ffbc
commit
0a9abd449c
|
@ -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;
|
||||
|
|
24
src/View.elm
24
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
|
||||
]
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue