diff --git a/public/style.css b/public/style.css index bb45672..322e4d5 100644 --- a/public/style.css +++ b/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-bottom: .5em; + margin-right: .10px; + 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; - line-height: 0; - display: inline-block; - width: 0; + display: none; } diff --git a/src/View.elm b/src/View.elm index cfa51a2..3c07c00 100644 --- a/src/View.elm +++ b/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 = - case status.reblog of +statusView { account, content, reblog } = + case reblog of Just (Mastodon.Reblog reblog) -> div [ class "reblog" ] [ p [] - [ a [ href status.account.url ] [ text <| "@" ++ status.account.username ] - , text " reblogged" + [ icon "fire" + , 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" ] - (HtmlParser.parse status.content |> toVirtualDom) + , div [ class "status-text" ] <| formatContent content ] -timelineView : List Mastodon.Status -> String -> Html Msg -timelineView statuses label = +timelineView : List Mastodon.Status -> String -> String -> Html Msg +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.localTimeline "Local timeline" - , timelineView model.publicTimeline "Public timeline" + , timelineView model.userTimeline "Home timeline" "home" + , timelineView model.localTimeline "Local timeline" "th-large" + , timelineView model.publicTimeline "Public timeline" "globe" ]