debug scrollToBottom

4 years ago · aaaedf9ff3
parent ef9d8eb8b2
commit aaaedf9ff3
4 changed files with 68 additions and 60 deletions
--- 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>
--- 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{
--- 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">
+  <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><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></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,9 +67,13 @@ export default {
  }
  .console{
    color: #fff;
+    overflow-y: auto;
+    .content{
+      height: fit-content;
+      margin: 1rem;
      .group{
        .host{color: #02a594;}
-      .white{color: #fff}
+        .white{color: #fff;}
        .green{color: #44dd88;}
        .blue{color: #0081b1;}
        input{
@ -80,4 +88,5 @@ export default {
        }
      }
    }
+  }
 </style>
--- a/src/render-commands.js
+++ b/src/render-commands.js
@ -22,13 +22,13 @@ let commands = [
  },
  {
    name: "welcome",
-    output(input){ return[
+    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: function(){
-          let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1);
-          return window.innerWidth/fontSize<35?
+          content: window.innerWidth/fontSize<35?
            "            __  \n" +
            "           /\\ \\  \n" +
            "  ____ __  \\_\\ \\____ _____  ____ \n" +
@ -52,8 +52,7 @@ let commands = [
            "\\ \\____\\ \\____ \\\\____/ \\_\\\\ \\____\\/\\_\\\\ \\__\\\\____/ \\__/\\__/ \\ \\_\\ \\_\\\n" +
            " \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/   \\/_/\\/_/\n" +
            "           /\\___/\n" +
-            "           \\/__/                                             @adb.sh\n\n";
-        }(),
+            "           \\/__/                                             @adb.sh\n\n",
          delay: 300
        },
        input.find(arr => arr === "--help")?{
@ -69,7 +68,8 @@ let commands = [
            "    - Jitsi      > meet\n",
          delay: 500
        }:{color: "white", content: "show examples with \"welcome --help\"", delay: 600}
-    ]}
+      ]
+    }
  },
  {
    name: ["ls", "la", "list"],