kalk_web made sizing more dynamic, added spacing to lines

This commit is contained in:
PaddiM8 2021-01-04 19:29:07 +01:00
parent 93514906f3
commit 6843a0502f
4 changed files with 30 additions and 13 deletions

View File

@ -1060,9 +1060,9 @@
}
},
"@paddim8/kalk": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@paddim8/kalk/-/kalk-1.4.1.tgz",
"integrity": "sha512-jbMqRo3o1FfBXQskD0Zb9l5qeeb44JiBbfgy4lAxbV4OItTDJ9xuLNJ4V5O2JJyJMeeu5FKBoYFzM2dwBIJ69g=="
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/@paddim8/kalk/-/kalk-1.4.2.tgz",
"integrity": "sha512-HAWcL2dzOr5KY1/tXoHmMXkjvFuxwWXrljPyUkYtyzlQUKeeKbQkH0B7t9N0sAMw+n+9zw4nxiavPp7DbcKaNw=="
},
"@types/anymatch": {
"version": "1.3.1",

View File

@ -55,9 +55,9 @@
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@paddim8/kalk": "^1.4.1"
"@paddim8/kalk": "^1.4.2"
},
"browserslist": [
"defaults"
]
}
}

View File

@ -11,20 +11,30 @@
<script defer src="/build/bundle.js"></script>
<style>
#wrapper {
padding: 40px;
background-color: #212121;
}
.calculator {
width: 800px;
height: 350px;
width: 600px;
height: 200px;
font-family: "Hack", monospace, Consolas;
font-size: 14px;
padding: 5px 10px 0 10px;
background-color: #424242;
border-radius: 7px;
}
</style>
</head>
<body>
<noscript>Please enable JavaScript to view this application.</noscript>
<div class="calculator">
<kalk-calculator />
</div>
<section id="wrapper">
<div class="calculator">
<kalk-calculator />
</div>
</section>
</body>
</html>

View File

@ -216,14 +216,17 @@
<style lang="scss">
.calculator {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.output {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
background-color: inherit;
padding: 10px;
padding-bottom: 0;
@ -238,10 +241,14 @@
.consoleLine {
margin-top: 0;
margin-bottom: 0;
margin-bottom: 5px;
word-wrap: break-word;
}
.result {
margin-bottom: 10px;
}
.input-area {
background-color: inherit;
display: flex;
@ -275,7 +282,7 @@
<span style="color: {hintColor}">Type 'help' for instructions.</span>
</p>
{#each outputLines as line}
<p class="consoleLine">
<p class="consoleLine" class:result={!line[1]}>
{#if line[1]}
<span style="color: {promptColor}">&gt;&gt;</span>
{/if}