fnmain/jotdown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

jotdown_wasm: use full viewport

Browse source
This commit is contained in:
Noah Hellman 2023-03-26 16:15:54 +02:00
parent d5803c4a12
commit 122cb84d2d
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/jotdown_wasm/Makefile
View file

@ -12,7 +12,7 @@ index.html: Makefile demo.html
echo '<head>' >> $@ echo '<head>' >> $@
echo '<title>Jotdown Demo</title>' >> $@ echo '<title>Jotdown Demo</title>' >> $@
echo '</head>' >> $@ echo '</head>' >> $@
echo '<body>' >> $@ echo '<body style="display:flex;flex-direction:column;height:100vh;margin:0">' >> $@
cat demo.html >> $@ cat demo.html >> $@
echo '</body>' >> $@ echo '</body>' >> $@
echo '</html>' >> $@ echo '</html>' >> $@

15
examples/jotdown_wasm/demo.html
View file

@ -1,5 +1,4 @@
<select id="fmt"><option value="preview">preview</option><option value="html">html</option></select> <div id="jotdown" style="flex-grow:1;display:flex;flex-direction:column">
<div id="jotdown" style="display:flex;">
<script type="module"> <script type="module">
import init, { jotdown_render } from './pkg/jotdown_wasm.js'; import init, { jotdown_render } from './pkg/jotdown_wasm.js';
await init(); await init();
@ -27,6 +26,14 @@
// auto focus on input on load // auto focus on input on load
setTimeout(() => { input.focus(); }, 0); setTimeout(() => { input.focus(); }, 0);
</script> </script>
<pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;min-height:8em;max-height:20em;resize:none;margin:0">*Hello world!*</pre> <div>
<pre id="output" readonly style="width:50%;height:100%;margin:0;min-height:8em;max-height:20em"></pre> <select id="fmt">
<option value="preview">preview</option>
<option value="html">html</option>
</select>
</div>
<div id="panes" style="display:flex;height:100%;gap:1rem">
<pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;overflow:scroll;resize:none;box-sizing:border-box;margin:0">*Hello world!*</pre>
<pre id="output" readonly style="width:50%;height:100%;overflow:scroll;box-sizing:border-box;margin:0"></pre>
</div>
</div> </div>