pinafore/routes/_components/profile/AccountProfile.html

92 lines
3.4 KiB
HTML
Raw Normal View History

<div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
style="background-image: url({headerImage});">
2018-04-01 01:51:18 +02:00
<div class="account-profile-grid-wrapper">
<div class="account-profile-grid">
<AccountProfileHeader {account} {relationship} {verifyCredentials} />
<AccountProfileFollow {account} {relationship} {verifyCredentials} />
<AccountProfileNote {account} />
2018-08-21 04:41:42 +02:00
<AccountProfileMeta {account} />
<AccountProfileDetails {account} {relationship} {verifyCredentials} />
2018-04-01 01:51:18 +02:00
</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;
2018-08-24 03:41:43 +02:00
grid-template-areas: "avatar name label followed-by follow"
"avatar username username username follow"
"avatar note note note follow"
2018-08-21 04:41:42 +02:00
"meta meta meta meta meta"
2018-08-24 03:41:43 +02:00
"details details details details details";
grid-template-columns: min-content auto 1fr 1fr min-content;
2018-04-01 01:51:18 +02:00
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%);
2018-04-12 04:53:43 +02:00
background-color: var(--account-profile-bg-backdrop-filter);
2018-04-01 01:51:18 +02:00
}
}
@supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
:global(.account-profile-grid-wrapper) {
2018-04-12 04:53:43 +02:00
background-color: var(--account-profile-bg);
2018-04-01 01:51:18 +02:00
}
}
@media (max-width: 767px) {
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name follow"
2018-08-24 03:41:43 +02:00
"avatar label follow"
2018-04-01 01:51:18 +02:00
"avatar username follow"
"avatar followed-by follow"
"note note note"
2018-08-21 04:41:42 +02:00
"meta meta meta"
2018-04-01 01:51:18 +02:00
"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'
2018-08-21 04:41:42 +02:00
import AccountProfileMeta from './AccountProfileMeta.html'
2018-04-01 01:51:18 +02:00
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
2018-04-01 01:51:18 +02:00
},
components: {
AccountProfileHeader,
AccountProfileFollow,
AccountProfileNote,
2018-08-21 04:41:42 +02:00
AccountProfileMeta,
2018-04-01 01:51:18 +02:00
AccountProfileDetails
}
}
</script>