From da1442d375c6ce18c8f847902d53f019158e2a33 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Oct 2020 15:26:31 +0200
Subject: [PATCH] fixed scrollBehavior and root element positionning

---
 app/src/App.vue                   | 21 ++++---------------
 app/src/components/YnhConsole.vue | 35 +++++++++++++++----------------
 app/src/scss/main.scss            | 16 ++++++++++----
 3 files changed, 33 insertions(+), 39 deletions(-)
diff --git a/app/src/App.vue b/app/src/App.vue
index fc78e34e..30c9e947 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -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 {
diff --git a/app/src/components/YnhConsole.vue b/app/src/components/YnhConsole.vue
index e1285963..5f690516 100644
--- a/app/src/components/YnhConsole.vue
+++ b/app/src/components/YnhConsole.vue
@@ -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('/', ' > ')
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 198e2fc3..719dedf8 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -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;
