extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-06-25 12:11:39 +02: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,3 +1,9 @@
body {
margin: 0;
padding: 0;
background-color: #212121;
}
span.identifier { span.identifier {
color: cornflowerblue; color: cornflowerblue;
} }
@ -5,3 +11,7 @@ span.identifier {
span.operator { span.operator {
color: darkorange; color: darkorange;
} }
span.prompt {
color: mediumseagreen;
}

47
kalk_web/src/Calculator.svelte
View File

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