adb/cybre.town
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

debug scrollToBottom

Browse Source
This commit is contained in:
adb 2021-02-11 23:59:53 +01:00
parent ef9d8eb8b2
commit aaaedf9ff3
4 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>

15
src/App.vue
View File

@ -16,23 +16,24 @@ export default {
<style lang="scss"> <style lang="scss">
body,html{ body,html{
margin: 0; margin: 0;
height: 100%;
} }
*{ *{
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #444 #2220; scrollbar-color: #444 #2220;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar{
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track{
background: none; background: none;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb{
background-color: #444; background-color: #444;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
#app { #app{
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
position: absolute; position: absolute;
background-color: #222; background-color: #222;
@ -42,10 +43,8 @@ body,html{
.console{ .console{
position: absolute; position: absolute;
width: 36rem; width: 36rem;
height: calc(100% - 2rem); height: 100%;
overflow-y: auto; left: calc(50% - 18rem);
left: calc(50% - 19rem);
padding: 1rem;
} }
@media (max-width: 45rem){ @media (max-width: 45rem){
.console{ .console{

29
src/components/console.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div @click="focusInput()" class="console"> <div @click="focusInput()" class="console" ref="console">
<div @keypress.enter="displayCommand()" class="group" v-for="(group, index) in history" :key="group"> <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 <pre><span class="host">{{group.host}}</span><span
v-if="index !== history.length-1">{{group.command}}</span><input v-if="index !== history.length-1">{{group.command}}</span><input
v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre> 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>
</div> </div>
</template> </template>
@ -37,17 +39,19 @@ export default {
command: "", command: "",
output: [] output: []
}); });
this.$forceUpdate() this.$forceUpdate();
this.focusInput() this.focusInput();
this.scrollToBottom();
} }
window.scrollTo(0,document.body.scrollHeight); this.scrollToBottom();
}, group.delay) }, group.delay)
}) })
}, },
focusInput(){ focusInput(){
this.$nextTick(function lol(){ this.$nextTick(() => this.$refs.consoleInput.focus());
this.$refs.consoleInput.focus(); },
}) scrollToBottom(){
this.$nextTick(() => this.$refs.console.scrollTop = this.$refs.console.scrollHeight);
} }
}, },
mounted() { mounted() {
@ -63,9 +67,13 @@ export default {
} }
.console{ .console{
color: #fff; color: #fff;
overflow-y: auto;
.content{
height: fit-content;
margin: 1rem;
.group{ .group{
.host{color: #02a594;} .host{color: #02a594;}
.white{color: #fff} .white{color: #fff;}
.green{color: #44dd88;} .green{color: #44dd88;}
.blue{color: #0081b1;} .blue{color: #0081b1;}
input{ input{
@ -80,4 +88,5 @@ export default {
} }
} }
} }
}
</style> </style>

14
src/render-commands.js
View File

@ -22,13 +22,13 @@ let commands = [
}, },
{ {
name: "welcome", 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: "white", content: "\nWelcome to:\n", delay: 100},
{ {
color: "green", color: "green",
content: function(){ content: window.innerWidth/fontSize<35?
let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1);
return window.innerWidth/fontSize<35?
" __ \n" + " __ \n" +
" /\\ \\ \n" + " /\\ \\ \n" +
" ____ __ \\_\\ \\____ _____ ____ \n" + " ____ __ \\_\\ \\____ _____ ____ \n" +
@ -52,8 +52,7 @@ let commands = [
"\\ \\____\\ \\____ \\\\____/ \\_\\\\ \\____\\/\\_\\\\ \\__\\\\____/ \\__/\\__/ \\ \\_\\ \\_\\\n" + "\\ \\____\\ \\____ \\\\____/ \\_\\\\ \\____\\/\\_\\\\ \\__\\\\____/ \\__/\\__/ \\ \\_\\ \\_\\\n" +
" \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/ \\/_/\\/_/\n" + " \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/ \\/_/\\/_/\n" +
" /\\___/\n" + " /\\___/\n" +
" \\/__/ @adb.sh\n\n"; " \\/__/ @adb.sh\n\n",
}(),
delay: 300 delay: 300
}, },
input.find(arr => arr === "--help")?{ input.find(arr => arr === "--help")?{
@ -69,7 +68,8 @@ let commands = [
" - Jitsi > meet\n", " - Jitsi > meet\n",
delay: 500 delay: 500
}:{color: "white", content: "show examples with \"welcome --help\"", delay: 600} }:{color: "white", content: "show examples with \"welcome --help\"", delay: 600}
]} ]
}
}, },
{ {
name: ["ls", "la", "list"], name: ["ls", "la", "list"],