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:
Shpuld Shpludson 2019-02-12 15:25:18 +00:00
commit 6d8862dc9a
3 changed files with 13 additions and 6 deletions

View file

@ -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})`

View file

@ -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;
} }

View file

@ -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>