initial profile overhaul
This commit is contained in:
parent
38130fce90
commit
79868aeeb9
11 changed files with 470 additions and 409 deletions
|
|
@ -7,16 +7,13 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
|||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import List from '../list/list.vue'
|
||||
import withLoadMore from '../../hocs/with_load_more/with_load_more'
|
||||
import localeService from 'src/services/locale/locale.service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faCircleNotch,
|
||||
faBirthdayCake
|
||||
faCircleNotch
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch,
|
||||
faBirthdayCake
|
||||
faCircleNotch
|
||||
)
|
||||
|
||||
const FollowerList = withLoadMore({
|
||||
|
|
@ -82,10 +79,6 @@ const UserProfile = {
|
|||
},
|
||||
favoritesTabVisible () {
|
||||
return this.isUs || (this.$store.state.instance.pleromaPublicFavouritesAvailable && !this.user.hide_favorites)
|
||||
},
|
||||
formattedBirthday () {
|
||||
const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
|
||||
return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -13,45 +13,6 @@
|
|||
rounded="top"
|
||||
:has-note-editor="true"
|
||||
/>
|
||||
<span
|
||||
v-if="!!user.birthday"
|
||||
class="user-birthday"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-old-padding"
|
||||
icon="birthday-cake"
|
||||
/>
|
||||
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="user.fields_html && user.fields_html.length > 0"
|
||||
class="user-profile-fields"
|
||||
>
|
||||
<dl
|
||||
v-for="(field, index) in user.fields_html"
|
||||
:key="index"
|
||||
class="user-profile-field"
|
||||
>
|
||||
<dt
|
||||
:title="user.fields_text[index].name"
|
||||
class="user-profile-field-name"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dt>
|
||||
<dd
|
||||
:title="user.fields_text[index].value"
|
||||
class="user-profile-field-value"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.value"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<tab-switcher
|
||||
:active-tab="tab"
|
||||
|
|
@ -173,58 +134,6 @@
|
|||
// No sticky header on user profile
|
||||
--currentPanelStack: 0;
|
||||
|
||||
.user-birthday {
|
||||
margin: 0 0.75em 0.5em;
|
||||
}
|
||||
|
||||
.user-profile-fields {
|
||||
margin: 0 0.5em;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
|
||||
&.emoji {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-field {
|
||||
display: flex;
|
||||
margin: 0.25em;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
.user-profile-field-name {
|
||||
flex: 0 1 30%;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
color: var(--lightText);
|
||||
min-width: 120px;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.user-profile-field-value {
|
||||
flex: 1 1 70%;
|
||||
color: var(--text);
|
||||
margin: 0 0 0 0.25em;
|
||||
}
|
||||
|
||||
.user-profile-field-name,
|
||||
.user-profile-field-value {
|
||||
line-height: 1.3;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userlist-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue