Improve timeline styles. (#17)

* Improve timeline styles.
* Add icons to column headings.
* Address a few typography issues.
* Handle long links.
* Linewrap attachment links.

public/style.css

@@ -10,23 +10,57 @@
 .panel-heading {
   font-weight: bold;
 }
+.panel-heading > .glyphicon {
+  margin-right: 8px;
+}
 
 .avatar {
   display: block;
   float: left;
   width: 50px;
   border-radius: 5%;
-  margin-right: .5em;
+  margin-right: .10px;
-  margin-bottom: .5em;
+  margin-bottom: 10px;
+  margin-top: 2px;
 }
 
 .username {
   font-weight: bold;
+  margin-left: 65px;
+  margin-bottom: 4px;
+}
+
+.acct {
+  font-size: 97%;
+  font-weight: normal;
+  color: #a0a0a0;
+}
+
+.reblogger {
+  color: #ccc;
+}
+
+.status-text {
+  margin-left: 65px;
+  color: #efefef;
+}
+
+.status-text a, .u-url, .mention, .hashtag, .tag {
+  color: #9baec8;
+}
+
+.attachment {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.ellipsis {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .invisible {
-    font-size: 0;
+    display: none;
-    line-height: 0;
-    display: inline-block;
-    width: 0;
 }

src/View.elm

@@ -9,6 +9,22 @@ import Mastodon
 import Model exposing (Model, DraftMsg(..), Msg(..))
 
 
+replace : String -> String -> String -> String
+replace from to str =
+    String.split from str |> String.join to
+
+
+formatContent : String -> List (Html msg)
+formatContent content =
+    content
+        |> replace "'" "'"
+        |> replace " ?" " ?"
+        |> replace " !" " !"
+        |> replace " :" " :"
+        |> HtmlParser.parse
+        |> toVirtualDom
+
+
 errorView : String -> Html Msg
 errorView error =
     div [ class "alert alert-danger" ] [ text error ]
@@ -24,34 +40,46 @@ errorsListView model =
             div [] <| List.map errorView model.errors
 
 
+icon : String -> Html Msg
+icon name =
+    i [ class <| "glyphicon glyphicon-" ++ name ] []
+
+
 statusView : Mastodon.Status -> Html Msg
-statusView status =
+statusView { account, content, reblog } =
-    case status.reblog of
+    case reblog of
         Just (Mastodon.Reblog reblog) ->
             div [ class "reblog" ]
                 [ p []
-                    [ a [ href status.account.url ] [ text <| "@" ++ status.account.username ]
+                    [ icon "fire"
-                    , text " reblogged"
+                    , a [ href account.url, class "reblogger" ]
+                        [ text <| " " ++ account.username ]
+                    , text " boosted"
                     ]
                 , statusView reblog
                 ]
 
         Nothing ->
             div [ class "status" ]
-                [ img [ class "avatar", src status.account.avatar ] []
+                [ img [ class "avatar", src account.avatar ] []
                 , div [ class "username" ]
-                    [ a [ href status.account.url ] [ text status.account.username ]
+                    [ a [ href account.url ]
+                        [ text account.display_name
+                        , span [ class "acct" ] [ text <| " @" ++ account.username ]
+                        ]
                     ]
-                , div [ class "status-text" ]
+                , div [ class "status-text" ] <| formatContent content
-                    (HtmlParser.parse status.content |> toVirtualDom)
                 ]
 
 
-timelineView : List Mastodon.Status -> String -> Html Msg
+timelineView : List Mastodon.Status -> String -> String -> Html Msg
-timelineView statuses label =
+timelineView statuses label iconName =
     div [ class "col-sm-3" ]
         [ div [ class "panel panel-default" ]
-            [ div [ class "panel-heading" ] [ text label ]
+            [ div [ class "panel-heading" ]
+                [ icon iconName
+                , text label
+                ]
             , ul [ class "list-group" ] <|
                 List.map
                     (\s ->
@@ -76,7 +104,7 @@ draftView { draft } =
     in
         div [ class "col-md-3" ]
             [ div [ class "panel panel-default" ]
-                [ div [ class "panel-heading" ] [ text "Post a message" ]
+                [ div [ class "panel-heading" ] [ icon "envelope", text "Post a message" ]
                 , div [ class "panel-body" ]
                     [ Html.form [ class "form", onSubmit SubmitDraft ]
                         [ div [ class "form-group checkbox" ]
@@ -154,9 +182,9 @@ homepageView : Model -> Html Msg
 homepageView model =
     div [ class "row" ]
         [ draftView model
-        , timelineView model.userTimeline "Home timeline"
+        , timelineView model.userTimeline "Home timeline" "home"
-        , timelineView model.localTimeline "Local timeline"
+        , timelineView model.localTimeline "Local timeline" "th-large"
-        , timelineView model.publicTimeline "Public timeline"
+        , timelineView model.publicTimeline "Public timeline" "globe"
         ]