* finish task #5063.

module/doc/css/view.css

@@ -12,3 +12,11 @@
 #urlCard .url-content{padding-left:55px;}
 #urlCard .url-title{font-weight:bold; font-size:16px; min-height:20px}
 #urlCard .url-href a{color:#888;}
+
+.main-row > .side-col {transition: width .2s;}
+.main-row > .main-col .article-content {transition: max-width; margin: 0 auto!important;}
+.main-row > .side-col > .cell {transition: opacity .2s;}
+.doc-fullscreen .main-row > .side-col {width: 0; position: relative; overflow: hidden}
+.doc-fullscreen .main-row > .side-col > .cell {opacity: 0}
+.doc-fullscreen .fullscreen-btn > .icon-fullscreen:before {content: '\e972'}
+.doc-fullscreen .main-row > .main-col .article-content {max-width: 1360px;}

module/doc/js/view.js

@@ -1,19 +1,9 @@
 $(function()
 {
     $('#urlIframe').height($('#mainContent').height() - 35);
-    $('#mainMenu .fullScreen').click(function()
+    $('#mainMenu .fullscreen-btn').click(function()
     {
-        if(!$(this).hasClass('collapse'))
-        {
-            $(this).addClass('collapse');
-            $(this).find('i').attr('class', 'icon-exchange');
-            $('.side-col').hide();
-        }
-        else
-        {
-            $(this).removeClass('collapse');
-            $(this).find('i').attr('class', 'icon-fullscreen');
-            $('.side-col').show();
-        }
-    })
+        $('body').toggleClass('doc-fullscreen');
+        setTimeout($.resetToolbarPosition, 250);
+    });
 })

module/doc/view/view.html.php

@@ -65,7 +65,7 @@
     </div>
   </div>
   <div class="btn-toolbar pull-right">
-    <a href='###' class='fullScreen btn'><i class='icon-fullscreen'></i></a>
+    <button type='button' class='btn fullscreen-btn'><i class='icon icon-fullscreen'></i></button>
   </div>
 </div>
 <div id="mainContent" class="main-row">