mirrors/tower-lsp-web-demo
1
0
Fork 0
mirror of https://github.com/silvanshade/tower-lsp-web-demo.git synced 2025-01-22 11:47:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust layout

Browse source
This commit is contained in:
silvanshade 2022-06-15 11:30:04 -06:00
parent 66c1a7ea7d
commit 5ee6764633
No known key found for this signature in database
2 changed files with 24 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/app/assets/index.html
View file

@ -14,7 +14,7 @@
<h1 id="title">browser-hosted editor and language server</h1>
<p id="synopsis">
This app demos an editor with language smarts (for JavaScript) by hosting the <a
href="https://microsoft.github.io/monaco-editor/">Monaco</a> editor widget with a simple <a
href="https://microsoft.github.io/monaco-editor/">Monaco</a> widget with an <a
href="https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/">LSP</a>
server implemented via <a href="https://github.com/ebkalderon/tower-lsp">tower-lsp</a> and <a
href="https://github.com/tree-sitter/tree-sitter">tree-sitter</a>. Everything is compiled to WASM and run
@ -22,7 +22,8 @@
code. (Monaco itself does use web workers, however).
</p>
<p id="features">
features: ⇧⌘O (macos) or ⇧⌃O (windows) opens the symbol view; the <strong>syntax</strong> area shows the JavaScript syntax tree (green for valid; red for errors) parsed from the text <strong>editor</strong> area
<strong>features</strong>: ⇧⌘O (macos) or ⇧⌃O (windows) opens symbol view; the <strong>syntax</strong> area shows
the JavaScript syntax tree (green for valid; red for errors) parsed from <strong>editor</strong>
</p>
<div id="cell-editor">
<label for="editor">editor</label>
@ -34,15 +35,15 @@
</div>
<div id="cell-console">
<label for="channel-console">console</label>
<textarea id="channel-console" autocomplete="off" spellcheck="off" wrap="off" readonly></textarea>
<textarea id="channel-console" autocomplete="off" spellcheck="off" wrap="off" readonly rows="3"></textarea>
</div>
<div id="cell-client">
<label for="channel-client">message trace (client ⇒ server)</label>
<textarea id="channel-client" autocomplete="off" spellcheck="off" wrap="off" readonly></textarea>
<textarea id="channel-client" autocomplete="off" spellcheck="off" wrap="off" readonly rows="4"></textarea>
</div>
<div id="cell-server">
<label for="channel-server">message trace (client ⇐ server)</label>
<textarea id="channel-server" autocomplete="off" spellcheck="off" wrap="off" readonly></textarea>
<textarea id="channel-server" autocomplete="off" spellcheck="off" wrap="off" readonly rows="4"></textarea>
</div>
</div>
</body>

41
packages/app/assets/index.module.css
View file

@ -17,12 +17,9 @@ div[id=container] {
display: grid;
height: 90%;
width: 75%;
grid-template-rows: auto auto auto repeat(5, minmax(0, 1fr));
grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2em;
margin: auto;
margin-top: 0;
padding: 0;
}
h1[id=title] {
@ -30,8 +27,6 @@ h1[id=title] {
grid-row: 1;
font-family: monospace;
font-size: 2em;
margin-bottom: 0;
padding: 0;
}
p[id=synopsis] {
@ -39,11 +34,9 @@ p[id=synopsis] {
grid-column: 1 / 3;
grid-row: 2;
font-family: sans-serif;
font-style: italic;
font-size: 11pt;
font-size: 10pt;
line-height: 1.5em;
margin: 0;
padding: 0;
}
p[id=features] {
@ -52,26 +45,29 @@ p[id=features] {
grid-row: 3;
font-family: sans-serif;
font-style: italic;
font-size: 11pt;
font-size: 10pt;
line-height: 1.5em;
margin: 0;
padding: 0;
text-align: center;
}
div[id=cell-editor] {
grid-column: 1 / 2;
grid-row: 4 / 6;
grid-row: 4;
}
[id=cell-editor] div[id=editor] {
border: 1px solid black;
height: 100%;
overflow: auto;
height: calc(100% - 1px);
padding-right: 1.5em;
}
div[id=cell-syntax] {
grid-column: 2 / 3;
grid-row: 4 / 6;
grid-row: 4;
}
div[id=cell-syntax] textarea {
height: 100%;
}
[id=container] label {
@ -82,25 +78,24 @@ div[id=cell-syntax] {
div[id=cell-console] {
grid-column: 1 / 3;
grid-row: 6;
grid-row: 5;
margin-top: 2em;
}
div[id=cell-client] {
grid-column: 1 / 3;
grid-row: 7;
grid-row: 6;
}
div[id=cell-server] {
grid-column: 1 / 3;
grid-row: 8;
grid-row: 7;
}
div[id=container] textarea {
display: block;
margin: 0;
padding: 0;
box-sizing: borcder-box;
height: 100%;
box-sizing: border-box;
width: 100%;
resize: none;
overflow: hidden;
}