From 73be8f38c115c279e3d3961b98bd2b82b9706b05 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 6 Dec 2018 17:36:11 +0100 Subject: Add profile directory (#9427) Fix #5578 --- app/javascript/styles/mastodon/accounts.scss | 5 + app/javascript/styles/mastodon/widgets.scss | 165 +++++++++++++++++++++++++++ 2 files changed, 170 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 06effbdb2..63a5c61b8 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -189,6 +189,11 @@ &--under-tabs { border-radius: 0 0 4px 4px; } + + &--flexible { + box-sizing: border-box; + min-height: 100%; + } } .account-role { diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index f843f0b42..a838ca778 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -240,3 +240,168 @@ border-radius: 0; } } + +.page-header { + background: lighten($ui-base-color, 8%); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + padding: 60px 15px; + text-align: center; + margin: 10px 0; + + h1 { + color: $primary-text-color; + font-size: 36px; + line-height: 1.1; + font-weight: 700; + margin-bottom: 10px; + } + + p { + font-size: 15px; + color: $darker-text-color; + } +} + +.directory { + background: $ui-base-color; + border-radius: 0 0 4px 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + + &__tag { + box-sizing: border-box; + margin-bottom: 10px; + + a { + display: flex; + align-items: center; + justify-content: space-between; + background: $ui-base-color; + border-radius: 4px; + padding: 15px; + text-decoration: none; + color: inherit; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + + &:hover, + &:active, + &:focus { + background: lighten($ui-base-color, 8%); + } + } + + &.active a { + background: $ui-highlight-color; + cursor: default; + } + + h4 { + flex: 1 1 auto; + font-size: 18px; + font-weight: 700; + color: $primary-text-color; + + .fa { + color: $darker-text-color; + } + + small { + display: block; + font-weight: 400; + font-size: 15px; + margin-top: 8px; + color: $darker-text-color; + } + } + + &.active h4 { + &, + .fa, + small { + color: $primary-text-color; + } + } + + .avatar-stack { + flex: 0 0 auto; + width: (36px + 4px) * 3; + } + + &.active .avatar-stack .account__avatar { + border-color: $ui-highlight-color; + } + } +} + +.avatar-stack { + display: flex; + justify-content: flex-end; + + .account__avatar { + flex: 0 0 auto; + width: 36px; + height: 36px; + border-radius: 50%; + position: relative; + margin-left: -10px; + border: 2px solid $ui-base-color; + + &:nth-child(1) { + z-index: 1; + } + + &:nth-child(2) { + z-index: 2; + } + + &:nth-child(3) { + z-index: 3; + } + } +} + +.accounts-table { + width: 100%; + + .account { + padding: 0; + border: 0; + } + + thead th { + text-align: center; + text-transform: uppercase; + color: $darker-text-color; + font-weight: 700; + padding: 10px; + + &:first-child { + text-align: left; + } + } + + tbody td { + padding: 15px 0; + vertical-align: middle; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + + tbody tr:last-child td { + border-bottom: 0; + } + + &__count { + width: 120px; + text-align: center; + font-size: 15px; + font-weight: 500; + color: $primary-text-color; + + small { + display: block; + color: $darker-text-color; + font-weight: 400; + font-size: 14px; + } + } +} -- cgit From ecd303c097bf20aa971628ba8420a9f17f3dd1f7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 7 Dec 2018 16:37:32 +0100 Subject: Fix various things in the directory (#9449) * Fix missing variable in directory page title * Order hashtags by number of people instead of alphabetically * Add icon to OpenGraph preview of directory page * Prevent line breaks in hashtags and ensure lowercase in the table --- app/javascript/styles/mastodon/widgets.scss | 3 +++ app/models/tag.rb | 2 +- app/views/directories/index.html.haml | 10 ++++++---- 3 files changed, 10 insertions(+), 5 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index a838ca778..c863e3b4f 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -300,6 +300,9 @@ font-size: 18px; font-weight: 700; color: $primary-text-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; .fa { color: $darker-text-color; diff --git a/app/models/tag.rb b/app/models/tag.rb index b28e2cc18..41e58e3ca 100644 --- a/app/models/tag.rb +++ b/app/models/tag.rb @@ -20,7 +20,7 @@ class Tag < ApplicationRecord validates :name, presence: true, uniqueness: true, format: { with: /\A#{HASHTAG_NAME_RE}\z/i } - scope :discoverable, -> { joins(:account_tag_stat).where(AccountTagStat.arel_table[:accounts_count].gt(0)).where(account_tag_stats: { hidden: false }).order(name: :asc) } + scope :discoverable, -> { joins(:account_tag_stat).where(AccountTagStat.arel_table[:accounts_count].gt(0)).where(account_tag_stats: { hidden: false }).order('account_tag_stats.accounts_count desc') } scope :hidden, -> { where(account_tag_stats: { hidden: true }) } delegate :accounts_count, diff --git a/app/views/directories/index.html.haml b/app/views/directories/index.html.haml index 7cd6b50d4..219950a51 100644 --- a/app/views/directories/index.html.haml +++ b/app/views/directories/index.html.haml @@ -1,12 +1,14 @@ - content_for :page_title do - = t('directories.explore_mastodon') + = t('directories.explore_mastodon', title: site_title) - content_for :header_tags do %meta{ name: 'description', content: t('directories.explanation') } - = opengraph 'og:site_name', site_title + = opengraph 'og:site_name', t('about.hosted_on', domain: site_hostname) + = opengraph 'og:type', 'website' = opengraph 'og:title', t('directories.explore_mastodon', title: site_title) = opengraph 'og:description', t('directories.explanation') + = opengraph 'og:image', File.join(root_url, 'android-chrome-192x192.png') .page-header %h1= t('directories.explore_mastodon', title: site_title) @@ -29,10 +31,10 @@ %td= account_link_to account %td.accounts-table__count = number_to_human account.statuses_count, strip_insignificant_zeros: true - %small= t('accounts.posts', count: account.statuses_count) + %small= t('accounts.posts', count: account.statuses_count).downcase %td.accounts-table__count = number_to_human account.followers_count, strip_insignificant_zeros: true - %small= t('accounts.followers', count: account.followers_count) + %small= t('accounts.followers', count: account.followers_count).downcase %td.accounts-table__count - if account.last_status_at.present? %time.time-ago{ datetime: account.last_status_at.iso8601, title: l(account.last_status_at) }= l account.last_status_at -- cgit From 4638b1682247df52ab5b22d06cd2a3df3277b2f9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Dec 2018 00:40:11 +0100 Subject: Make notification time smaller and reduce contrast (#9464) --- app/javascript/styles/mastodon/components.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b2e9bd1df..c880e99a9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -876,7 +876,8 @@ } } -.status__relative-time { +.status__relative-time, +.notification__relative_time { color: $dark-text-color; float: right; font-size: 14px; -- cgit