Skip to content

Commit

Permalink
feat: better account detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@vjousse
vjousse committed Jun 21, 2024
1 parent 601d599 commit 1f48660
Show file tree
Hide file tree
Showing 11 changed files with 222 additions and 81 deletions.
108 changes: 87 additions & 21 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -677,24 +677,8 @@ input.form-control[type="file"] {
}

/* Account rules */
.account-detail {
position: relative;
text-align: center;
}

.account-detail .opacity-layer {
background: rgba(49, 53, 67, 0.9);
}

.account-detail img {
border-radius: 90px;
padding: 20px;
display: block;
margin: 0 auto 0;
}

.account-detail .btn {
position: absolute;
top: 10px;
right: 10px;
width: 42px;
Expand All @@ -712,17 +696,36 @@ input.form-control[type="file"] {

.account-detail .account-display-name {
display: block;
font-size: 130%;
font-size: 140%;
font-weight: bold;
color: #fff;

display: flex;
}

.account-detail .account-username {
display: block;
.account-detail .account-display-name .relationship {
flex-grow: 1;
text-align: right;
padding-right: 20px;
}

.account-detail .account-note {
display: block;
padding: 5px 15px 15px 15px;
padding: 5px 20px 5px 0px;
color: #fff;
}

.account-detail .account-fields {
padding: 10px 10px 10px 10px;
color: #fff;
background-color: #62686d;
border-radius: 5px;
margin-right: 20px;
margin-bottom: 20px;
}

.account-detail .account-fields .check-mark {
margin-left: 10px;
}

.account-infos {
Expand All @@ -731,7 +734,8 @@ input.form-control[type="file"] {
}

.account-infos.row {
margin-right: 0;
margin: 0;
padding: 0;
}

.account-infos a {
Expand All @@ -744,6 +748,68 @@ input.form-control[type="file"] {
color: #fff;
}

.account-infos .count {
font-weight: 700;
}

.account-infos .btn {
border-radius: 0;
border-bottom: none;
}

.account-detail img.avatar-detailed {
display: block;
width: 90px;
border-radius: 5px;
border: 2px solid #d9e1e8;
padding: 0;
}

.account-detail .account-header-image {
position: relative;
}

.account-detail .account-header-image img {
border-radius: 0;
margin: 0;
padding: 0;
height: 200px;
width: 100%;
object-fit: cover;
}

.account-detail .account-header-image.missing-header {
height: 80px;
background: rgba(49, 53, 67, 0.9);
}

.account-detail .account-header-bar {
margin-top: -40px;
padding: 0 20px;
position: relative;
display: flex;
}

.account-detail .account-header-actions {
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: flex-end;
gap: 5px;
}

.account-detail .account-header-content {
padding-left: 20px;
padding-top: 20px;
position: relative;
}

.account-detail .account-username .joined-date {
color: #a0a0a0;
margin-left: 10px;
font-style: italic;
}

.followed-by {
margin-left: 5px;
}
Expand Down
1 change: 0 additions & 1 deletion src/Update/Mastodon.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ module Update.Mastodon exposing (update)
import Browser.Navigation as Navigation
import Command
import InfiniteScroll
import Mastodon.ApiUrl exposing (customEmojis)
import Mastodon.Helper exposing (extractStatusId)
import Mastodon.Model exposing (..)
import Types exposing (..)
Expand Down
127 changes: 88 additions & 39 deletions src/View/Account.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ followButton currentUser relationship account =
followView : CurrentUser -> Maybe Relationship -> Account -> Html Msg
followView currentUser relationship account =
div [ class "follow-entry" ]
[ Common.accountAvatarLink False account
[ Common.accountAvatarLink False Nothing account
, div [ class "userinfo" ]
[ strong []
[ a
Expand Down Expand Up @@ -207,18 +207,15 @@ counterLink href_ label count active =
a
[ href href_
, class <|
"col-md-4"
"btn col-md-4"
++ (if active then
" active"
" btn-default"

else
""
)
]
[ text label
, br [] []
, text <| String.fromInt count
]
[ span [ class "count" ] [ text <| String.fromInt count ], text " ", text label ]


counterLinks : CurrentAccountView -> Account -> Html Msg
Expand Down Expand Up @@ -259,42 +256,94 @@ accountView subView currentUser accountInfo =
, div [ id "account", class "timeline" ]
[ div
[ class "account-detail"
, style "background-image" ("url('" ++ account.header ++ "')")

--, style "background-image" ("url('" ++ account.header ++ "')")
]
[ div [ class "opacity-layer" ]
[ followButton currentUser accountInfo.relationship account
, muteButton currentUser accountInfo.relationship account
, blockButton currentUser accountInfo.relationship account
, Common.accountAvatarLink True account
, span [ class "account-display-name" ] (getDisplayNameForAccount account)
, span [ class "account-username" ]
[ div
[ class
("account-header-image"
-- It looks like mastodon always returns a header image even if none was setup
-- and it's called missing.png
++ (if String.contains "missing.png" account.header then
" missing-header"

else
""
)
)
]
[ img [ src account.header ] [] ]
, div [ class "account-header-bar" ]
[ Common.accountAvatarLink True (Just [ "avatar-detailed" ]) account
, div [ class "account-header-actions" ]
[ followButton currentUser accountInfo.relationship account
, muteButton currentUser accountInfo.relationship account
, blockButton currentUser accountInfo.relationship account
]
]
, div [ class "account-header-content" ]
[ div [ class "account-display-name" ]
[ div [] (getDisplayNameForAccount account)
, div [ class "relationship" ]
[ case accountInfo.relationship of
Just relationship ->
span []
[ if relationship.followed_by && relationship.following then
span [ class "badge followed-by" ] [ text "Following each other" ]

else if relationship.followed_by then
span [ class "badge followed-by" ] [ text "Follows you" ]

else if relationship.following then
span [ class "badge followed-by" ] [ text "Following" ]

else
text ""
, text " "
, if relationship.muting then
span [ class "badge muting" ] [ text "Muted" ]

else
text ""
, text " "
, if relationship.blocking then
span [ class "badge blocking" ] [ text "Blocked" ]

else
text ""
]

Nothing ->
text ""
]
]
, div [ class "account-username" ]
[ Common.accountLink True account
, case accountInfo.relationship of
Just relationship ->
span []
[ if relationship.followed_by then
span [ class "badge followed-by" ] [ text "Follows you" ]

else
text ""
, text " "
, if relationship.muting then
span [ class "badge muting" ] [ text "Muted" ]

else
text ""
, text " "
, if relationship.blocking then
span [ class "badge blocking" ] [ text "Blocked" ]

else
text ""
]

Nothing ->
text ""
, span [ class "joined-date" ] [ text "joined on ", text <| Common.formatDate account.created_at ]
]
, span [ class "account-note" ] (formatContentWithEmojis account.note [] account.emojis)
, if List.isEmpty account.fields then
text ""

else
div [ class "account-fields" ]
(List.map
(\field ->
div []
(formatContentWithEmojis (String.toUpper field.name) [] account.emojis
++ text " | "
:: formatContentWithEmojis field.value [] account.emojis
++ (case field.verified_at of
Just verified_at ->
[ span [ class "check-mark", title ("Verified at " ++ Common.formatDate verified_at) ] [ Common.icon "ok" ] ]

Nothing ->
[ text "" ]
)
)
)
account.fields
)
]
]
, counterLinks subView account
Expand Down
2 changes: 1 addition & 1 deletion src/View/AccountSelector.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ accountIdentityView currentUser client =
( False, "" )
in
li [ class <| "list-group-item account-selector-item " ++ entryClass ]
[ accountAvatar "" account
[ accountAvatar [ "" ] account
, span []
[ strong []
(if account.display_name /= "" then
Expand Down
2 changes: 1 addition & 1 deletion src/View/Blocks.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ blockView currentUser account =
in
li [ class <| "list-group-item status " ++ entryClass ]
[ div [ class "follow-entry" ]
[ Common.accountAvatarLink False account
[ Common.accountAvatarLink False Nothing account
, div [ class "userinfo" ]
[ strong []
[ a
Expand Down
Loading

0 comments on commit 1f48660

Please sign in to comment.