heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

upd: add banner as backgrund blur on profiles

Browse source
This commit is contained in:
Mar0xy 2023-09-27 02:10:55 +02:00
parent c056e9f624
commit 0ea1b20fbd
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/frontend/src/pages/user/home.vue
View file

@ -165,6 +165,7 @@ import MkOmit from '@/components/MkOmit.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { getScrollPosition } from '@/scripts/scroll.js'; import { getScrollPosition } from '@/scripts/scroll.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { getUserMenu } from '@/scripts/get-user-menu.js'; import { getUserMenu } from '@/scripts/get-user-menu.js';
import number from '@/filters/number.js'; import number from '@/filters/number.js';
import { userPage } from '@/filters/user.js'; import { userPage } from '@/filters/user.js';
@ -177,6 +178,7 @@ import { confetti } from '@/scripts/confetti.js';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import { api } from '@/os.js'; import { api } from '@/os.js';
import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js'; import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { defaultStore } from '@/store.js';
function calcAge(birthdate: string): number { function calcAge(birthdate: string): number {
const date = new Date(birthdate); const date = new Date(birthdate);
@ -254,6 +256,9 @@ const style = $computed(() => {
if (props.user.bannerUrl == null) return {}; if (props.user.bannerUrl == null) return {};
return { return {
backgroundImage: `url(${ props.user.bannerUrl })`, backgroundImage: `url(${ props.user.bannerUrl })`,
'--backgroundImageStatic': defaultStore.state.useBlurEffect && props.user.bannerUrl
? `url('${getStaticImageUrl(props.user.bannerUrl,)}')`
: null,
}; };
}); });
@ -366,6 +371,16 @@ onUnmounted(() => {
background-position: center; background-position: center;
box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
will-change: background-position; will-change: background-position;
&::before {
content: "";
position: fixed;
inset: 0;
background: var(--backgroundImageStatic);
background-size: cover;
background-position: center;
pointer-events: none;
filter: blur(12px) opacity(0.1);
}
} }
> .fade { > .fade {
@ -713,6 +728,13 @@ onUnmounted(() => {
margin: calc(var(--margin) / 2) 0; margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0; padding: calc(var(--margin) / 2) 0;
background: var(--bg); background: var(--bg);
border-radius: 8px;
> button {
border-radius: 8px;
max-width: 200px;
margin-left: 9px;
}
} }
.verifiedLink { .verifiedLink {