210 minimize warning

BoGLWeb/wwwroot/css/main.css

@@ -905,4 +905,105 @@ input[type="file"] {
 .wideTooltip {
     min-width: 630px !important;
     max-width: 630px !important;
-}
+}
+
+/* Custom screen size warning modal */
+/* Hidden by default */
+.hidden {
+    display: none;
+}
+
+.resolution-modal {
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.resolution-modal-content {
+    background-color: white;
+    width: 500px;
+    padding: 20px 24px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.resolution-modal-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.resolution-modal-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.resolution-modal-close {
+  position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    font-size: 24px;
+    font-weight: lighter;
+
+
+
+   /* background-color: ##0652ff;   
+    border: 1px solid #1677ff;
+    color: #fff;
+    font-size: 14px;
+    height: 32px;
+    padding: 4px 15px;
+    border-radius: 6px;
+
+
+    */
+
+}
+
+.resolution-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 20px;
+}
+
+.resolution-modal-footer button:first-child {
+    background-color: #5890F7;
+
+    border: none;
+    color: #fff;
+    font-size: 14px;
+    height: 32px;
+    padding: 4px 15px;
+    border-radius: 3px;
+}
+.resolution-modal-footer button:first-child:hover {
+    background-color: #4096ff;
+    border-color: #4096ff;
+}
+
+.resolution-modal-footer button:last-child {
+    background-color: white;
+    border: 1px solid #d6d6d6;
+    height: 32px;
+    padding: 4px 15px;
+}
+
+
+.hidden {
+    display: none !important;
+}

BoGLWeb/wwwroot/index.html

@@ -42,6 +42,28 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
+
+    <!-- screen-size modal -->
+    <div id="resolution-warning-modal" class="resolution-modal hidden">
+        <div class="resolution-modal-content">
+            <div class="resolution-modal-header">
+                <div class="resolution-modal-title"> 
+                Warning : Resize Window
+                </div>
+                <span class="resolution-modal-close">&times; </span>
+
+            </div>
+            <div class = "resolution-modal-body"> 
+            <p> Your window size is sub-optimal for this application. Please resize for best experience.</p>
+            </div>
+
+            <div class="resolution-modal-footer">
+                <button> OK </button>
+                <button> Cancel </button> 
+
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>

BoGLWeb/wwwroot/main.ts

@@ -313,3 +313,31 @@ function pollDOM() {
 
 // starts the DOM polling
 pollDOM();
+
+
+//sub-optional resolution sizes - open to changes
+const min_width = 800;
+const min_height = 800;
+
+const modal = document.getElementById("resolution-warning-modal")!;
+const closeBtnElements = document.querySelector(".resolution-modal-close, .resolution-modal-footer button")!;
+
+function checkWindowSize() {
+    const isTooSmall = window.innerWidth < min_width || window.innerHeight < min_height;
+    if (isTooSmall) {
+        modal.classList.remove("hidden");
+    } else {
+        modal.classList.add("hidden");
+    }
+}
+
+// Hide modal when "X" is clicked
+closeBtnElements.addEventListener("click", () => {
+    modal.classList.add("hidden");
+});
+
+// Re-check when window is resized
+window.addEventListener("resize", checkWindowSize);
+
+// Run once on page load
+checkWindowSize();

BoGLWeb/wwwroot/tsconfig.json

@@ -6,7 +6,8 @@
     "lib": [ "es2021", "dom" ],
     "esModuleInterop": true,
     "removeComments": true,
-    "outFile": "./build/build.js"
+    "outFile": "./build/build.js",
+    "moduleResolution": "node",
   },
   "exclude": [
     "node_modules"