diff --git a/example/example.css b/example/example.css index e8fade4..b50f820 100644 --- a/example/example.css +++ b/example/example.css @@ -2,18 +2,52 @@ margin: 0; } +h1 { + font-family: Helvetica, sans-serif; + font-size: 24px; + border-radius: 4px; + border: 1px solid darkgray; + background: #e1e1e1; + padding: 10px; +} + +h2 { + font-family: Helvetica, sans-serif; + font-size: 18px; + border-bottom: 1px solid darkgray; + margin-bottom: 5px; +} + +.description { + font-family: Helvetica, sans-serif; + border-radius: 4px; + border: 1px solid darkgray; + background: #e1e1e1; + padding: 4px 10px; + margin-bottom: 5px; +} + .editors { + position: relative; display: flex; flex-direction: row; flex: 1; + max-width: 100%; } .editor-column { flex: 1; + display: flex; + flex-direction: column; +} + +.editor-column:first-child { + margin-right: 20px; } .editor { height: 500px; border: 1px solid grey; - margin-right: 20px; + flex: 1; + } diff --git a/example/example.js b/example/example.js index 326c417..b756ae7 100644 --- a/example/example.js +++ b/example/example.js @@ -84,4 +84,10 @@ require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabEx target.updateOptions({readOnly: true}); } }); + + + window.addEventListener('resize', () => { + source.layout(); + target.layout(); + }); }); diff --git a/example/index.html b/example/index.html index 6874710..704904b 100644 --- a/example/index.html +++ b/example/index.html @@ -9,12 +9,16 @@ - +

Monaco Editor Collaborative Extensions Demo

-
+

Source Editor

+
Type and make selections here.
+
+

Target Editor

+
See remote cursors and selections here.