- optimised tapping outside of lightbox modal

- optimised iframe height
Lmears · Jun 23, 2024 · ed0efb5 · ed0efb5
1 parent ea767e4
commit ed0efb5
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/about/index.html b/about/index.html
@@ -112,7 +112,6 @@ <h1 class="w-full text-5xl leading-tight px-4">About</h1>
                                 <div id="myModal" class="modal">
                                     <span class="close cursor-pointer">&times;</span>
                                     <img class="modal-content" id="img01">
-                                    <div id="caption"></div>
                                 </div>
                             </section>
                         </div>

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -146,6 +146,7 @@ nav ul li a:hover,
     position: fixed;
     z-index: 9999;
     padding-top: 100px;
+    padding-bottom: 100px;
     left: 0;
     top: 0;
     width: 100%;
@@ -211,6 +212,11 @@ html {
     border: 3px solid #e9ebed;
 }
 
+/* Software iframes */
+.software-iframe {
+    width: 100%;
+    height: 800px;
+}
 
 /* Media queries */
 @media (max-width: 642px) {

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -82,4 +82,18 @@ function toggleNavMenu() {
 document.addEventListener('DOMContentLoaded', function () {
     var hamburger = document.getElementById('hamburger-menu');
     hamburger.addEventListener('click', toggleNavMenu);
-});
+});
+
+// software iframes
+function adjustIframeHeight() {
+    const iframes = document.querySelectorAll('.software-iframe');
+    const viewportHeight = window.innerHeight;
+    const maxHeight = Math.min(800, viewportHeight * 0.8);
+
+    iframes.forEach(iframe => {
+        iframe.style.height = `${maxHeight}px`;
+    });
+}
+
+window.addEventListener('load', adjustIframeHeight);
+window.addEventListener('resize', adjustIframeHeight);
diff --git a/design/index.html b/design/index.html
@@ -11,7 +11,7 @@
     <link rel="icon" type="image/png" sizes="192x192" href="../assets/images/favicon-192x192.png">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,500&display=swap">
-    <link rel="stylesheet" href="../assets/css/styles.css">
+    <link rel="stylesheet" href="../assets/css/styles.css?v=1.1">
 </head>
 
 <body class="text-neutral-900">
@@ -88,7 +88,6 @@ <h2 class="mb-4">Past work: </h2>
         <div id="myModal" class="modal">
             <span class="close cursor-pointer">&times;</span>
             <img class="modal-content" id="img01">
-            <div id="caption"></div>
         </div>
 
     </main>

diff --git a/software/index.html b/software/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,500&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="../assets/css/styles.css">
+    <link rel="stylesheet" href="../assets/css/styles.css?v=1.4">
 </head>
 
 <body class="text-neutral-900">
@@ -75,7 +75,7 @@ <h2>Smart Access:</h2>
                     </div>
                     <div class="px-4">
                         <p>
-                            <iframe src="https://app.smartaccess.enterprises/" style="width:100%; height:800px;"
+                            <iframe src="https://app.smartaccess.enterprises/" class="software-iframe"
                                 frameborder="0"></iframe>
                         </p>
                     </div>
@@ -90,7 +90,7 @@ <h2>My Life My Voice:</h2>
                     </div>
                     <div class="px-4">
                         <p>
-                            <iframe src="https://app.mylifemyvoice.org.nz/" style="width:100%; height:800px;"
+                            <iframe src="https://app.mylifemyvoice.org.nz/" class="software-iframe"
                                 frameborder="0"></iframe>
                         </p>
                     </div>
@@ -105,8 +105,7 @@ <h2>Twisted Frequency:</h2>
                     </div>
                     <div class="px-4">
                         <p>
-                            <iframe src="https://twistedfrequency.nz/" style="width:100%; height:800px;"
-                                frameborder="0"></iframe>
+                            <iframe src="https://twistedfrequency.nz/" class="software-iframe" frameborder="0"></iframe>
                         </p>
                     </div>
                     <br>
@@ -124,7 +123,7 @@ <h2>Twisted Frequency:</h2>
             <div class="pb-12"></div>
         </section>
     </main>
-    <script src="../assets/js/script.js"></script>
+    <script src="../assets/js/script.js?v=1.3"></script>
 </body>
 
 </html>