asonix/mastodon
1
1
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Improve rendering of bio fields (#7353)

Browse source 
Fix #7335
This commit is contained in:
Eugen Rochko 2018-05-05 00:55:09 +02:00 committed by GitHub
parent 66359ec522
commit 2ef9d65052
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/mastodon/features/account/components/header.js
View file

@ -142,16 +142,14 @@ export default class Header extends ImmutablePureComponent {
<div className='account__header__content' dangerouslySetInnerHTML={content} /> <div className='account__header__content' dangerouslySetInnerHTML={content} />
{fields.size > 0 && ( {fields.size > 0 && (
<table className='account__header__fields'> <div className='account__header__fields'>
<tbody> {fields.map((pair, i) => (
{fields.map((pair, i) => ( <dl key={i}>
<tr key={i}> <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
<th dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} /> <dd dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} title={pair.get('value')} />
<td dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> </dl>
</tr> ))}
))} </div>
</tbody>
</table>
)} )}
{info} {info}

44
app/javascript/styles/mastodon/accounts.scss
View file

@ -565,36 +565,41 @@
} }
.account__header__fields { .account__header__fields {
border-collapse: collapse;
padding: 0; padding: 0;
margin: 15px -15px -15px; margin: 15px -15px -15px;
border: 0 none; border: 0 none;
border-top: 1px solid lighten($ui-base-color, 4%); border-top: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%);
font-size: 14px;
line-height: 20px;
th, dl {
td { display: flex;
padding: 15px;
padding-left: 15px;
border: 0 none;
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%);
vertical-align: middle;
} }
th { dt,
padding-left: 15px; dd {
font-weight: 500; box-sizing: border-box;
padding: 14px;
text-align: center; 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; color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5); background: rgba(darken($ui-base-color, 8%), 0.5);
} }
td { dd {
flex: 1 1 auto;
color: $darker-text-color; color: $darker-text-color;
text-align: center;
width: 100%;
padding-left: 0;
} }
a { a {
@ -608,12 +613,7 @@
} }
} }
tr { dl:last-child {
&:last-child { border-bottom: 0;
th,
td {
border-bottom: 0;
}
}
} }
} }

23
app/javascript/styles/mastodon/components.scss
View file

@ -5163,34 +5163,35 @@ noscript {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
border-collapse: collapse;
margin: 20px -10px -20px; margin: 20px -10px -20px;
border-bottom: 0; border-bottom: 0;
tr { dl {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
text-align: center; display: flex;
} }
th, dt,
td { dd {
box-sizing: border-box;
padding: 14px 20px; padding: 14px 20px;
vertical-align: middle; text-align: center;
max-height: 40px; max-height: 48px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
th { dt {
color: $darker-text-color; color: $darker-text-color;
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
max-width: 120px; width: 120px;
flex: 0 0 auto;
font-weight: 500; font-weight: 500;
} }
td { dd {
flex: auto; flex: 1 1 auto;
color: $primary-text-color; color: $primary-text-color;
background: $ui-base-color; background: $ui-base-color;
} }

11
app/views/accounts/_header.html.haml
View file

@ -24,12 +24,11 @@
.account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true)
- unless account.fields.empty? - unless account.fields.empty?
%table.account__header__fields .account__header__fields
%tbody - account.fields.each do |field|
- account.fields.each do |field| %dl
%tr %dt.emojify{ title: field.name }= field.name
%th.emojify= field.name %dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value)
%td.emojify= Formatter.instance.format_field(account, field.value)
.details-counters .details-counters
.counter{ class: active_nav_class(short_account_url(account)) } .counter{ class: active_nav_class(short_account_url(account)) }