Merge pull request #8 from svsticky/feature/responsive-overlay

feature: make overlay responsive
svsticky · Nov 28, 2024 · c2e17fd · c2e17fd
2 parents b2db5cd + 454d27a
commit c2e17fd
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 53 deletions.
diff --git a/server.py b/server.py
@@ -176,7 +176,6 @@ def getLogos():
     #     results = cursor.execute('SELECT * FROM logos ORDER BY logoTitle DESC').fetchall()
     #     return json.dumps(results)
 
-
 @app.route('/editLogo', methods=['PATCH'])
 def editLogo():
     # Check if the request contains an valid admin token
@@ -190,7 +189,6 @@ def editLogo():
         con.commit()
         return json.dumps({'status': '200', 'error': 'Logo updated!'}), 200
 
-
 @app.route('/deleteLogo', methods=['DELETE'])
 def deleteLogo():
     # Check if the request contains an valid admin token
@@ -361,8 +359,6 @@ def updateStickerSpots():
     else:
         return json.dumps({'status': '400', 'error': 'Updating sticker spots failed'}), 400
 
-
-
 def sendEmailUpdate():
     return 0  # TODO not implemented
 

diff --git a/static/css/home.css b/static/css/home.css
@@ -310,14 +310,14 @@ body{
     /* background-color:#be0202; */
 }
 
-/* nearYouMobileOverlay */
-#nearYouMobileOverlay {
+/* nearYouOverlay */
+#nearYouOverlay.mobile {
     position: fixed;
     z-index: 999;
-    bottom: -90%; /* Initially at 10% visible */
+    bottom: -90%;
     left: 0;
     width: 100%;
-    height: 100%; /* Full screen height */
+    height: 100%;
     background-color: rgb(255, 255, 255);
     /* border: 5px solid var(--board-color); */
     transition: bottom 0.5s, border-radius 0.5s; /* Transition for sliding  */
@@ -326,25 +326,95 @@ body{
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-     /* Enable scrolling if content exceeds screen height */
     border-radius: 30px 30px 0px 0px;
     box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.5);
 }
 
-#nearYouMobileLine {
+#nearYouOverlay.desktop {
+    height: 90vh;
+    width: 40vw;
+    position: fixed;
+    z-index: 1;
+    top: 10vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: rgb(255, 255, 255); 
+    overflow-x: hidden;
+    padding-top: 1rem;
+    transition: 0.5s;
+    transition-timing-function: 'ease-in';
+}
+
+#nearYouOverlay.desktop.active {
+    left: 60vw;
+    margin-left: 0;
+}
+
+#nearYouOverlay.desktop.inactive {
+    left: 100vw;
+}
+
+#nearYouOverlay.mobile.active {
+    bottom: 0;
+    border-radius: 0px 0px 0px 0px;
+    overflow-y: auto;
+}
+
+#nearYouOverlay.mobile.inactive {
+    bottom: -90%;
+    border-radius: 15px 15px 0px 0px;
+    overflow-y: hidden;
+}
+
+/* desktop button */
+#nearYouDesktopToggleButton.desktop {
+    display: block;
+    position: fixed;
+    top: 15vh;
+    z-index: 1000;
+    background-color:#61518f;
+    color:#ffffff;
+    border: none;
+    border-radius: 5px;
+    padding: 0.5rem 0.5rem;
+    margin-left: auto;    
+    margin-right: auto;
+    margin-bottom: 0.5rem;
+    transition: 0.5s;
+    transition-timing-function: 'ease-in';
+}
+
+#nearYouDesktopToggleButton.desktop.inactive {
+    right: 5vw;
+}
+
+#nearYouDesktopToggleButton.desktop.active {
+    right: 45vw;
+}
+
+#nearYouDesktopToggleButton.mobile {
+    display: none;
+}
+
+#nearYouOverlay.mobile > #nearYouMobileLine {
+    display: block;
     margin-top: 0.5rem;
     width: 10%;
 }
 
-#nearYouMobileTopText {
-    margin-top: 0.5rem;
+#nearYouOverlay.mobile.active > #nearYouMobileLine {
+    display: none;
 }
 
-#nearYouMobileP {
-    padding: 0 2rem;
-    opacity: 0;
-    transition: opacity 0.8s;
-    transition-timing-function: 'ease-in';
+#nearYouOverlay.desktop > #nearYouMobileLine {
+    display: none;
+}
+
+#nearYouTopText {
+    margin-top: 0.5rem;
+    padding-bottom: 2rem;
 }
 
 /* sticker divs styling */

diff --git a/static/js/common.js b/static/js/common.js
@@ -15,10 +15,17 @@ const emailInput = document.getElementsByClassName('successEmail')[0];
 
 const nearYouButton = document.getElementsByClassName('nearYouButton')[0];
 
+const mobileThreshold = 768;
+
 var imageFile;
 var selectedLogo;
 var selectedLogoId;
 var emailCode;
 
 var pointersOnMap = [];
 var logoIcons = [];
+
+// Define the function before the event listener
+function isMobile() {
+    return window.innerWidth <= mobileThreshold;
+}
diff --git a/static/js/main.js b/static/js/main.js
@@ -64,7 +64,6 @@
 // }
 // logoSourceRequest.send();
 
-
 //Update email
 function updateEmail(){
     if(emailInput.value != ''){