#17: The nav bar position is changed when showing the About modal

Author: nghuuphuoc

CHANGELOG.md

@@ -8,6 +8,7 @@ v1.2.1 (2013/10/18)
 * #13: Fix the width of device sub-menu
 * #15: Set the Ajax loading indicator at the center of screen
 * #16: Cannot move the mouse out of the frame after resizing the frame
+* #17: The nav bar position is changed when showing the About modal
 
 v1.2.0 (2013/09/27)
 

app/css/style.css

@@ -9,6 +9,11 @@
  * @license     MIT
  */
 
+/* The nav bar position will not be changed when showing the About modal */
+body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
+    margin-right: 0;
+}
+
 .navbar {
     background: #fff;
     border-bottom: 1px solid #c0c0c0;

index.html

@@ -80,6 +80,12 @@
     <div class="rt-ruler"></div>
     <!-- :ruler -->
 
+    <!-- dest-iframe: -->
+    <div class="rt-iframe" ng-style="{ width: w / pxd + 15 + 'px', height: h / pxd + 'px' }" rt-resizable ng-show="!loading" id="iframe">
+        <iframe ng-src="{{ frameSrc }}" rt-frame-loading></iframe>
+    </div>
+    <!-- :dest-iframe -->
+
     <!-- about: -->
     <div class="modal fade" id="about">
         <div class="modal-dialog">
@@ -91,7 +97,7 @@ <h4 class="modal-title">About Responsive Test</h4>
                 <div class="modal-body text-center">
                     <p>
                         v1.2.1<br />
-                        Created by Nguyen Huu Phuoc<br />
+                        Created by <a href="http://twitter.com/nghuuphuoc">Nguyen Huu Phuoc</a><br />
                         &copy; 2013 <a href="http://apl.vn">APL Solutions</a>
                     </p>
                     <p>
@@ -109,12 +115,6 @@ <h4 class="modal-title">About Responsive Test</h4>
     </div>
     <!-- :about -->
 
-    <!-- dest-iframe: -->
-    <div class="rt-iframe" ng-style="{ width: w / pxd + 15 + 'px', height: h / pxd + 'px' }" rt-resizable ng-show="!loading" id="iframe">
-        <iframe ng-src="{{ frameSrc }}" rt-frame-loading></iframe>
-    </div>
-    <!-- :dest-iframe -->
-
     <!-- fork-me -->
     <a href="https://github.com/nghuuphuoc/responsivetest"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork ResponsiveTest on GitHub"></a>