YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

fixed scrollBehavior and root element positionning

Browse source
This commit is contained in:
Axolotle 2020-10-13 15:26:31 +02:00
parent 6a46132fd7
commit da1442d375
3 changed files with 33 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/src/App.vue
View file

@ -45,10 +45,10 @@
</api-wait-overlay>
<!-- CONSOLE/HISTORY -->
<ynh-console @height-changed="consoleHeight = $event" class="mt-auto" />
<ynh-console />
<!-- FOOTER -->
<footer :style="'padding-bottom: ' + consoleHeight + 'px;'">
<footer class="py-3 mt-auto">
<nav>
<b-nav class="justify-content-center">
<b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes="text-secondary">
@ -93,9 +93,7 @@ export default {
data () {
return {
transitionName: null,
// Value used to add padding to the footer so the opened console never hides content
consoleHeight: 0
transitionName: null
}
},
@ -144,13 +142,7 @@ export default {
</style>
<style lang="scss" scoped>
::v-deep#app {
display: flex;
flex-direction: column;
height: 100%;
}
// generic style for <html>, <body> and <#app> is in `scss/main.scss`
header {
border-bottom: $thin-border;
padding-top: 1rem;
@ -209,11 +201,6 @@ footer {
border-top: 1px solid #eee;
font-size: $font-size-sm;
margin-top: 2rem;
padding-bottom: 3rem;
.nav {
padding: 1rem 0 3rem 0;
}
.nav-item {
& + .nav-item a::before {

35
app/src/components/YnhConsole.vue
View file

@ -68,35 +68,34 @@ export default {
},
watch: {
async open (value) {
open (value) {
// In case it is needed.
this.$emit('toggle', value)
if (!value) {
// Reset footer padding.
this.$emit('height-changed', 0)
} else {
// Wait for DOM update.
await this.$nextTick()
// Send history's elem height so the footer can update its padding.
this.$emit('height-changed', this.$refs.history.clientHeight)
// Scroll to the last action.
const lastActionItem = document.querySelector('#history > .list-group:last-of-type')
if (lastActionItem) {
lastActionItem.scrollIntoView()
}
if (value) {
// Wait for DOM update and scroll if needed.
this.$nextTick().then(this.scrollToLastAction)
}
},
'lastAction.messages' (a, b) {
'lastAction.messages' () {
if (!this.open) return
this.$nextTick(() => {
document.querySelector('#history > .list-group:last-of-type').scrollIntoView()
})
this.$nextTick(this.scrollToLastAction)
}
},
computed: mapGetters(['history', 'lastAction']),
methods: {
scrollToLastAction () {
const historyElem = this.$refs.history
const lastActionGroup = historyElem.lastElementChild
if (lastActionGroup) {
const lastItem = lastActionGroup.lastElementChild || lastActionGroup
historyElem.scrollTop = lastItem.offsetTop
}
}
},
filters: {
readableUri (uri) {
return uri.split('?')[0].replace('/', ' > ')

16
app/src/scss/main.scss
View file

@ -16,16 +16,24 @@
// Style overrides happens after dependencies imports
// Bootstrap overrides
html, body {
height: 100%;
overflow-x: hidden;
html {
min-height: 100vh;
}
body {
overflow-x: hidden;
min-height: 100vh;
margin: 0;
font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
}
#app {
display: flex;
flex-direction: column;
min-height: 100vh
}
// Bootstrap overrides
.menu-list {
.list-group-item {
padding: 0.75rem 0;