85 add a problemswarningserrors panel

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Each batch
 
 It is a summary of changes that would be pertinent to the end user of the PGEtinker website. For a comprehensive history of changes made to the project, please refer to the repository's commit history.
 
+## 2024-06-08
+
+- Fixed mobile overize issue (big win for mobile)
+- Added diagnostics middleware to monaco language client
+- Changed Build Information panel to Compiler Output
+- Added Problems panel
+- Removed old default layout
+- Added default layout for portrait
+- Added default layout for landscape
+- Added storage abstraction
+
 ## 2024-06-04
 
 - Added Alert when a runtime error occurs

resources/css/app.scss

@@ -53,8 +53,11 @@ body.light {
 
 html,
 body {
+    position: relative;
     width: 100%;
     height: 100%;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
     font-family: 'Pixel Code', monospace;
     font-size: 12px;
@@ -73,7 +76,7 @@ a:hover {
 }
 
 #app {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
@@ -216,6 +219,8 @@ nav .navbar-right-menu .menu-item {
     bottom: 0px;
     width: 100%;
     overflow: hidden;
+    margin: 0;
+    padding: 0;
     border-top: 1px solid var(--pgetinker-content-border-color);
     border-bottom: 1px solid var(--pgetinker-content-border-color);
 }
@@ -227,9 +232,14 @@ nav .navbar-right-menu .menu-item {
 .hidden { display: none; }
 
 @import "./console-panel.scss";
+@import "./compiler-output-panel.scss";
 @import "./editor-panel.scss";
-@import "./info-panel.scss";
 @import "./player-panel.scss";
+@import "./problems-panel.scss";
 @import "./dialog.scss";
 
 @import "./responsive.scss";
+
+.lm_content {
+    overflow: visible !important;
+}

resources/css/compiler-output-panel.scss

@@ -0,0 +1,18 @@
+#compiler-output-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+#compiler-output-panel > div {
+    font-family: "Droid Sans Mono", "monospace", monospace;
+    width: 100%;
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}

resources/css/editor-panel.scss

@@ -2,6 +2,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+    overflow: visible;
 }
 
 #editor-panel .code-editor {
@@ -17,7 +18,6 @@
     left: 0;
     right: 0;
     bottom: 0px;
-    width: 100%;
     height: 1.2rem;
     line-height: 1.2rem;
     font-size: 0.8rem;

resources/css/problems-panel.scss

@@ -0,0 +1,80 @@
+#problems-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+#problems-panel > div {
+    font-family: "Droid Sans Mono", "monospace", monospace;
+    width: 100%;
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+#problems-panel table {
+    font-family: "Droid Sans Mono", "monospace", monospace;
+    border-spacing: 0;
+    width: 100%;
+}
+
+#problems-panel table thead {
+    position: sticky;
+    font-weight: bolder;
+    text-decoration: underline;
+    inset-block-start: 0;
+    background-color: var(--pgetinker-background-color);
+}
+
+#problems-panel table thead tr td:nth-child(1) {
+    width: 15vw;
+}
+
+#problems-panel table thead tr td:nth-child(2) {
+    width: 5vw;
+}
+
+#problems-panel table thead tr td:nth-child(3) {
+    width: 5vw;
+}
+
+#problems-panel table thead tr td:nth-child(4) {
+    width: 100%;
+}
+
+#problems-panel table tr.error {
+    background-color: rgba(255,0,0,0.2);
+}
+
+#problems-panel table tr.warning {
+    background-color: rgba(255,255,0,0.2);
+}
+
+#problems-panel table tr.info {
+    background-color: rgba(0,0,255,0.2);
+}
+
+#problems-panel table tr.hint {
+    background-color: rgba(0, 255, 255,0.2);
+}
+
+#problems-panel table tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+#problems-panel table tr {
+    text-align: left;
+}
+
+#problems-panel table tr th,
+#problems-panel table tr td {
+    padding: 0.3rem;
+    padding-left: 1rem;
+}