Updated mobile screen size warning/functionality

brian-mckeown · Nov 2, 2023 · da55ad6 · da55ad6
1 parent 33a644e
commit da55ad6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
@@ -23,11 +23,14 @@
 </head>
 <body ng-app="checklistApp" ng-controller="ChecklistController">
 
+    <div id="overlay" class=""></div>
     <!-- Warning message -->
-    <div id="warning-message" class="alert alert-warning fixed-top text-center">
-        FlightDash.io is currently meant to be displayed on computers or tablets in landscape mode, with a screen width of at least 1200 pixels. Please try another device to use FlightDash.io. Watch the overview video <a href="https://youtu.be/mNOUZ_0jkOQ?si=wMvDIJJm0XpJf0Fa">HERE</a>
+    <div id="warning-message" class="alert alert-warning alert-dismissible fade show">
+        FlightDash.io is currently meant to be displayed on computers or tablets in landscape mode, with a screen width of at least 1200 pixels. Please try another device to use FlightDash.io.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> 
     </div>
 
+    <!-- Initial Agreement-->
     <div class="toast align-items-center bg-primary border-0 position-fixed" style="top: 50%; left: 50%; transform: translate(-50%, -50%);" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
         <div class="toast-body">
             By using FlightDash.io, you acknowledge and consent to our <a href="#" data-bs-toggle="modal" data-bs-target="#termsOfUseModal">Terms of Use</a> and <a href="#" data-bs-toggle="modal" data-bs-target="#privacyPolicyModal">Privacy Policy</a>, which detail our cookie practices. Furthermore, you understand that this application is exclusively for flight simulation and must not be used for real-world aviation endeavors.

diff --git a/src/main/resources/static/script.js b/src/main/resources/static/script.js
@@ -5,7 +5,7 @@ var app = angular.module('checklistApp', []);
 
 app.controller('ChecklistController', ['$scope', '$sce', '$timeout', '$http', '$document', '$interval', function($scope, $sce, $timeout, $http, $document, $interval) {
 
-    $scope.versionNumber = '1.0.3 Beta'; 
+    $scope.versionNumber = '1.0.4 Beta'; 
     $scope.state = 'Idle';
     $scope.messages = [];
     $scope.selectedChecklist = '';

diff --git a/src/main/resources/static/styles.css b/src/main/resources/static/styles.css
@@ -1,12 +1,28 @@
 /* Hide warning by default */
+#overlay {
+    position: fixed;
+    display: none; /* Hidden by default */
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+    z-index: 1040; /* Below the alert but above other items */
+}
+
 #warning-message {
-    display: none;
+    position: fixed;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1050; /* Above the overlay */
 }
 
-/* Show warning for screens below 1488 pixels wide */
-@media (max-width: 1200px) {
-    #warning-message {
-        display: block;
+@media (min-width: 1200px) {
+    #warning-message, #overlay {
+        display: none; /* Hide alert and overlay on larger screens */
     }
 }
 

diff --git a/src/main/resources/static/vanilla-js.js b/src/main/resources/static/vanilla-js.js
@@ -16,10 +16,25 @@ window.onload = function() {
 }
 
 document.addEventListener('DOMContentLoaded', function() {
+    // Show the welcome modal
     var modal = new bootstrap.Modal(document.getElementById('welcomeModal'), {
       keyboard: false
     });
     modal.show();
+
+    // Warning message and overlay logic
+    let alertEl = document.getElementById('warning-message');
+    let overlayEl = document.getElementById('overlay');
+
+    // Show overlay when the alert is open and the screen width is less than 1200px
+    if (window.innerWidth < 1200) {
+        overlayEl.style.display = 'block';
+    }
+
+    // Add an event listener for the close button on the alert
+    alertEl.addEventListener('closed.bs.alert', function () {
+        overlayEl.style.display = 'none';
+    });
 });
 
 fetch('/privacy-policy')