优化手机界面

app/article/index.php

@@ -226,33 +226,45 @@ span.fancytree-node{
 function show_content(){
 	$("#left_pannal").toggleClass("hidden");
 	if($("#left_pannal").hasClass("hidden")){
-		$("#main_view").css("margin-left","0");
-		$(".fun_frame").css("width","30vw");
-		$("#contents_div").css("width","calc(70vw - 2em)");
+		$("#main_view").removeClass("main_view_narrow");
+		$(".fun_frame").removeClass("fun_frame_narrow");
+		$("#contents_div").removeClass("contents_div_narrow");
+		//$("#main_view").css("margin-left","0");
+		//$(".fun_frame").css("width","30vw");
+		//$("#contents_div").css("width","calc(70vw - 2em)");
 		$("#left_pannal_inner").css("width","unset");
 		localStorage.setItem('article_show_toc_'+_mode, 'hide');
 	}else{
-		$("#main_view").css("margin-left","20vw");
-		$(".fun_frame").css("width","20vw");
+		$("#main_view").toggleClass("main_view_narrow");
+		$(".fun_frame").toggleClass("fun_frame_narrow");
+		$("#contents_div").toggleClass("contents_div_narrow");
+		//$("#main_view").css("margin-left","20vw");
+		//$(".fun_frame").css("width","20vw");
+		//$("#contents_div").css("width","calc(60vw - 2em)");
 		$("#left_pannal_inner").css("width","unset");
-		$("#contents_div").css("width","calc(60vw - 2em)");
 		localStorage.setItem('article_show_toc_'+_mode, 'show');
 	}
 }
 function set_toc_visible(isVisible){
 	if(isVisible){
 		$("#left_pannal").removeClass("hidden");
-		$("#main_view").css("margin-left","20vw");
-		$(".fun_frame").css("width","20vw");
+		$("#main_view").toggleClass("main_view_narrow");
+		//$("#main_view").css("margin-left","20vw");
+		$(".fun_frame").toggleClass("fun_frame_narrow");
+		//$(".fun_frame").css("width","20vw");
+		$("#contents_div").toggleClass("contents_div_narrow");
+		//$("#contents_div").css("width","calc(60vw - 2em)");
 		$("#left_pannal_inner").css("width","unset");
-		$("#contents_div").css("width","calc(60vw - 2em)");
 		localStorage.setItem('article_show_toc_'+_mode, 'show');
 	}else{
 		$("#left_pannal").addClass("hidden");
-		$("#main_view").css("margin-left","0");
-		$(".fun_frame").css("width","30vw");
+		$("#main_view").removeClass("main_view_narrow");
+		//$("#main_view").css("margin-left","0");
+		$(".fun_frame").removeClass("fun_frame_narrow");
+		//$(".fun_frame").css("width","30vw");
+		$("#contents_div").removeClass("contents_div_narrow");
+		//$("#contents_div").css("width","calc(70vw - 2em)");
 		$("#left_pannal_inner").css("width","unset");
-		$("#contents_div").css("width","calc(70vw - 2em)");
 		localStorage.setItem('article_show_toc_'+_mode, 'hide');
 	}
 }
@@ -363,7 +375,7 @@ function set_toc_visible(isVisible){
 	</div>
 
 	<div id="contents_view">
-		<div id="contents_div">
+		<div id="contents_div" class="contents_div">
 			<div id="summary"></div>
 			<div id="contents" class="content_inner <?php echo $contentClass;?>">
 				<?php echo $_local->gui->loading; ?>...

app/article/mobile.css

@@ -13,8 +13,12 @@
 	margin-bottom: auto;
 	padding-left: 0.5em;
 }
-#contents_div {
+.contents_div {
 	padding: 0;
+	width: calc(100vw - 2em);
+}
+.contents_div_narrow{
+	width: calc(100vw - 2em);
 }
 
 #main_view {

app/article/style.css

@@ -41,10 +41,17 @@
 	padding: 0 1em;
 	padding-top: 7em;
 	/*max-width: 1280px;*/
-	/*margin-left: 270px;*/
+	margin-left: 0;
 	margin-right: auto;
 	transition: all 0.5s ease;
 }
+.main_view_narrow{
+	margin-left:20vw;
+}
+
+.fun_frame_narrow{
+	width:20vw;
+}
 
 #left_pannal_inner {
     position: fixed;
@@ -71,7 +78,7 @@
 	border-bottom: 1px solid gray;
 	margin-right: 10px;
 	margin-bottom: 10px;
-	width: calc(30% - 1em)
+	width: 30vw
 	transition: all 0.5s ease;
 }
 .fun_frame .title {
@@ -98,10 +105,13 @@
 #contents_view {
 	display: flex;
 }
-#contents_div {
+.contents_div {
 	/*flex: 7;*/
 	padding: 0 1em 0 30px;
-	width: calc(70vw - 30px - 1em);
+	width: calc(70vw - 2em);
+}
+.contents_div_narrow{
+	width: calc(60vw - 2em);
 }
 #contents {
 	min-height: 400px;