Skip to content

Commit edef52a

Browse files
committed
fix: resolve modal overlay stacking bug, ensure all 15 modal sheets default to display:none and render as bottom sheets on-demand
1 parent 081fd50 commit edef52a

3 files changed

Lines changed: 150 additions & 30 deletions

File tree

β€Žapp-debug.apkβ€Ž

524 Bytes
Binary file not shown.

β€Žapp/src/main/assets/index.htmlβ€Ž

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,66 @@
297297
color: inherit;
298298
}
299299

300+
301+
/* ═════════════════ ENTERPRISE MODAL OVERLAY & BOTTOM SHEET SYSTEM ═════════════════ */
302+
.custom-modal-overlay {
303+
display: none !important;
304+
position: fixed !important;
305+
inset: 0 !important;
306+
width: 100vw !important;
307+
height: 100vh !important;
308+
background: rgba(15, 23, 42, 0.65) !important;
309+
backdrop-filter: blur(5px) !important;
310+
-webkit-backdrop-filter: blur(5px) !important;
311+
z-index: 99999 !important;
312+
align-items: flex-end !important;
313+
justify-content: center !important;
314+
padding: 0 !important;
315+
margin: 0 !important;
316+
box-sizing: border-box !important;
317+
}
318+
319+
.custom-modal-overlay.active,
320+
.custom-modal-overlay[style*="display: flex"],
321+
.custom-modal-overlay[style*="display:flex"] {
322+
display: flex !important;
323+
}
324+
325+
.custom-modal-overlay[style*="display: none"],
326+
.custom-modal-overlay[style*="display:none"],
327+
.custom-modal-overlay:not([style*="display: flex"]):not([style*="display:flex"]):not(.active) {
328+
display: none !important;
329+
}
330+
331+
.custom-modal-sheet {
332+
background: #FFFFFF !important;
333+
width: 100% !important;
334+
max-width: 480px !important;
335+
max-height: 85vh !important;
336+
border-top-left-radius: 26px !important;
337+
border-top-right-radius: 26px !important;
338+
padding: 20px 18px 34px !important;
339+
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28) !important;
340+
display: flex !important;
341+
flex-direction: column !important;
342+
overflow: hidden !important;
343+
position: relative !important;
344+
margin: 0 auto !important;
345+
box-sizing: border-box !important;
346+
animation: modalSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
347+
}
348+
349+
@keyframes modalSheetSlideUp {
350+
from {
351+
transform: translateY(100%);
352+
opacity: 0.8;
353+
}
354+
to {
355+
transform: translateY(0);
356+
opacity: 1;
357+
}
358+
}
359+
300360
</style>
301361

302362
<!-- Leaflet.js Real OpenStreetMap Integration -->
@@ -498,7 +558,7 @@
498558
</div>
499559

500560
<!-- "Select your crops" Modal Sheet (Full 120+ OpenFarm Library) -->
501-
<div id="crop-modal" class="custom-modal-overlay" onclick="closeCropModal(event)">
561+
<div id="crop-modal" class="custom-modal-overlay" style="display:none;" onclick="closeCropModal(event)">
502562
<div class="custom-modal-sheet" onclick="event.stopPropagation()">
503563
<div style="margin-bottom:12px;flex-shrink:0;">
504564
<div style="display:flex;justify-content:space-between;align-items:center;">
@@ -524,7 +584,7 @@
524584
</div>
525585

526586
<!-- ═════════════════ DEDICATED FULL SPRAYING ADVISORY MODAL SHEET ═════════════════ -->
527-
<div id="spraying-modal" class="custom-modal-overlay" onclick="closeSprayingModal(event)">
587+
<div id="spraying-modal" class="custom-modal-overlay" style="display:none;" onclick="closeSprayingModal(event)">
528588
<div class="custom-modal-sheet" onclick="event.stopPropagation()">
529589
<!-- Modal Top Bar -->
530590
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
@@ -558,7 +618,7 @@
558618
</div>
559619

560620
<!-- Machinery Interactive Booking Modal -->
561-
<div id="machinery-booking-modal" class="custom-modal-overlay" onclick="closeMachineryModal(event)">
621+
<div id="machinery-booking-modal" class="custom-modal-overlay" style="display:none;" onclick="closeMachineryModal(event)">
562622
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;">
563623
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
564624
<div style="display:flex;align-items:center;gap:10px;">
@@ -576,7 +636,7 @@
576636
</div>
577637

578638
<!-- Machinery "+ List My Own Equipment" Modal -->
579-
<div id="machinery-listing-modal" class="custom-modal-overlay" onclick="closeMachineryListingModal(event)">
639+
<div id="machinery-listing-modal" class="custom-modal-overlay" style="display:none;" onclick="closeMachineryListingModal(event)">
580640
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:88vh;overflow-y:auto;">
581641
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
582642
<div style="display:flex;align-items:center;gap:10px;">
@@ -594,7 +654,7 @@
594654
</div>
595655

596656
<!-- Farm Khata New Transaction Modal -->
597-
<div id="khata-entry-modal" class="custom-modal-overlay" onclick="closeKhataModal(event)">
657+
<div id="khata-entry-modal" class="custom-modal-overlay" style="display:none;" onclick="closeKhataModal(event)">
598658
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;">
599659
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
600660
<div style="display:flex;align-items:center;gap:10px;">
@@ -612,7 +672,7 @@
612672
</div>
613673

614674
<!-- GramHaul Shared Mandi Truck Booking Modal -->
615-
<div id="truck-booking-modal" class="custom-modal-overlay" onclick="closeTruckBookingModal(event)">
675+
<div id="truck-booking-modal" class="custom-modal-overlay" style="display:none;" onclick="closeTruckBookingModal(event)">
616676
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;">
617677
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
618678
<div style="display:flex;align-items:center;gap:10px;">
@@ -630,7 +690,7 @@
630690
</div>
631691

