doortts doortts 2019-01-09
Merge branch 'enhance/sidebar' into next
Reviewed-by: Hyunjae Park
@4b144e99eb9059f2aa962fe0bc785eebf146d2eb
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -66,6 +66,14 @@
     width: 100%;
 }
 
+.mainFrame {
+    display: none;
+}
+
+.loading-gif {
+    background: #FFF url('@{base-image-path}/loading-gif-2.gif') no-repeat center;
+}
+
 .prj {
     color:#202020;
 }
@@ -439,7 +447,7 @@
         .project-header-wrap {
             height:inherit;
             margin:0 auto;
-            width: 99%;
+            width: 97%;
             position: relative;
 
             .project-header-avatar {
@@ -3685,7 +3693,7 @@
 }
 .content-wrap {
     .text {
-        width: 99%; /*946px;/*866px;*/
+        width: 97%; /*946px;/*866px;*/
     }
     textarea.content{
       height: 300px;
app/views/layout_framed.scala.html
--- app/views/layout_framed.scala.html
+++ app/views/layout_framed.scala.html
@@ -58,7 +58,7 @@
         }
     </div>
     <div id="mainFrame">
-        <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="@iframePath"  scrolling="no" onload="resizeIframe(this)"></iframe>
+        <iframe name="mainFrame" frameborder="0" class="mainFrame" scrolling="no" height="100%" width="100%" src="@iframePath"  scrolling="no" onload="resizeIframe(this)"></iframe>
         @common.scripts()
     </div>
 
@@ -70,8 +70,18 @@
         });
 
         function resizeIframe(obj) {
-            obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
-            window.scrollTo(0, 0);
+            $('#mainFrame').addClass("loading-gif");
+
+            setTimeout(function () {
+                // for smoothing iframe loading effects
+                $('#mainFrame').removeClass("loading-gif");
+                $('.mainFrame').show();
+
+                obj.style.height = '100vh'; // Before calculate new content height, reduce it to 100vh.
+                                            // It prevents unintended long height
+                obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
+                window.scrollTo(0, 0);
+            }, 0);
         }
 
         //Following three values are used for common/yona.Usermenu.js
public/javascripts/common/yona.Usermenu.js
--- public/javascripts/common/yona.Usermenu.js
+++ public/javascripts/common/yona.Usermenu.js
@@ -133,6 +133,11 @@
         $(".user-ul > .user-li, .project-ul > .user-li").on("click", function (e) {
             e.preventDefault();
             e.stopPropagation();
+
+            // for smoothly loading effect
+            $('.mainFrame').hide();
+            $('#mainFrame').addClass("loading-gif");
+
             var location = $(this).data('location');
             if(e.metaKey || e.ctrlKey || e.shiftKey) {
                 window.location = location;
public/javascripts/service/yona.twoColumnMode.js
--- public/javascripts/service/yona.twoColumnMode.js
+++ public/javascripts/service/yona.twoColumnMode.js
@@ -76,7 +76,6 @@
         $title.unbind('click.pageslide');
         $title.unbind('click.iframeLoading');
         $title.unbind('click.changeUrlWhenClick');
-        revokeMarginOfMainPage();
         $.pageslide.close();
     }
 
@@ -88,9 +87,6 @@
             if($('#pageslide').is(":visible")){
                 $(".left-menu").hide(0);
                 isLeftMenuHide = true;
-                reduceMarginOfMainPage();
-            } else {
-                revokeMarginOfMainPage();
             }
             setTimeout(function () {
                 $('#pageslide > iframe').ready(function () {
@@ -98,30 +94,5 @@
                 });
             }, 100);
         });
-    }
-
-    function reduceMarginOfMainPage() {
-        var $projectPageWrap = $('.project-page-wrap');
-        $projectPageWrap.css("margin", "20px 10px 0").css("width", "55%");
-
-        $(".project-header-wrap").css("margin", "0 10px");
-        $(".project-menu-inner").css("margin", "0 10px");
-        $(".gnb-inner").css("margin", "0 10px");
-        $(".page-wrap").css("margin", "0 10px").css("width", "55%");
-        $(".gnb-usermenu").css("float", "none");
-        $("#mySidenav").css("right", "50%");
-    }
-
-    function revokeMarginOfMainPage() {
-        var $projectPageWrap = $('.project-page-wrap');
-
-        $projectPageWrap.css("margin", "20px auto 0").css("width", mainWidth);
-        $(".project-header-wrap").css("margin", "0 auto");
-        $(".project-menu-inner").css("margin", "0 auto");
-        $(".gnb-inner").css("margin", "0 auto");
-        $(".page-wrap").css("margin", "0 auto").css("width", mainWidth);
-        $(".gnb-usermenu").css("float", "right");
-        $("#mySidenav").css("right", "0");
-
     }
 }
Add a comment
List