From bb71538bb503159177d46d8956bd466973c0876b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 28 Jul 2018 19:25:33 +0200 Subject: Redesign public profiles and toots (#8068) --- app/views/accounts/_bio.html.haml | 15 +++++ app/views/accounts/_follow_button.html.haml | 28 -------- app/views/accounts/_follow_grid.html.haml | 8 --- app/views/accounts/_follow_grid_hidden.html.haml | 3 - app/views/accounts/_grid_card.html.haml | 12 ---- app/views/accounts/_header.html.haml | 82 +++++++++++------------- app/views/accounts/_moved.html.haml | 18 ++++++ app/views/accounts/_moved_strip.html.haml | 17 ----- app/views/accounts/_nothing_here.html.haml | 1 - app/views/accounts/show.html.haml | 69 ++++++++++---------- 10 files changed, 106 insertions(+), 147 deletions(-) create mode 100644 app/views/accounts/_bio.html.haml delete mode 100644 app/views/accounts/_follow_button.html.haml delete mode 100644 app/views/accounts/_follow_grid.html.haml delete mode 100644 app/views/accounts/_follow_grid_hidden.html.haml delete mode 100644 app/views/accounts/_grid_card.html.haml create mode 100644 app/views/accounts/_moved.html.haml delete mode 100644 app/views/accounts/_moved_strip.html.haml delete mode 100644 app/views/accounts/_nothing_here.html.haml (limited to 'app/views/accounts') diff --git a/app/views/accounts/_bio.html.haml b/app/views/accounts/_bio.html.haml new file mode 100644 index 000000000..c9a4d8f1b --- /dev/null +++ b/app/views/accounts/_bio.html.haml @@ -0,0 +1,15 @@ +.public-account-bio + - unless account.fields.empty? + .account__header__fields + - account.fields.each do |field| + %dl + %dt.emojify{ title: field.name }= field.name + %dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value, custom_emojify: true) + + = account_badge(account) + + - if account.note.present? + .account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) + + .public-account-bio__extra + = t 'accounts.joined', date: l(account.created_at, format: :month) diff --git a/app/views/accounts/_follow_button.html.haml b/app/views/accounts/_follow_button.html.haml deleted file mode 100644 index 558ced010..000000000 --- a/app/views/accounts/_follow_button.html.haml +++ /dev/null @@ -1,28 +0,0 @@ -- relationships ||= nil - -- unless account.memorial? || account.moved? - - if user_signed_in? - - requested = relationships ? relationships.requested[account.id].present? : current_account.requested?(account) - - following = relationships ? relationships.following[account.id].present? : current_account.following?(account) - - - if user_signed_in? && current_account.id != account.id && !requested - .controls - - if following - = link_to (account.local? ? account_unfollow_path(account) : remote_unfollow_path(acct: account.acct)), data: { method: :post }, class: 'icon-button' do - = fa_icon 'user-times' - = t('accounts.unfollow') - - else - = link_to (account.local? ? account_follow_path(account) : authorize_follow_path(acct: account.acct)), data: { method: :post }, class: 'icon-button' do - = fa_icon 'user-plus' - = t('accounts.follow') - - elsif user_signed_in? && current_account.id == account.id - .controls - = link_to settings_profile_url, class: 'icon-button' do - = fa_icon 'pencil' - = t('settings.edit_profile') - - elsif !user_signed_in? - .controls - .remote-follow - = link_to (account.local? ? account_remote_follow_path(account) : "web+mastodon://follow?uri=#{account.uri}"), class: 'icon-button' do - = fa_icon 'user-plus' - = t('accounts.remote_follow') diff --git a/app/views/accounts/_follow_grid.html.haml b/app/views/accounts/_follow_grid.html.haml deleted file mode 100644 index fdcef84be..000000000 --- a/app/views/accounts/_follow_grid.html.haml +++ /dev/null @@ -1,8 +0,0 @@ -.accounts-grid{ class: accounts.empty? ? 'empty' : '' } - - if accounts.empty? - = image_tag asset_pack_path('elephant_ui_greeting.svg'), alt: '', role: 'presentational' - = render partial: 'accounts/nothing_here' - - else - = render partial: 'accounts/grid_card', collection: accounts, as: :account, cached: !user_signed_in? - -= paginate follows diff --git a/app/views/accounts/_follow_grid_hidden.html.haml b/app/views/accounts/_follow_grid_hidden.html.haml deleted file mode 100644 index e970350e6..000000000 --- a/app/views/accounts/_follow_grid_hidden.html.haml +++ /dev/null @@ -1,3 +0,0 @@ -.accounts-grid.empty - = image_tag asset_pack_path('elephant_ui_greeting.svg'), alt: '', role: 'presentational' - %p.nothing-here= t('accounts.network_hidden') diff --git a/app/views/accounts/_grid_card.html.haml b/app/views/accounts/_grid_card.html.haml deleted file mode 100644 index a59ed128e..000000000 --- a/app/views/accounts/_grid_card.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -.account-grid-card - .account-grid-card__header{ style: "background-image: url(#{account.header.url(:original)})" } - = render 'accounts/follow_button', account: account, relationships: @relationships - .account-grid-card__avatar - .avatar= image_tag account.avatar.url(:original) - .name - = link_to TagManager.instance.url_for(account) do - %span.display_name.emojify= display_name(account, custom_emojify: true) - %span.username - @#{account.local? ? account.local_username_and_domain : account.acct} - = fa_icon('lock') if account.locked? - .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account) diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index 4098d6778..e343be820 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -1,51 +1,43 @@ -.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" } - .card__illustration - = render 'accounts/follow_button', account: account - .avatar= image_tag account.avatar.url(:original), class: 'u-photo' +.public-account-header + .public-account-header__image + = image_tag account.header.url, class: 'parallax' + .public-account-header__bar + = link_to short_account_url(account), class: 'avatar' do + = image_tag account.avatar.url + .public-account-header__tabs + .public-account-header__tabs__name + %h1 + = display_name(account) + %small + = acct(account) + = fa_icon('lock') if account.locked? + .public-account-header__tabs__tabs + .details-counters + .counter{ class: active_nav_class(short_account_url(account)) } + = link_to short_account_url(account), class: 'u-url u-uid' do + %span.counter-number= number_to_human account.statuses_count, strip_insignificant_zeros: true + %span.counter-label= t('accounts.posts') - .card__bio - %h1.name - %span.p-name.emojify= display_name(account, custom_emojify: true) - %small< - %span>< @#{account.local_username_and_domain} - = fa_icon('lock') if account.locked? + .counter{ class: active_nav_class(account_following_index_url(account)) } + = link_to account_following_index_url(account) do + %span.counter-number= number_to_human account.following_count, strip_insignificant_zeros: true + %span.counter-label= t('accounts.following') - - if account.bot? - .roles - .account-role.bot - = t 'accounts.roles.bot' - - elsif Setting.show_staff_badge - - if account.user_admin? - .roles - .account-role.admin - = t 'accounts.roles.admin' - - elsif account.user_moderator? - .roles - .account-role.moderator - = t 'accounts.roles.moderator' + .counter{ class: active_nav_class(account_followers_url(account)) } + = link_to account_followers_url(account) do + %span.counter-number= number_to_human account.followers_count, strip_insignificant_zeros: true + %span.counter-label= t('accounts.followers') + .spacer + .public-account-header__tabs__tabs__buttons + = account_action_button(account) - .bio - .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) + .public-account-header__extra + = render 'accounts/bio', account: account - - unless account.fields.empty? - .account__header__fields - - account.fields.each do |field| - %dl - %dt.emojify{ title: field.name }= field.name - %dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value, custom_emojify: true) - - .details-counters - .counter{ class: active_nav_class(short_account_url(account)) } - = link_to short_account_url(account), class: 'u-url u-uid' do - %span.counter-number= number_to_human account.statuses_count, strip_insignificant_zeros: true - %span.counter-label= t('accounts.posts') - - .counter{ class: active_nav_class(account_following_index_url(account)) } + .public-account-header__extra__links = link_to account_following_index_url(account) do - %span.counter-number= number_to_human account.following_count, strip_insignificant_zeros: true - %span.counter-label= t('accounts.following') - - .counter{ class: active_nav_class(account_followers_url(account)) } + %strong= number_to_human account.following_count, strip_insignificant_zeros: true + = t('accounts.following') = link_to account_followers_url(account) do - %span.counter-number= number_to_human account.followers_count, strip_insignificant_zeros: true - %span.counter-label= t('accounts.followers') + %strong= number_to_human account.followers_count, strip_insignificant_zeros: true + = t('accounts.followers') diff --git a/app/views/accounts/_moved.html.haml b/app/views/accounts/_moved.html.haml new file mode 100644 index 000000000..f99328dbd --- /dev/null +++ b/app/views/accounts/_moved.html.haml @@ -0,0 +1,18 @@ +- moved_to_account = account.moved_to_account + +.moved-account-widget + .moved-account-widget__message + = fa_icon 'suitcase' + = t('accounts.moved_html', name: content_tag(:bdi, content_tag(:strong, display_name(account, custom_emojify: true), class: :emojify)), new_profile_link: link_to(content_tag(:strong, safe_join(['@', content_tag(:span, moved_to_account.acct)])), TagManager.instance.url_for(moved_to_account), class: 'mention')) + + .moved-account-widget__card + = link_to TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'noopener' do + .detailed-status__display-avatar + .account__avatar-overlay + .account__avatar-overlay-base{ style: "background-image: url('#{moved_to_account.avatar.url(:original)}')" } + .account__avatar-overlay-overlay{ style: "background-image: url('#{account.avatar.url(:original)}')" } + + %span.display-name + %bdi + %strong.emojify= display_name(moved_to_account, custom_emojify: true) + %span @#{moved_to_account.acct} diff --git a/app/views/accounts/_moved_strip.html.haml b/app/views/accounts/_moved_strip.html.haml deleted file mode 100644 index ae18c6dc7..000000000 --- a/app/views/accounts/_moved_strip.html.haml +++ /dev/null @@ -1,17 +0,0 @@ -- moved_to_account = account.moved_to_account - -.moved-strip - .moved-strip__message - = fa_icon 'suitcase' - = t('accounts.moved_html', name: content_tag(:strong, display_name(account, custom_emojify: true), class: :emojify), new_profile_link: link_to(content_tag(:strong, safe_join(['@', content_tag(:span, moved_to_account.acct)])), TagManager.instance.url_for(moved_to_account), class: 'mention')) - - .moved-strip__card - = link_to TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'noopener' do - .detailed-status__display-avatar - .account__avatar-overlay - .account__avatar-overlay-base{ style: "background-image: url('#{moved_to_account.avatar.url(:original)}')" } - .account__avatar-overlay-overlay{ style: "background-image: url('#{account.avatar.url(:original)}')" } - - %span.display-name - %strong.emojify= display_name(moved_to_account, custom_emojify: true) - %span @#{moved_to_account.acct} diff --git a/app/views/accounts/_nothing_here.html.haml b/app/views/accounts/_nothing_here.html.haml deleted file mode 100644 index 0c6dc1168..000000000 --- a/app/views/accounts/_nothing_here.html.haml +++ /dev/null @@ -1 +0,0 @@ -%p.nothing-here= t('accounts.nothing_here') diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml index cfdd3a945..b30755d94 100644 --- a/app/views/accounts/show.html.haml +++ b/app/views/accounts/show.html.haml @@ -20,36 +20,39 @@ = opengraph 'og:type', 'profile' = render 'og', account: @account, url: short_account_url(@account, only_path: false) -- if @account.memorial? - .memoriam-strip= t('in_memoriam_html') -- elsif @account.moved? - = render partial: 'moved_strip', locals: { account: @account } -- elsif show_landing_strip? - = render partial: 'shared/landing_strip', locals: { account: @account } - -.h-feed - %data.p-name{ value: "#{@account.username} on #{site_hostname}" }/ - - = render 'header', account: @account - - .activity-stream-tabs - = active_link_to t('accounts.posts'), short_account_url(@account) - = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account) - = active_link_to t('accounts.media'), short_account_media_url(@account) - - - if @statuses.empty? - .accounts-grid - = render 'nothing_here' - - else - .activity-stream.with-header - - if params[:page].to_i.zero? - = render partial: 'stream_entries/status', collection: @pinned_statuses, as: :status, locals: { pinned: true } - - = render partial: 'stream_entries/status', collection: @statuses, as: :status - - - if @newer_url || @older_url - .pagination - - if @older_url - = link_to safe_join([fa_icon('chevron-left'), t('pagination.older')], ' '), @older_url, class: 'older', rel: 'next' - - if @newer_url - = link_to safe_join([t('pagination.newer'), fa_icon('chevron-right')], ' '), @newer_url, class: 'newer', rel: 'prev' + += render 'header', account: @account, with_bio: true + +.grid + .column-0 + .h-feed + %data.p-name{ value: "#{@account.username} on #{site_hostname}" }/ + + .account__section-headline + = active_link_to t('accounts.posts'), short_account_url(@account) + = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account) + = active_link_to t('accounts.media'), short_account_media_url(@account) + + - if @statuses.empty? + = nothing_here 'nothing-here--under-tabs' + - else + .activity-stream + - if params[:page].to_i.zero? + = render partial: 'stream_entries/status', collection: @pinned_statuses, as: :status, locals: { pinned: true } + + - if @newer_url + .entry= link_to_more @newer_url + + = render partial: 'stream_entries/status', collection: @statuses, as: :status + + - if @older_url + .entry= link_to_more @older_url + + .column-1 + - if @account.memorial? + .memoriam-widget= t('in_memoriam_html') + - elsif @account.moved? + = render 'moved', account: @account + + = render 'bio', account: @account + = render 'application/sidebar' -- cgit