Merge branch '300-fixed-background-issue' into 'develop'
Fix fixed background issue Closes #300 See merge request pleroma/pleroma-fe!518
This commit is contained in:
commit
6d8862dc9a
3 changed files with 13 additions and 6 deletions
|
@ -66,7 +66,7 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
logo () { return this.$store.state.instance.logo },
|
logo () { return this.$store.state.instance.logo },
|
||||||
style () {
|
bgStyle () {
|
||||||
return {
|
return {
|
||||||
'--body-background-image': `url(${this.background})`,
|
'--body-background-image': `url(${this.background})`,
|
||||||
'background-image': `url(${this.background})`
|
'background-image': `url(${this.background})`
|
||||||
|
|
14
src/App.scss
14
src/App.scss
|
@ -1,15 +1,21 @@
|
||||||
@import './_variables.scss';
|
@import './_variables.scss';
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
background-size: cover;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 0 50px;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-bg-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app" v-bind:style="style">
|
<div id="app">
|
||||||
|
<div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
|
||||||
<nav class='nav-bar container' @click="scrollToTop()" id="nav">
|
<nav class='nav-bar container' @click="scrollToTop()" id="nav">
|
||||||
<div class='logo' :style='logoBgStyle'>
|
<div class='logo' :style='logoBgStyle'>
|
||||||
<div class='mask' :style='logoMaskStyle'></div>
|
<div class='mask' :style='logoMaskStyle'></div>
|
||||||
|
|
Loading…
Reference in a new issue