extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-02-23 03:50:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improved kalk_web style by removing the border and putting commands on the bottom

Browse Source
This commit is contained in:
PaddiM8 2021-01-02 02:20:23 +01:00
parent dd67fa8f9a
commit bd2992e16f
2 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
kalk_web/public/global.css
View File

@ -1,7 +1,17 @@
body {
margin: 0;
padding: 0;
background-color: #212121;
}
span.identifier {
color: cornflowerblue;
}
span.operator {
color: darkorange;
}
span.prompt {
color: mediumseagreen;
}

47
kalk_web/src/Calculator.svelte
View File

@ -1,6 +1,4 @@
<script lang="ts">
import { SvelteComponent } from "svelte";
let outputLines: string[] = [];
function handleKeyDown(event: KeyboardEvent) {
if (event.key == "Enter") {
@ -98,15 +96,19 @@
<style>
.calculator {
width: 400px;
height: 800px;
width: 600px;
height: 350px;
}
.calculator .output {
.output {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
background-color: #424242;
padding: 10px;
padding-bottom: 0;
box-sizing: border-box;
font-size: 1.4em;
font-family: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
@ -115,16 +117,26 @@
.consoleLine {
margin-top: 0;
margin-bottom: 3px;
margin-bottom: 0;
}
.calculator .input {
width: 100%;
.input-area {
background-color: #424242;
border: 0;
border-top: 1px solid gray;
display: flex;
padding-left: 10px;
font-size: 1.4em;
padding-bottom: 10px;
}
.prompt,
.input {
background-color: #424242;
font-family: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
}
.input {
display: inline-block;
width: 100%;
color: white;
}
</style>
@ -133,13 +145,18 @@
<div class="output">
{#each outputLines as line}
<p class="consoleLine">
<span class="prompt">&gt;&gt;</span>
{@html highlight(line)}
</p>
{/each}
</div>
<div
contenteditable="true"
class="input"
on:keydown={handleKeyDown}
on:input={handleInput} />
<div class="input-area">
<span class="prompt">&gt;&gt;&nbsp;</span>
<div
contenteditable="true"
class="input"
on:keydown={handleKeyDown}
on:input={handleInput}
role="textbox" />
</div>
</div>