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>
<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>

15
src/App.vue
View File

@ -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{

61
src/components/console.vue
View File

@ -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;
}
}
}
}

50
src/render-commands.js
View File

@ -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"],