diff options
6 files changed, 64 insertions, 30 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index a208f1a8e..7a0a2dfa9 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -37,6 +37,7 @@ export default class Header extends ImmutablePureComponent { } let displayName = account.get('display_name_html'); + let fields = account.get('fields'); let info = ''; let mutingInfo = ''; let actionBtn = ''; @@ -100,30 +101,43 @@ export default class Header extends ImmutablePureComponent { <span className='account__header__username'>@{account.get('acct')} {account.get('locked') ? <i className='fa fa-lock' /> : null}</span> <div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} /> + {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> + )} + + {fields.size == 0 && metadata.length && ( + <table className='account__header__fields'> + <tbody> + {(() => { + let data = []; + for (let i = 0; i < metadata.length; i++) { + data.push( + <tr key={i}> + <th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th> + <td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td> + </tr> + ); + } + return data; + })()} + </tbody> + </table> + ) || null} + {info} {mutingInfo} {actionBtn} </div> </div> - - {metadata.length && ( - <table className='account__metadata'> - <tbody> - {(() => { - let data = []; - for (let i = 0; i < metadata.length; i++) { - data.push( - <tr key={i}> - <th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th> - <td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td> - </tr> - ); - } - return data; - })()} - </tbody> - </table> - ) || null} </div> ); } diff --git a/app/javascript/flavours/glitch/reducers/accounts.js b/app/javascript/flavours/glitch/reducers/accounts.js index 61354f2e1..23fbd999c 100644 --- a/app/javascript/flavours/glitch/reducers/accounts.js +++ b/app/javascript/flavours/glitch/reducers/accounts.js @@ -69,6 +69,14 @@ const normalizeAccount = (state, account) => { account.display_name_html = emojify(escapeTextContentForBrowser(displayName)); account.note_emojified = emojify(account.note); + if (account.fields) { + account.fields = account.fields.map(pair => ({ + ...pair, + name_emojified: emojify(escapeTextContentForBrowser(pair.name)), + value_emojified: emojify(pair.value), + })); + } + if (account.moved) { state = normalizeAccount(state, account.moved); account.moved = account.moved.id; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index d56de19ea..9ca03fc2c 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -1,9 +1,10 @@ -.account__metadata { - width: 100%; +.account__header .account__header__fields { font-size: 15px; line-height: 20px; overflow: hidden; border-collapse: collapse; + margin: 20px -10px -20px; + border-bottom: 0; a { text-decoration: none; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 2bef53cff..0a43f14b7 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -15,6 +15,18 @@ code { overflow: hidden; } + .row { + display: flex; + margin: 0 -5px; + + .input { + box-sizing: border-box; + flex: 1 1 auto; + width: 50%; + padding: 0 5px; + } + } + span.hint { display: block; color: $ui-primary-color; diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss index 484410bef..b66cce3c1 100644 --- a/app/javascript/flavours/glitch/styles/metadata.scss +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -1,4 +1,4 @@ -.metadata { +.account__header__fields { $meta-table-border: lighten($ui-base-color, 8%); border-collapse: collapse; diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index 76f29d591..af79922c2 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -21,20 +21,19 @@ = t 'accounts.roles.moderator' .bio .account__header__content.p-note.emojify!=processed_bio[:text] - - if processed_bio[:metadata].length > 0 - %table.metadata< - - processed_bio[:metadata].each do |i| - %tr.metadata-item>< - %th.emojify>!=i[0] - %td.emojify>!=i[1] - - - unless account.fields.empty? + - if !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) + - elsif processed_bio[:metadata].length > 0 + %table.account__header__fields< + - processed_bio[:metadata].each do |i| + %tr + %th.emojify>!=i[0] + %td.emojify>!=i[1] .details-counters .counter{ class: active_nav_class(short_account_url(account)) } |