extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2024-12-13 18:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

kalk_web made sizing more dynamic, added spacing to lines

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
kalk_web/package-lock.json generated
View File

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

4
kalk_web/package.json
View File

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

20
kalk_web/public/index.html
View File

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

13
kalk_web/src/KalkCalculator.svelte
View File

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