From aaaedf9ff3472fc7ca801445831b1f21e72477ac Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Thu, 11 Feb 2021 23:59:53 +0100
Subject: [PATCH] debug scrollToBottom

---
 public/index.html          |  2 +-
 src/App.vue                | 15 +++++-----
 src/components/console.vue | 61 ++++++++++++++++++++++----------------
 src/render-commands.js     | 50 +++++++++++++++----------------
 4 files changed, 68 insertions(+), 60 deletions(-)
diff --git a/public/index.html b/public/index.html
index 5843482..53d1869 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=0.8,user-scalable=0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index 1a130c8..4c00ba6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,23 +16,24 @@ export default {
 <style lang="scss">
 body,html{
   margin: 0;
+  height: 100%;
 }
 *{
   scrollbar-width: thin;
   scrollbar-color: #444 #2220;
 }
-*::-webkit-scrollbar {
+*::-webkit-scrollbar{
   width: 0.5rem;
   height: 0.5rem;
 }
-*::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track{
   background: none;
 }
-*::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb{
   background-color: #444;
   border-radius: 0.25rem;
 }
-#app {
+#app{
   font-family: Avenir, Helvetica, Arial, sans-serif;
   position: absolute;
   background-color: #222;
@@ -42,10 +43,8 @@ body,html{
 .console{
   position: absolute;
   width: 36rem;
-  height: calc(100% - 2rem);
-  overflow-y: auto;
-  left: calc(50% - 19rem);
-  padding: 1rem;
+  height: 100%;
+  left: calc(50% - 18rem);
 }
 @media (max-width: 45rem){
   .console{
diff --git a/src/components/console.vue b/src/components/console.vue
index 1246f51..79e7e11 100644
--- a/src/components/console.vue
+++ b/src/components/console.vue
@@ -1,10 +1,12 @@
 <template>
-  <div @click="focusInput()" class="console">
-    <div @keypress.enter="displayCommand()" class="group" v-for="(group, index) in history" :key="group">
-      <pre><span class="host">{{group.host}}</span><span
-          v-if="index !== history.length-1">{{group.command}}</span><input
-          v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre>
-      <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
+  <div @click="focusInput()" class="console" ref="console">
+    <div class="content">
+      <div @keypress.enter="displayCommand();" class="group" v-for="(group, index) in history" :key="group">
+        <pre><span class="host">{{group.host}}</span><span
+            v-if="index !== history.length-1">{{group.command}}</span><input
+            v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre>
+        <pre v-if="group.output.length"><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
+      </div>
     </div>
   </div>
 </template>
@@ -37,17 +39,19 @@ export default {
               command: "",
               output: []
             });
-            this.$forceUpdate()
-            this.focusInput()
+            this.$forceUpdate();
+            this.focusInput();
+            this.scrollToBottom();
           }
-          window.scrollTo(0,document.body.scrollHeight);
+          this.scrollToBottom();
         }, group.delay)
       })
     },
     focusInput(){
-      this.$nextTick(function lol(){
-        this.$refs.consoleInput.focus();
-      })
+      this.$nextTick(() => this.$refs.consoleInput.focus());
+    },
+    scrollToBottom(){
+      this.$nextTick(() => this.$refs.console.scrollTop = this.$refs.console.scrollHeight);
     }
   },
   mounted() {
@@ -63,20 +67,25 @@ export default {
   }
   .console{
     color: #fff;
-    .group{
-      .host{color: #02a594;}
-      .white{color: #fff}
-      .green{color: #44dd88;}
-      .blue{color: #0081b1;}
-      input{
-        background-color: #0000;
-        border: 0;
-        margin: 0;
-        padding: 0;
-        color: #fff;
-        appearance: none;
-        outline: none;
-        font: inherit;
+    overflow-y: auto;
+    .content{
+      height: fit-content;
+      margin: 1rem;
+      .group{
+        .host{color: #02a594;}
+        .white{color: #fff;}
+        .green{color: #44dd88;}
+        .blue{color: #0081b1;}
+        input{
+          background-color: #0000;
+          border: 0;
+          margin: 0;
+          padding: 0;
+          color: #fff;
+          appearance: none;
+          outline: none;
+          font: inherit;
+        }
       }
     }
   }
diff --git a/src/render-commands.js b/src/render-commands.js
index 9aa31d7..0538dd4 100644
--- a/src/render-commands.js
+++ b/src/render-commands.js
@@ -22,13 +22,13 @@ let commands = [
   },
   {
     name: "welcome",
-    output(input){ return[
-      {color: "white", content: "\nWelcome to:\n", delay: 100},
-      {
-        color: "green",
-        content: function(){
-          let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1);
-          return window.innerWidth/fontSize<35?
+    output(input){
+      let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1);
+      return[
+        {color: "white", content: "\nWelcome to:\n", delay: 100},
+        {
+          color: "green",
+          content: window.innerWidth/fontSize<35?
             "            __  \n" +
             "           /\\ \\  \n" +
             "  ____ __  \\_\\ \\____ _____  ____ \n" +
@@ -52,24 +52,24 @@ let commands = [
             "\\ \\____\\ \\____ \\\\____/ \\_\\\\ \\____\\/\\_\\\\ \\__\\\\____/ \\__/\\__/ \\ \\_\\ \\_\\\n" +
             " \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/   \\/_/\\/_/\n" +
             "           /\\___/\n" +
-            "           \\/__/                                             @adb.sh\n\n";
-        }(),
-        delay: 300
-      },
-      input.find(arr => arr === "--help")?{
-        color: "white",
-        content:
-          "free services on this server:\n" +
-          "\n" +
-          "    - Mastodon   > social\n" +
-          "    - Gitea      > git\n" +
-          "    - Matrix     > element\n" +
-          "    - Etherpad   > ether\n" +
-          "    - short url  > surl\n" +
-          "    - Jitsi      > meet\n",
-        delay: 500
-      }:{color: "white", content: "show examples with \"welcome --help\"", delay: 600}
-    ]}
+            "           \\/__/                                             @adb.sh\n\n",
+          delay: 300
+        },
+        input.find(arr => arr === "--help")?{
+          color: "white",
+          content:
+            "free services on this server:\n" +
+            "\n" +
+            "    - Mastodon   > social\n" +
+            "    - Gitea      > git\n" +
+            "    - Matrix     > element\n" +
+            "    - Etherpad   > ether\n" +
+            "    - short url  > surl\n" +
+            "    - Jitsi      > meet\n",
+          delay: 500
+        }:{color: "white", content: "show examples with \"welcome --help\"", delay: 600}
+      ]
+    }
   },
   {
     name: ["ls", "la", "list"],
