pinafore/routes/_components/profile/AccountProfile.html

94 lines
3.5 KiB
HTML

<h1 class="sr-only">Profile for {accountName}</h1>
<div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
style="background-image: url({headerImage});">
<div class="account-profile-grid-wrapper">
<div class="account-profile-grid">
<AccountProfileHeader {account} {relationship} {verifyCredentials} />
<AccountProfileFollow {account} {relationship} {verifyCredentials} />
<AccountProfileNote {account} />
<AccountProfileMeta {account} />
<AccountProfileDetails {account} {relationship} {verifyCredentials} />
</div>
</div>
</div>
<style>
.account-profile {
position: relative;
background-size: cover;
background-position: center;
padding-top: 175px;
}
.account-profile.header-image-is-missing {
padding-top: 0;
background-color: #ccc;
}
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name label followed-by follow"
"avatar username username username follow"
"avatar note note note follow"
"meta meta meta meta meta"
"details details details details details";
grid-template-columns: min-content auto 1fr 1fr min-content;
grid-column-gap: 10px;
grid-row-gap: 5px;
padding: 20px;
justify-content: center;
}
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
:global(.account-profile-grid-wrapper) {
-webkit-backdrop-filter: blur(7px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%);
background-color: var(--account-profile-bg-backdrop-filter);
}
}
@supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
:global(.account-profile-grid-wrapper) {
background-color: var(--account-profile-bg);
}
}
@media (max-width: 767px) {
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name follow"
"avatar label follow"
"avatar username follow"
"avatar followed-by follow"
"note note note"
"meta meta meta"
"details details details";
grid-template-columns: min-content minmax(auto, 1fr) min-content;
grid-template-rows: min-content min-content 1fr min-content;
padding: 10px;
}
}
</style>
<script>
import AccountProfileHeader from './AccountProfileHeader.html'
import AccountProfileFollow from './AccountProfileFollow.html'
import AccountProfileNote from './AccountProfileNote.html'
import AccountProfileMeta from './AccountProfileMeta.html'
import AccountProfileDetails from './AccountProfileDetails.html'
import { store } from '../../_store/store'
export default {
store: () => store,
computed: {
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
accountName: ({ account }) => (account && (account.display_name || account.username)) || ''
},
components: {
AccountProfileHeader,
AccountProfileFollow,
AccountProfileNote,
AccountProfileMeta,
AccountProfileDetails
}
}
</script>