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

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;

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
                 ]