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

debug scrollToBottom

Browse Source
master
adb 3 years ago
parent ef9d8eb8b2
commit aaaedf9ff3
4 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape 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
Unescape 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{

61
src/components/console.vue
Unescape 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">
<pre><span class="host">{{group.host}}</span><span <div @keypress.enter="displayCommand();" class="group" v-for="(group, index) in history" :key="group">
v-if="index !== history.length-1">{{group.command}}</span><input <pre><span class="host">{{group.host}}</span><span
v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre> v-if="index !== history.length-1">{{group.command}}</span><input
<pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre> 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>
</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,20 +67,25 @@ export default {
} }
.console{ .console{
color: #fff; color: #fff;
.group{ overflow-y: auto;
.host{color: #02a594;} .content{
.white{color: #fff} height: fit-content;
.green{color: #44dd88;} margin: 1rem;
.blue{color: #0081b1;} .group{
input{ .host{color: #02a594;}
background-color: #0000; .white{color: #fff;}
border: 0; .green{color: #44dd88;}
margin: 0; .blue{color: #0081b1;}
padding: 0; input{
color: #fff; background-color: #0000;
appearance: none; border: 0;
outline: none; margin: 0;
font: inherit; padding: 0;
color: #fff;
appearance: none;
outline: none;
font: inherit;
}
} }
} }
} }

50
src/render-commands.js
Unescape View File

@ -22,13 +22,13 @@ let commands = [
}, },
{ {
name: "welcome", name: "welcome",
output(input){ return[ output(input){
{color: "white", content: "\nWelcome to:\n", delay: 100}, let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1);
{ return[
color: "green", {color: "white", content: "\nWelcome to:\n", delay: 100},
content: function(){ {
let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px", 1); color: "green",
return window.innerWidth/fontSize<35? content: window.innerWidth/fontSize<35?
" __ \n" + " __ \n" +
" /\\ \\ \n" + " /\\ \\ \n" +
" ____ __ \\_\\ \\____ _____ ____ \n" + " ____ __ \\_\\ \\____ _____ ____ \n" +
@ -52,24 +52,24 @@ 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")?{ color: "white",
color: "white", content:
content: "free services on this server:\n" +
"free services on this server:\n" + "\n" +
"\n" + " - Mastodon > social\n" +
" - Mastodon > social\n" + " - Gitea > git\n" +
" - Gitea > git\n" + " - Matrix > element\n" +
" - Matrix > element\n" + " - Etherpad > ether\n" +
" - Etherpad > ether\n" + " - short url > surl\n" +
" - short url > surl\n" + " - 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"],

Write Preview
Loading…
Cancel
Save