From 2ef9d650520f95e0b1b4b292bce7b80b9967f146 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 5 May 2018 00:55:09 +0200 Subject: [PATCH] Improve rendering of bio fields (#7353) Fix #7335 --- .../features/account/components/header.js | 18 ++++---- app/javascript/styles/mastodon/accounts.scss | 44 +++++++++---------- .../styles/mastodon/components.scss | 23 +++++----- app/views/accounts/_header.html.haml | 11 +++-- 4 files changed, 47 insertions(+), 49 deletions(-) diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index bbf886dca8..def6257956 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -142,16 +142,14 @@ export default class Header extends ImmutablePureComponent {
{fields.size > 0 && ( - - - {fields.map((pair, i) => ( - - - ))} - -
- -
+
+ {fields.map((pair, i) => ( +
+
+
+
+ ))} +
)} {info} diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index c2d0de4b99..b063ca52dd 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -565,36 +565,41 @@ } .account__header__fields { - border-collapse: collapse; padding: 0; margin: 15px -15px -15px; border: 0 none; border-top: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%); + font-size: 14px; + line-height: 20px; - th, - td { - padding: 15px; - padding-left: 15px; - border: 0 none; + dl { + display: flex; border-bottom: 1px solid lighten($ui-base-color, 4%); - vertical-align: middle; } - th { - padding-left: 15px; - font-weight: 500; + dt, + dd { + box-sizing: border-box; + padding: 14px; text-align: center; - width: 94px; + max-height: 48px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + dt { + font-weight: 500; + width: 120px; + flex: 0 0 auto; color: $secondary-text-color; background: rgba(darken($ui-base-color, 8%), 0.5); } - td { + dd { + flex: 1 1 auto; color: $darker-text-color; - text-align: center; - width: 100%; - padding-left: 0; } a { @@ -608,12 +613,7 @@ } } - tr { - &:last-child { - th, - td { - border-bottom: 0; - } - } + dl:last-child { + border-bottom: 0; } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f1284b3884..7cf6f4b769 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5163,34 +5163,35 @@ noscript { font-size: 14px; line-height: 20px; overflow: hidden; - border-collapse: collapse; margin: 20px -10px -20px; border-bottom: 0; - tr { + dl { border-top: 1px solid lighten($ui-base-color, 8%); - text-align: center; + display: flex; } - th, - td { + dt, + dd { + box-sizing: border-box; padding: 14px 20px; - vertical-align: middle; - max-height: 40px; + text-align: center; + max-height: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - th { + dt { color: $darker-text-color; background: darken($ui-base-color, 4%); - max-width: 120px; + width: 120px; + flex: 0 0 auto; font-weight: 500; } - td { - flex: auto; + dd { + flex: 1 1 auto; color: $primary-text-color; background: $ui-base-color; } diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index f246f53262..41315f0393 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -24,12 +24,11 @@ .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) - unless account.fields.empty? - %table.account__header__fields - %tbody - - account.fields.each do |field| - %tr - %th.emojify= field.name - %td.emojify= Formatter.instance.format_field(account, field.value) + .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) .details-counters .counter{ class: active_nav_class(short_account_url(account)) }