Merge pull request #687 from amyspark/amyspark/fix-up-button
Do not position the ⬆️ button behind the sidebar
This commit is contained in:
commit
ca2fb46488
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -41,6 +41,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
account: state => state.TimelineSpace.account,
|
||||
|
@ -200,4 +201,10 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
|
||||
|
@ -257,5 +258,11 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/timeline-transition.scss"></style>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Home.timeline,
|
||||
|
@ -227,6 +228,14 @@ export default {
|
|||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Lists.Show.timeline,
|
||||
|
@ -256,5 +257,11 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/timeline-transition.scss"></style>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Local.timeline,
|
||||
|
@ -227,6 +228,12 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/timeline-transition.scss"></style>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -41,6 +41,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
notifications: state => state.TimelineSpace.Contents.Notifications.notifications,
|
||||
|
@ -218,6 +219,12 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/timeline-transition.scss"></style>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div class="upper" v-show="!heading">
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -43,6 +43,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
timeline: state => state.TimelineSpace.Contents.Public.timeline,
|
||||
|
@ -250,6 +251,12 @@ export default {
|
|||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.upper-with-side-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: -webkit-calc(20px + 320px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/timeline-transition.scss"></style>
|
||||
|
|
Loading…
Reference in New Issue