Fixes modals on iphone

elado · Jun 9, 2012 · ff5af60 · ff5af60
1 parent acec957
commit ff5af60
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/represent-map/bootstrap/css/bootstrap-responsive.css b/represent-map/bootstrap/css/bootstrap-responsive.css
@@ -116,7 +116,7 @@
     padding-left: 10px;
   }
   .modal {
-    position: absolute;
+    position: fixed;
     top: 10px;
     right: 10px;
     left: 10px;

diff --git a/represent-map/index.php b/represent-map/index.php
@@ -23,6 +23,7 @@
     <meta charset="UTF-8">
     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,700' rel='stylesheet' type='text/css'>
     <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
+    <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="map.css" type="text/css" />
     <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" />
     <script src="/scripts/jquery-1.7.1.js" type="text/javascript" charset="utf-8"></script>
@@ -356,6 +357,17 @@ function show(type) {
       </div>
     </div>
 
+    <!-- more info modal -->
+    <div class="modal hide" id="modal_info_mobile">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">×</button>
+        <h3>About This Map</h3>
+      </div>
+      <div class="modal-body">
+        hey there
+      </div>
+    </div>
+
 
     <!-- more info modal -->
     <div class="modal hide" id="modal_info">

diff --git a/represent-map/map.css b/represent-map/map.css
@@ -280,7 +280,7 @@ html, body, #map_canvas
 }
 #modal_info .badges
 {
-  width: 500px;
+  max-width: 500px;
   overflow: hidden;
   clear: both;
   text-align: center;

diff --git a/represent-map/mobile.css b/represent-map/mobile.css
@@ -52,28 +52,19 @@ body
   padding: 8px 12px;
 }
 
-
-
-/* modals (mobile) */
-.modal
-{
-  position: absolute;
-}
-#modal_add .modal-body
+#modal_info,
+#modal_add
 {
-  max-height: 200px;
-}
-#modal_info .modal-body
-{
-  max-height: 200px;
+  margin: 10px 0px;
+  top: 0;
 }
 
 
-
 /* landscape styles */
 @media screen and (orientation:landscape) {
   .menu_mobile
   {
     display: none;
   }
-}
+}
+