Merge pull request #7382 from hallaathrad/fix/sidecar-scrolling-issues

Scrolling issues be gone
FreeCodeCamp · 2863efe8e1544954273897f4e7381d978c86e91a · QuincyLarson committed Mar 3, 2016 · Mar 3, 2016 · 2863efe
2 parents 4b6ec6f + dabcebd
commit 2863efe8e1544954273897f4e7381d978c86e91a
Unified Split

Showing with 42 additions and 44 deletions.

+23 −17 client/less/map.less

+9 −15 client/less/wiki.less

+4 −4 client/main.js

+1 −0 server/views/map/show.jade

+0 −2 server/views/partials/footer.jade

+5 −6 server/views/wiki/show.jade
@@ -40,18 +40,9 @@
 
       background-color: @body-bg;
     }
-    .iframeWrapper {
-      height:100%;
-      width:100%;
-      overflow-x: hidden;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      iframe {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
+    iframe {
+      width: 100%;
+      height: 100%;
     }
 }
 
@@ -139,10 +130,16 @@
   }
 }
 
+.mapWrapper {
+  position:absolute;
+  display: block;
+  height: 100%;
+  width: 100%; 
+}
+
 .map-accordion {
-  margin: 135px auto 0;
-  width:700px;
-  overflow-y: auto;
+  width:700px; 
+  margin:155px auto 0; 
   position:relative;
   #nested {
     margin:0 15px;
@@ -228,10 +225,19 @@
     left:0;
     right:0;
     width:100%;
-    margin-top:180px;
+    top:195px;
+    bottom:0;
+    margin:0;
+    position:absolute;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     h2 {
       margin:15px 0;
       padding:0;
+      &:first-of-type {
+        margin-top:0;
+      }
       > a {
         padding:10px 0;
         padding-left:50px;
@@ -249,7 +255,7 @@
     }
   }
 }
-
+    
 .map-aside-action-item {
     display: -webkit-flex;
     display: flex;
@@ -6,7 +6,6 @@
 #wikiFrame {
     width: 100%;
     height: 100%;
-    padding-top: 30px;
     top:0;
     bottom: 0;
     position: absolute;
@@ -53,18 +52,13 @@
       background-color: @body-bg;
     }
 
-    .iframeWrapper {
-      height:100%;
-      width:100%;
-      overflow-x: hidden;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      iframe {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
+    iframe {
+      width: 100%;
+      height: 100%;
+      top:0;
+      bottom:0;
+      position:absolute;
+      overflow: hidden;
     }
 }
 
@@ -83,14 +77,14 @@
 .wiki-aside-action-bar {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 15px;
 
     display: -webkit-flex;
     display: flex;
     justify-content: flex-end;
 
     padding-bottom: 5px;
-    padding-right:10px;
+    padding-right:0px;
     padding-top:5px;
     z-index: 100;
 }
@@ -357,9 +357,9 @@ $(document).ready(function() {
       var mapAside = $('<iframe>');
       mapAside.attr({
         src: '/map-aside',
-        scrolling: 'yes'
+        frameBorder: '0'
       });
-      $('.map-aside .iframeWrapper').append(mapAside);
+      $('.map-aside').append(mapAside);
       main.isMapAsideLoad = true;
     }
     $('.map-aside').removeClass('is-collapsed');
@@ -391,9 +391,9 @@ $(document).ready(function() {
       var wikiAside = $('<iframe>');
       wikiAside.attr({
         src: wikiURL,
-        scrolling: 'yes'
+        frameBorder: '0'
       });
-      $('.wiki-aside .iframeWrapper').append(wikiAside);
+      $('.wiki-aside').append(wikiAside);
       main.isWikiAsideLoad = true;
     }
     $('.wiki-aside').removeClass('is-collapsed');
@@ -1,5 +1,6 @@
 extends ../layout-wide
 block content
+      .mapWrapper
         .text-center.map-fixed-header
             p Challenges required for certifications are marked with a *
             .row.map-buttons
@@ -4,9 +4,7 @@ aside.map-aside.is-collapsed
   .map-aside-action-bar
       a.map-aside-action-item.map-aside-action-pop-out(href='/map' target='_blank' aria-label='open map in new tab')
       button.map-aside-action-item.map-aside-action-collapse(aria-label='close map aside')
-  .iframeWrapper
 aside.wiki-aside.is-collapsed
   .wiki-aside-action-bar
       a.wiki-aside-action-item.wiki-aside-action-pop-out(href='/wiki' target='_blank' aria-label='open wiki in new tab')
       button.wiki-aside-action-item.wiki-aside-action-collapse(aria-label='close wiki aside')
-  .iframeWrapper
@@ -1,8 +1,7 @@
 extends ../layout-wide
 block content
-  .iframeWrapper
-    iframe#wikiFrame(frameborder='no')
-    script.
-        var lang = window.location.toString().match(/\/\w{2}\//);
-        lang = (lang) ? lang[0] : '/en/';
-        $('#wikiFrame').attr('src','http://freecodecamp.github.io/wiki' + lang);
+  iframe#wikiFrame(frameborder='no')
+  script.
+      var lang = window.location.toString().match(/\/\w{2}\//);
+      lang = (lang) ? lang[0] : '/en/';
+      $('#wikiFrame').attr('src','http://freecodecamp.github.io/wiki' + lang);