92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
<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
|
|
},
|
|
components: {
|
|
AccountProfileHeader,
|
|
AccountProfileFollow,
|
|
AccountProfileNote,
|
|
AccountProfileMeta,
|
|
AccountProfileDetails
|
|
}
|
|
}
|
|
</script> |