Merge pull request #687 from amyspark/amyspark/fix-up-button

Do not position the ⬆️ button behind the sidebar
This commit is contained in:
AkiraFukushima 2018-11-01 21:06:04 +09:00 committed by GitHub
commit ca2fb46488
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 58 additions and 7 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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