Improve rendering of bio fields (#7353)

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

View File

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

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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)) }