632692
<!-- BioRx Organic Medicine Full Recipe & Voice Readout Modal -->
633-
<div id="biorx-recipe-modal" class="custom-modal-overlay" onclick="closeBioRxModal(event)">
693+
<div id="biorx-recipe-modal" class="custom-modal-overlay" style="display:none;" onclick="closeBioRxModal(event)">
634694
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:88vh;overflow-y:auto;">
635695
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
636696
<div style="display:flex;align-items:center;gap:10px;">
@@ -648,7 +708,7 @@
648708
</div>
649709

650710
<!-- ═════════════════ REAL AGMARKNET PRICE TREND & HISTORICAL ANALYTICS MODAL ═════════════════ -->
651-
<div id="price-trend-modal" class="custom-modal-overlay" onclick="closePriceTrendModal(event)">
711+
<div id="price-trend-modal" class="custom-modal-overlay" style="display:none;" onclick="closePriceTrendModal(event)">
652712
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:90vh;overflow-y:auto;">
653713
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
654714
<div style="display:flex;align-items:center;gap:10px;">
@@ -666,7 +726,7 @@
666726
</div>
667727

668728
<!-- ═════════════════ PRICE INCREASE & TARGET ALERT CONFIGURATION MODAL ═════════════════ -->
669-
<div id="price-alert-modal" class="custom-modal-overlay" onclick="closePriceAlertModal(event)">
729+
<div id="price-alert-modal" class="custom-modal-overlay" style="display:none;" onclick="closePriceAlertModal(event)">
670730
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:90vh;overflow-y:auto;">
671731
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-shrink:0;">
672732
<div style="display:flex;align-items:center;gap:10px;">
@@ -687,7 +747,7 @@
687747

688748

689749
<!-- ═════════════════ EDIT FARMER PROFILE MODAL ═════════════════ -->
690-
<div id="profile-edit-modal" class="custom-modal-overlay" onclick="closeEditProfileModal()">
750+
<div id="profile-edit-modal" class="custom-modal-overlay" style="display:none;" onclick="closeEditProfileModal()">
691751
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;padding:20px 20px 36px;background:#FFFFFF;border-top-left-radius:24px;border-top-right-radius:24px;">
692752
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0;">
693753
<div style="display:flex;align-items:center;gap:10px;">
@@ -725,7 +785,7 @@
725785
</div>
726786

727787
<!-- ═════════════════ SOIL HEALTH CARD MODAL ═════════════════ -->
728-
<div id="soil-health-modal" class="custom-modal-overlay" onclick="closeSoilHealthModal()">
788+
<div id="soil-health-modal" class="custom-modal-overlay" style="display:none;" onclick="closeSoilHealthModal()">
729789
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;padding:20px 20px 36px;background:#FFFFFF;border-top-left-radius:24px;border-top-right-radius:24px;">
730790
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;">
731791
<div style="display:flex;align-items:center;gap:10px;">
@@ -771,7 +831,7 @@
771831
</div>
772832

773833
<!-- ═════════════════ PRIVACY POLICY & DPDP ACT MODAL ═════════════════ -->
774-
<div id="privacy-policy-modal" class="custom-modal-overlay" onclick="closePrivacyPolicyModal()">
834+
<div id="privacy-policy-modal" class="custom-modal-overlay" style="display:none;" onclick="closePrivacyPolicyModal()">
775835
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;padding:20px 20px 36px;background:#FFFFFF;border-top-left-radius:24px;border-top-right-radius:24px;">
776836
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;">
777837
<div style="display:flex;align-items:center;gap:10px;">
@@ -802,7 +862,7 @@
802862
</div>
803863

804864
<!-- ═════════════════ TERMS OF SERVICE MODAL ═════════════════ -->
805-
<div id="terms-service-modal" class="custom-modal-overlay" onclick="closeTermsServiceModal()">
865+
<div id="terms-service-modal" class="custom-modal-overlay" style="display:none;" onclick="closeTermsServiceModal()">
806866
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;padding:20px 20px 36px;background:#FFFFFF;border-top-left-radius:24px;border-top-right-radius:24px;">
807867
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;">
808868
<div style="display:flex;align-items:center;gap:10px;">
@@ -830,7 +890,7 @@
830890

831891

832892
<!-- ═════════════════ KISAN COMMUNITY NEW QUESTION / POST MODAL ═════════════════ -->
833-
<div id="community-ask-modal" class="custom-modal-overlay" onclick="closeAskQuestionModal(event)">
893+
<div id="community-ask-modal" class="custom-modal-overlay" style="display:none;" onclick="closeAskQuestionModal(event)">
834894
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:85vh;overflow-y:auto;padding:20px 20px 36px;background:#FFFFFF;border-top-left-radius:24px;border-top-right-radius:24px;">
835895
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-shrink:0;">
836896
<div style="display:flex;align-items:center;gap:10px;">
@@ -894,7 +954,7 @@
894954
</div>
895955

896956
<!-- ═════════════════ SPRAYING SAFETY & WEATHER WINDOW MODAL ═════════════════ -->
897-
<div id="spray-modal" class="custom-modal-overlay" onclick="closeSprayModal(event)">
957+
<div id="spray-modal" class="custom-modal-overlay" style="display:none;" onclick="closeSprayModal(event)">
898958
<div class="custom-modal-sheet" onclick="event.stopPropagation()" style="max-height:86vh;overflow-y:auto;padding-bottom:32px;">
899959
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;">
900960
<div style="display:flex;align-items:center;gap:10px;">

0 commit comments

Comments
Β (0)