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

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

@ -68,35 +68,34 @@ export default {
}, },
watch: { watch: {
async open (value) { open (value) {
// In case it is needed. // In case it is needed.
this.$emit('toggle', value) this.$emit('toggle', value)
if (!value) { if (value) {
// Reset footer padding. // Wait for DOM update and scroll if needed.
this.$emit('height-changed', 0) this.$nextTick().then(this.scrollToLastAction)
} 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()
}
} }
}, },
'lastAction.messages' (a, b) { 'lastAction.messages' () {
if (!this.open) return if (!this.open) return
this.$nextTick(() => { this.$nextTick(this.scrollToLastAction)
document.querySelector('#history > .list-group:last-of-type').scrollIntoView()
})
} }
}, },
computed: mapGetters(['history', 'lastAction']), 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: { filters: {
readableUri (uri) { readableUri (uri) {
return uri.split('?')[0].replace('/', ' > ') return uri.split('?')[0].replace('/', ' > ')

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

@ -16,16 +16,24 @@
// Style overrides happens after dependencies imports // Style overrides happens after dependencies imports
// Bootstrap overrides html {
html, body { min-height: 100vh;
height: 100%;
overflow-x: hidden;
} }
body { body {
overflow-x: hidden;
min-height: 100vh;
margin: 0; margin: 0;
font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif; 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 { .menu-list {
.list-group-item { .list-group-item {
padding: 0.75rem 0; padding: 0.75rem 0;