Miroirs/waforth
1
0
Fork 0
mirror of https://github.com/remko/waforth synced 2024-12-27 09:59:29 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

thurtle: Style tweaks

Browse source
This commit is contained in:
Remko Tronçon 2022-05-21 11:03:40 +02:00
parent cce720ea73
commit f4484be2ef
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/web/thurtle/thurtle.css
View file

@ -30,10 +30,16 @@
} }
.output { .output {
font-size: 0.8em; font-size: 0.75em;
overflow: auto; overflow: auto;
min-height: calc(
100vh - 438px
); /* hack because i can't figure out how to auto scale this */
max-height: calc( max-height: calc(
100vh - 450px 100vh - 438px
); /* hack because i can't figure out how to auto scale this */
height: calc(
100vh - 438px
); /* hack because i can't figure out how to auto scale this */ ); /* hack because i can't figure out how to auto scale this */
} }

11
src/web/thurtle/thurtle.tsx
View file

@ -85,7 +85,7 @@ const rootEl = (
<div class="main d-flex flex-column p-2"> <div class="main d-flex flex-column p-2">
<div class="d-flex flex-row flex-grow-1"> <div class="d-flex flex-row flex-grow-1">
<div class="left-pane d-flex flex-column"> <div class="left-pane d-flex flex-column">
<div class="d-flex flex-row flex-wrap flex-md-nowrap py-2"> <div class="d-flex flex-row flex-wrap flex-md-nowrap pb-2">
<select class="form-select" data-hook="examples"></select> <select class="form-select" data-hook="examples"></select>
<div class="ms-auto me-auto ms-md-2 me-md-0 mt-1 mt-md-0"> <div class="ms-auto me-auto ms-md-2 me-md-0 mt-1 mt-md-0">
<div class="btn-group w-xs-100"> <div class="btn-group w-xs-100">
@ -184,7 +184,7 @@ const rootEl = (
</div> </div>
{editor.el} {editor.el}
</div> </div>
<div class="d-flex flex-column ms-3 right-pane"> <div class="d-flex flex-column ms-2 right-pane">
<svg <svg
class="world" class="world"
viewBox="-500 -500 1000 1000" viewBox="-500 -500 1000 1000"
@ -207,9 +207,12 @@ const rootEl = (
/> />
</svg> </svg>
<form> <form>
<div class="form-group mt-3"> <div class="form-group mt-2">
<label>Output</label> <label>Output</label>
<pre class="mb-0 output" data-hook="output"></pre> <pre
class="mb-0 border rounded px-2 py-1 output"
data-hook="output"
></pre>
</div> </div>
</form> </form>
</div> </div>