flewkey/tooty
1
0
Fork 0
Code Releases Activity

Improve timeline styles. (#17)

Browse Source 
* Improve timeline styles.
* Add icons to column headings.
* Address a few typography issues.
* Handle long links.
* Linewrap attachment links.
This commit is contained in:
Nicolas Perriault 2017-04-21 10:41:46 +02:00 committed by GitHub
parent dc3c860d70
commit 5e6bc42642
2 changed files with 83 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/style.css
View File

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

58
src/View.elm
View File

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