Explorar o código

article 阅读手机优化

visuddhinanda %!s(int64=4) %!d(string=hai) anos
pai
achega
d820b210be
Modificáronse 3 ficheiros con 70 adicións e 6 borrados
  1. 9 3
      app/article/index.php
  2. 19 2
      app/article/mobile.css
  3. 42 1
      app/article/style.css

+ 9 - 3
app/article/index.php

@@ -148,6 +148,7 @@ require_once "../pcdl/html_head.php";
 <style>
 ul.fancytree-container{
 	border:unset;
+	width: max-content;
 }
 .fancytree-container .active {
     font-weight: 700;
@@ -372,11 +373,16 @@ function set_toc_visible(isVisible){
 
 <script>
 	$(document).ready(function(){
-		if(localStorage.getItem('article_show_toc_'+_mode)=="hide"){
-			set_toc_visible(false);
+		if(window.innerWidth>800){
+			if(localStorage.getItem('article_show_toc_'+_mode)=="hide"){
+				set_toc_visible(false);
+			}else{
+				set_toc_visible(true);
+			}			
 		}else{
-			set_toc_visible(true);
+			set_toc_visible(false);
 		}
+
 		
 		article_add_dlg_init("article_add_div");
 	ntf_init();				

+ 19 - 2
app/article/mobile.css

@@ -39,7 +39,7 @@ note:hover .ref {
 }
 
 #left_pannal{
-	display:none;
+	/*display:none;*/
 }
 
 .main_view {
@@ -57,5 +57,22 @@ note:hover .ref {
 	width: 100%;
 }
 #toc_content{
-	width: 100%;
+    width: 100%;
+    max-width: unset;
+    max-height: unset;
+    height: 100%;
+}
+#right_float_pannal {
+	position: fixed;
+	height: 70%;
+	top: 100%;
+	left: 0;
+	width:100%
+}
+.right_float_min #right_float_pannal {
+    position: fixed;
+    top: 30%;
+    left: 0;
+    width: 100%;
+    height: 70%;
 }

+ 42 - 1
app/article/style.css

@@ -51,7 +51,7 @@
     height: 100%;
 	/*width:300px;*/
 	overflow-x: hidden;
-	overflow-y: hidden;
+	overflow-y: scroll;
 }
 
 #toc_content{
@@ -60,6 +60,7 @@
 	max-width:270px;
 	background-color: var(--bg-color);
     border-bottom: 1px solid var(--border-line-color);
+	overflow-y: unset;
 }
 
 .fun_frame {
@@ -226,4 +227,44 @@ img {
 #article_path chapter:hover {
     color: var(--link-hover-color);
     text-decoration: underline;
+}
+.right_float_min #right_float_pannal {
+	left: calc(100% - 30vw + 0.6em);
+}
+#right_float_pannal {
+	position: fixed;
+	height: calc(100% - 7.3em);
+	top: 7.3em;
+	left: 100%;
+	width: calc(30vw - 0.6em);
+	min-width: 20vw;
+	color: var(--btn-color);
+	background-color: var(--tool-bg-color);
+	z-index: 20;
+	-webkit-transition-duration: 0.4s;
+	transition-duration: 0.4s;
+	-webkit-contain: strict;
+	contain: strict;
+	z-index: 51;
+}
+#right_float_pannal > iframe {
+	width: 100%;
+	height: 100%;
+}
+.right_float_max #right_float_pannal {
+	left: 50%;
+	width: 50%;
+}
+
+
+#right_float_pannal > #tool_bar {
+	/*position: absolute;*/
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+}
+#right_float_pannal > #tool_bar svg {
+	fill: var(--bg-color);
+	height: 2em;
+	width: 2em;
 }