diff --git a/static/styles.css b/static/styles.css index b94a0866b1d2667d04b0e22320a3825d055dd9ac..e4fd9e419f228d97bce4c489894a9c2e59ad58e8 100644 --- a/static/styles.css +++ b/static/styles.css @@ -7,7 +7,7 @@ #breadcrumb { display: flex; align-items: center; - padding: 8px; + padding-bottom: 8px; } #breadcrumb a { @@ -55,6 +55,7 @@ main { } #statement-submission { + overflow: auto; display: flex; flex: 1; } @@ -65,6 +66,7 @@ main { #editor { flex: 1; + margin-top: 0; } #contest-header { @@ -151,8 +153,8 @@ form > button { } #logout-form { - display: inline; - padding: 0; + display: inline; + padding: 0; } header { @@ -407,20 +409,20 @@ table a { } #modal { - /* Underlay covers entire screen. */ - position: fixed; - top:0px; - bottom: 0px; - left:0px; - right:0px; - background-color:rgba(0,0,0,0.5); - z-index:1000; - - /* Flexbox centers the .modal-content vertically and horizontally */ - display:flex; - flex-direction:column; - align-items:center; - justify-content: center; + /* Underlay covers entire screen. */ + position: fixed; + top:0px; + bottom: 0px; + left:0px; + right:0px; + background-color:rgba(0,0,0,0.5); + z-index:1000; + + /* Flexbox centers the .modal-content vertically and horizontally */ + display:flex; + flex-direction:column; + align-items:center; + justify-content: center; } .modal-content { @@ -447,59 +449,62 @@ textarea { } #modal > .modal-underlay { - /* underlay takes up the entire viewport. This is only - required if you want to click to dismiss the popup */ - position: absolute; - z-index: -1; - top:0px; - bottom:0px; - left: 0px; - right: 0px; + position: absolute; + z-index: -1; + top:0px; + bottom:0px; + left: 0px; + right: 0px; } #modal > .modal-content { - /* Sizing for visible dialog */ - width:80%; - max-width:600px; + /* Sizing for visible dialog */ + width:80%; + max-width:600px; - /* Display properties for visible dialog*/ - border:solid 1px #999; - border-radius:8px; - box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); - background-color:white; - padding:20px; + /* Display properties for visible dialog*/ + border:solid 1px #999; + border-radius:8px; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); + background-color:white; + padding:20px; } .gg-user { - display: block; - transform: scale(var(--ggs,1)); - box-sizing: border-box; - width: 12px; - height: 18px + display: block; + transform: scale(var(--ggs,1)); + box-sizing: border-box; + width: 12px; + height: 18px } .gg-user::after, .gg-user::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - border: 2px solid + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border: 2px solid } .gg-user::before { - width: 8px; - height: 8px; - border-radius: 30px; - top: 0; - left: 2px + width: 8px; + height: 8px; + border-radius: 30px; + top: 0; + left: 2px } .gg-user::after { - width: 12px; - height: 9px; - border-bottom: 0; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - top: 9px -} + width: 12px; + height: 9px; + border-bottom: 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + top: 9px +} + + +textarea #source-text { + overflow: hidden; +} diff --git a/templates/monaco.hbs b/templates/monaco.hbs index e89930c141f9458d96044b34284afe0bb12ea56f..8b2f8006fa757e6ba0fd647c9e9434005782c0b4 100644 --- a/templates/monaco.hbs +++ b/templates/monaco.hbs @@ -14,8 +14,8 @@ value="{{ this.value }}" <label>Código-fonte</label> <div id="editor" style="border: 1px solid grey"></div> -<textarea id="source_text" name="source_text" style="display: none"></textarea> -<input type="file" id="source_file"/> +<textarea id="source-text" name="source_text" style="display: none"></textarea> +<input type="file" id="source-file"/> <script> var require = { paths: { vs: 'static/vs' } }; @@ -35,14 +35,14 @@ value="{{ this.value }}" "}" }); - const source_file = document.getElementById("source_file"); - source_file.addEventListener("change", async function (e) { - editor.setValue(await source_file.files[0].text()); - source_file.value = ""; + const sourceFile = document.getElementById("source-file"); + sourceFile.addEventListener("change", async function (e) { + editor.setValue(await sourceFile.files[0].text()); + sourceFile.value = ""; }); - const source_text = document.getElementById("source_text"); - function setSourceText() { source_text.value = editor.getValue(); } + const sourceText = document.getElementById("source-text"); + function setSourceText() { sourceText.value = editor.getValue(); } editor.onDidChangeModelContent(setSourceText); setSourceText(); @@ -52,4 +52,8 @@ value="{{ this.value }}" } language.addEventListener("change", setLanguage); setLanguage(); + + window.addEventListener('resize', () => { + editor.layout(); + }); </script>