Преглед на файлове

調整 Canon 頁面樣式

panya-abhinanda преди 5 години
родител
ревизия
d4954241d3
променени са 6 файла, в които са добавени 528 реда и са изтрити 388 реда
  1. 16 0
      .favorites.json
  2. 2 1
      .vscode/settings.json
  3. 156 102
      app/palicanon/index.php
  4. 146 150
      app/palicanon/palicanon.js
  5. 202 130
      app/pcdl/css/style.css
  6. 6 5
      app/pcdl/html_foot.php

+ 16 - 0
.favorites.json

@@ -22,5 +22,21 @@
         "workspaceRoot": "/Users/pannabhinanda/Documents/GitHub/mint",
         "workspacePath": "app/ucenter/user.php",
         "id": "Gzn2U0X5mR4wdoVK"
+    },
+    {
+        "type": "Directory",
+        "name": "/Users/pannabhinanda/Documents/GitHub/mint/app/palicanon",
+        "parent_id": null,
+        "workspaceRoot": "/Users/pannabhinanda/Documents/GitHub/mint",
+        "workspacePath": "app/palicanon",
+        "id": "6xoKe2dpJw3YN7BG"
+    },
+    {
+        "type": "Directory",
+        "name": "/Users/pannabhinanda/Documents/GitHub/mint/app/public/book_tag",
+        "parent_id": null,
+        "workspaceRoot": "/Users/pannabhinanda/Documents/GitHub/mint",
+        "workspacePath": "app/public/book_tag",
+        "id": "mspAzHVocFIxqJTu"
     }
 ]

+ 2 - 1
.vscode/settings.json

@@ -9,5 +9,6 @@
 	},
 	"svg.preview.background": "transparent",
 	"editor.fontSize": 15,
-	"editor.wordWrap": "on"
+	"editor.wordWrap": "on",
+	"editor.formatOnSave": true
 }

+ 156 - 102
app/palicanon/index.php

@@ -1,109 +1,163 @@
 <?PHP
 include "../pcdl/html_head.php";
 ?>
+
 <body>
-<script  src="../palicanon/palicanon.js"></script>
-<script  src="../term/term.js"></script>
+    <script src="../palicanon/palicanon.js"></script>
+    <script src="../term/term.js"></script>
 
-<?php
+    <?php
     require_once("../pcdl/head_bar.php");
-?>
+    ?>
 
-<style>
-    #main_video_win iframe{
-        width:100%;
-        height:100%;
-    }
-    #main_tag span{
-        margin: 2px;
-        padding: 2px 12px;
-        font-weight: 500;
-        transition-duration: 0.2s;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        justify-content: center;
-        font-size:110%;
-        border: unset;
-        border-radius: 0;
-        border-bottom: 2px solid var(--nocolor);
-    }
-    #main_tag span:hover{
-        background-color:unset;
-        color:unset;
-        border-color: var(--link-hover-color);
-    }
-    #main_tag .select{
-        border-bottom: 2px solid var(--link-color);
-    }
-    tag{
-    background-color: var(--btn-color);
-    margin: 0 0.5em;
-    padding: 3px 5px;
-    border-radius: 6px;
-    display:inline-flex;
-    border: 1.5px solid;
-    border-color: #70707036;
-    }
-    tag .icon:hover{
-        background-color: silver;
-    }
-    .sutta_row {
-    display: flex;
-    padding: 10px;
-    width: 100%;
-    border-bottom: 1px solid var(--border-line-color);
-}
-.sutta_row:hover {
-    background-color:var(--drop-bg-color);;
-}
-</style>
-<script>
-    var tag_level = <?php echo file_get_contents("../public/book_tag/tag_list.json"); ?>;
-</script>
-<?php
-//
-
-require_once "../path.php";
-require_once "../public/_pdo.php";
-require_once '../media/function.php';
-require_once '../public/function.php';
-
-echo "<div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>";
-echo "<div class='index_inner '>";
-echo "<div style='font-size:140%'>";
-echo "</div>";
-echo '<div id="main_tag"  style="">';
-echo '<span tag="sutta">Sutta</span>';
-echo '<span tag="vinaya">Vinaya</span>';
-echo '<span tag="abhidhamma">Abhidhamma</span>';
-echo '<span tag="mūla">Mūla</span>';
-echo '<span tag="aṭṭhakathā">Aṭṭhakathā</span>';
-echo '<span tag="ṭīkā">ṭīkā</span>';
-echo '<span tag="añña">añña</span>';
-echo '</div>';
-echo '<div id="tag_selected" class=""  style="padding-bottom:5px;margin:0.5em 0;"></div>';
-echo '<div level="0" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="1" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="2" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="3" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="4" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="5" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="100" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo '<div level="8" class="tag_others"  style="padding-bottom:5px;"></div>';
-echo "</div>";
-echo '</div>';
-?>
-<div id ="book_list" class='index_inner' style='display: flex;flex-wrap: wrap;'>
-
-</div>
-
-<script>
-$(document).ready(function(){
-    palicanon_onload();
-});
-</script>
-<?php
-include "../pcdl/html_foot.php";
-?>
+    <style>
+        #main_video_win iframe {
+            width: 100%;
+            height: 100%;
+        }
+
+        #main_tag {
+            font-size: 150%;
+            text-align: center;
+            margin: 5em 0;
+            transition: all 600ms ease
+        }
+
+        #main_tag span {
+            margin: 2px;
+            padding: 2px 12px;
+            font-weight: 500;
+            transition-duration: 0.2s;
+            cursor: pointer;
+            font-size: 120%;
+            border: unset;
+            border-radius: 0;
+            border-bottom: 2px solid var(--nocolor);
+            display: inline-block;
+        }
+
+        #main_tag span:hover {
+            background-color: unset;
+            color: unset;
+            border-color: var(--link-hover-color);
+        }
+
+        #main_tag .select {
+            border-bottom: 2px solid var(--link-color);
+        }
+
+        #tag_selected {
+            margin: 1em 0;
+        }
+
+        tag {
+            background-color: var(--btn-color);
+            margin: 2px;
+            padding: 2px 12px;
+            border-radius: 5px;
+            border: 1px solid #fe897c;
+        }
+
+        .tag-delete {
+            margin-left: 6px;
+            color: #f93e3e;
+            cursor: pointer;
+        }
+
+        .tag-delete:hover {
+            color: red;
+            font-weight: 700;
+        }
+
+        .tag_others {
+            margin: 10px 0;
+        }
+
+        .canon-tag {
+            background-color: #46a6d2;
+            border: 0;
+            border-radius: 6px;
+            color: white;
+            font-weight: 400;
+        }
+
+        .canon-tag:hover {
+            background-color: var(--link-hover-color);
+        }
+
+        .sutta_row {
+            display: grid;
+            align-items: center;
+            grid-template-columns: 100px 200px 100px auto;
+            width: 100%;
+            border-bottom: 1px solid var(--border-line-color);
+        }
+
+        .sutta_row div {
+            padding: 10px;
+            display: flex;
+            justify-items: center;
+        }
+
+        .sutta_row:hover {
+            background-color: var(--drop-bg-color);
+        }
+
+        @media screen and (max-width:800px) {
+            .sutta_row {
+                grid-template-columns: 100px 1fr 1fr;
+            }
+
+            .sutta_tag {
+                grid-column: 1 / 4;
+            }
+        }
+    </style>
+    <script>
+        var tag_level = <?php echo file_get_contents("../public/book_tag/tag_list.json"); ?>;
+    </script>
+    <?php
+    //
+
+    require_once "../path.php";
+    require_once "../public/_pdo.php";
+    require_once '../media/function.php';
+    require_once '../public/function.php';
+
+    echo "<div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>";
+    echo "<div class='index_inner '>";
+    echo "<div style='font-size:140%'>";
+    echo "</div>";
+    echo '<div id="main_tag"  style="">';
+    echo '<span tag="sutta">Sutta</span>';
+    echo '<span tag="vinaya">Vinaya</span>';
+    echo '<span tag="abhidhamma">Abhidhamma</span>';
+    echo '<span tag="mūla">Mūla</span>';
+    echo '<span tag="aṭṭhakathā">Aṭṭhakathā</span>';
+    echo '<span tag="ṭīkā">ṭīkā</span>';
+    echo '<span tag="añña">añña</span>';
+    echo '</div>';
+    echo '<div id="tag_selected"></div>';
+    echo '<div level="0" class="tag_others"></div>';
+    echo '<div level="1" class="tag_others"></div>';
+    echo '<div level="2" class="tag_others"></div>';
+    echo '<div level="3" class="tag_others"></div>';
+    echo '<div level="4" class="tag_others"></div>';
+    echo '<div level="5" class="tag_others"></div>';
+    echo '<div level="100" class="tag_others"></div>';
+    echo '<div level="8" class="tag_others"></div>';
+    echo "</div>";
+    echo '</div>';
+    ?>
+    <div id="book_list" class='index_inner' style='display: flex;flex-wrap: wrap;'>
+
+    </div>
+
+    <script>
+        $(document).ready(function() {
+            palicanon_onload();
+        });
+    </script>
+    <?php
+    include "../pcdl/html_foot.php";
+    ?>

+ 146 - 150
app/palicanon/palicanon.js

@@ -7,177 +7,173 @@ var arrMyTerm = new Array();
 palicanon_load_term();
 
 function palicanon_onload() {
-	$("span[tag]").click(function () {
-		$(this).siblings().removeClass("select");
-		$(this).addClass("select");
-		main_tag = $(this).attr("tag");
-		list_tag = new Array();
-		tag_changed();
-		render_tag_list();
-	});
+    $("span[tag]").click(function() {
+        $(this).siblings().removeClass("select");
+        $(this).addClass("select");
+        main_tag = $(this).attr("tag");
+        list_tag = new Array();
+        tag_changed();
+        render_tag_list();
+    });
 
-	$("#tag_input").keypress(function () {
-		tag_render_others();
-	});
+    $("#tag_input").keypress(function() {
+        tag_render_others();
+    });
 }
 
 function palicanon_load_term() {
-	$.post(
-		"../term/get_term_index.php",
-		{
-			lang: "zh-hans",
-		},
-		function (data) {
-			let result = JSON.parse(data);
-			if (result.status == 0) {
-				arrMyTerm = result.data;
-			} else {
-				alert(result.error);
-			}
-		}
-	);
+    $.post(
+        "../term/get_term_index.php", {
+            lang: "zh-hans",
+        },
+        function(data) {
+            let result = JSON.parse(data);
+            if (result.status == 0) {
+                arrMyTerm = result.data;
+            } else {
+                alert(result.error);
+            }
+        }
+    );
 }
 
 function tag_changed() {
-	let strTags = "";
-	if (list_tag.length > 0) {
-		strTags = main_tag + "," + list_tag.join();
-	} else {
-		strTags = main_tag;
-	}
-	console.log(strTags);
-	$.get(
-		"book_tag.php",
-		{
-			tag: strTags,
-		},
-		function (data, status) {
-			let arrBookList = JSON.parse(data);
-			let html = "";
-			allTags = new Array();
-			for (const iterator of arrBookList) {
-				let tag0 = "";
-				let tags = iterator[0].tag.split("::");
-				let currTag = new Array();
-				currTag[main_tag] = 1;
-				for (const scondTag of list_tag) {
-					currTag[scondTag] = 1;
-				}
-				for (let tag of tags) {
-					if (tag.slice(0, 1) == ":") {
-						tag = tag.slice(1);
-					}
-					if (tag.slice(-1) == ":") {
-						tag = tag.slice(0, -1);
-					}
-					if (currTagLevel0.hasOwnProperty(tag)) {
-						tag0 = tag;
-					}
-					if (!currTag.hasOwnProperty(tag)) {
-						if (allTags.hasOwnProperty(tag)) {
-							allTags[tag] += 1;
-						} else {
-							allTags[tag] = 1;
-						}
-					}
-				}
+    let strTags = "";
+    if (list_tag.length > 0) {
+        strTags = main_tag + "," + list_tag.join();
+    } else {
+        strTags = main_tag;
+    }
+    console.log(strTags);
+    $.get(
+        "book_tag.php", {
+            tag: strTags,
+        },
+        function(data, status) {
+            let arrBookList = JSON.parse(data);
+            let html = "";
+            allTags = new Array();
+            for (const iterator of arrBookList) {
+                let tag0 = "";
+                let tags = iterator[0].tag.split("::");
+                let currTag = new Array();
+                currTag[main_tag] = 1;
+                for (const scondTag of list_tag) {
+                    currTag[scondTag] = 1;
+                }
+                for (let tag of tags) {
+                    if (tag.slice(0, 1) == ":") {
+                        tag = tag.slice(1);
+                    }
+                    if (tag.slice(-1) == ":") {
+                        tag = tag.slice(0, -1);
+                    }
+                    if (currTagLevel0.hasOwnProperty(tag)) {
+                        tag0 = tag;
+                    }
+                    if (!currTag.hasOwnProperty(tag)) {
+                        if (allTags.hasOwnProperty(tag)) {
+                            allTags[tag] += 1;
+                        } else {
+                            allTags[tag] = 1;
+                        }
+                    }
+                }
 
-				//html += "<div style='width:100%;'>";
-				html += "<div class='sutta_row' >";
-				html += "<div class='' style='flex:1;padding: 0 3px;'>" + tag0 + "</div>";
-				html +=
-					"<div style='flex:3;font-weight:700'><a href='../reader/?view=chapter&book=" +
-					iterator[0].book +
-					"&para=" +
-					iterator[0].para +
-					"' target = '_blank'>" +
-					iterator[0].title +
-					"</a></div>";
-				html += "<div style='flex:3;'>book:" + iterator[0].book + " para:" + iterator[0].para + "</div>";
-				html += "<div style='flex:5;overflow-wrap: anywhere;'>tag=" + iterator[0].tag + "</div>";
-				html += "</div>";
-				//html += "</div>";
-			}
+                //html += "<div style='width:100%;'>";
+                html += "<div class='sutta_row' >";
+                html += "<div class='sutta_box'>" + tag0 + "</div>";
+                html +=
+                    "<div class='sutta_box'><a href='../reader/?view=chapter&book=" +
+                    iterator[0].book +
+                    "&para=" +
+                    iterator[0].para +
+                    "' target = '_blank'>" +
+                    iterator[0].title +
+                    "</a></div>";
+                html += "<div class='sutta_box'>book:" + iterator[0].book + " para:" + iterator[0].para + "</div>";
+                html += "<div class='sutta_tag'>tag=" + iterator[0].tag + "</div>";
+                html += "</div>";
+                //html += "</div>";
+            }
 
-			let newTags = new Array();
-			for (const oneTag in allTags) {
-				if (allTags[oneTag] < arrBookList.length) {
-					newTags[oneTag] = allTags[oneTag];
-				}
-			}
-			allTags = newTags;
-			allTags.sort(sortNumber);
-			tag_render_others();
-			$("#book_list").html(html);
-		}
-	);
+            let newTags = new Array();
+            for (const oneTag in allTags) {
+                if (allTags[oneTag] < arrBookList.length) {
+                    newTags[oneTag] = allTags[oneTag];
+                }
+            }
+            allTags = newTags;
+            allTags.sort(sortNumber);
+            tag_render_others();
+            $("#book_list").html(html);
+        }
+    );
 }
 
 function tag_render_others() {
-	let strOthersTag = "";
-	currTagLevel0 = new Array();
-	$(".tag_others").html("");
-	for (const key in allTags) {
-		if (allTags.hasOwnProperty(key)) {
-			if ($("#tag_input").val().length > 0) {
-				if (key.indexOf($("#tag_input").val()) >= 0) {
-					strOthersTag = "<button onclick =\"tag_click('" + key + "')\" >" + key + "</button>";
-				}
-			} else {
-				let termKey = term_lookup_my(key, "", getCookie("userid"), "zh-cn");
-				let keyname = key;
-				if (termKey) {
-					keyname = termKey.meaning;
-				}
-				strOthersTag = "<button onclick =\"tag_click('" + key + "')\" >" + keyname + "</button>";
-			}
-			let thisLevel = 100;
-			if (tag_level.hasOwnProperty(key)) {
-				thisLevel = tag_level[key].level;
-				if (tag_level[key].level == 0) {
-					currTagLevel0[key] = 1;
-				}
-			}
-			$(".tag_others[level='" + thisLevel + "']").html(
-				$(".tag_others[level='" + thisLevel + "']").html() + strOthersTag
-			);
-		}
-	}
+    let strOthersTag = "";
+    currTagLevel0 = new Array();
+    $(".tag_others").html("");
+
+    document.getElementById('main_tag').style.margin = 1 + "em";
+    document.getElementById('main_tag').style.fontSize = 100 + "%";
+
+    for (const key in allTags) {
+        if (allTags.hasOwnProperty(key)) {
+            if ($("#tag_input").val().length > 0) {
+                if (key.indexOf($("#tag_input").val()) >= 0) {
+                    strOthersTag = "<button class=\"canon-tag\" onclick =\"tag_click('" + key + "')\" >" + key + "</button>";
+                }
+            } else {
+                let termKey = term_lookup_my(key, "", getCookie("userid"), "zh-cn");
+                let keyname = key;
+                if (termKey) {
+                    keyname = termKey.meaning;
+                }
+                strOthersTag = "<button class=\"canon-tag\" onclick =\"tag_click('" + key + "')\" >" + keyname + "</button>";
+            }
+            let thisLevel = 100;
+            if (tag_level.hasOwnProperty(key)) {
+                thisLevel = tag_level[key].level;
+                if (tag_level[key].level == 0) {
+                    currTagLevel0[key] = 1;
+                }
+            }
+            $(".tag_others[level='" + thisLevel + "']").html(
+                $(".tag_others[level='" + thisLevel + "']").html() + strOthersTag
+            );
+        }
+    }
 }
 
 function tag_click(tag) {
-	list_tag.push(tag);
-	render_tag_list();
-	tag_changed();
+    list_tag.push(tag);
+    render_tag_list();
+    tag_changed();
 }
 
 function render_tag_list() {
-	let strListTag = gLocal.gui.selected + ":";
-	for (const iterator of list_tag) {
-		strListTag += "<tag><span style='margin-right: 5px; font-weight: bold;'>" + iterator + "</span>";
-		strListTag += "<span style='display: contents;' onclick =\"tag_remove('" + iterator + "')\">";
-		strListTag +=
-			"<svg t= '1598638386903' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1223' width='16' height='16'>";
-		strListTag +=
-			"<path fill='#707070' p-id='1224' d='M512 620.544l253.3376 253.3376a76.6976 76.6976 0 1 0 108.544-108.544L620.6464 512l253.2352-253.3376a76.6976 76.6976 0 1 0-108.544-108.544L512 403.3536 258.6624 150.1184a76.6976 76.6976 0 1 0-108.544 108.544L403.3536 512 150.1184 765.3376a76.6976 76.6976 0 1 0 108.544 108.544L512 620.6464z' >";
-		strListTag += "</path></svg>";
-		strListTag += "</span></tag>";
-	}
-	strListTag +=
-		"<div style='display:inline-block;width:20em;'><input id='tag_input' type='input' placeholder='tag' size='20'  /></div>";
-	$("#tag_selected").html(strListTag);
+    let strListTag = gLocal.gui.selected + ":";
+    for (const iterator of list_tag) {
+        strListTag += "<tag><span class=\"textt\">" + iterator + "</span>";
+        strListTag += "<span class=\"tag-delete\" onclick =\"tag_remove('" + iterator + "')\">✕</span></tag>";
+    }
+    strListTag +=
+        "<div style='display:inline-block;width:20em;'><input id='tag_input' type='input' placeholder='tag' size='20'  /></div>";
+    $("#tag_selected").html(strListTag);
 }
 
 function tag_remove(tag) {
-	for (let i = 0; i < list_tag.length; i++) {
-		if (list_tag[i] == tag) {
-			list_tag.splice(i, 1);
-		}
-	}
-	render_tag_list();
-	tag_changed();
+    for (let i = 0; i < list_tag.length; i++) {
+        if (list_tag[i] == tag) {
+            list_tag.splice(i, 1);
+        }
+    }
+    render_tag_list();
+    tag_changed();
 }
 
 function sortNumber(a, b) {
-	return b - a;
-}
+    return b - a;
+}

Файловите разлики са ограничени, защото са твърде много
+ 202 - 130
app/pcdl/css/style.css


+ 6 - 5
app/pcdl/html_foot.php

@@ -8,7 +8,7 @@
 		</div>
 		<div class="nav_text btn_color">推荐</div>
 	</div>
-	
+
 	<div class="navbar_button" onclick="main_menu_show(1)">
 		<div class="nav_icon">
 			<svg class="small_icon">
@@ -17,7 +17,7 @@
 		</div>
 		<div class="nav_text btn_color">三藏</div>
 	</div>
-	
+
 	<div class="navbar_button" onclick="main_menu_show(2)">
 		<div class="nav_icon">
 			<svg class="small_icon">
@@ -35,7 +35,7 @@
 		</div>
 		<div class="nav_text btn_color">搜索</div>
 	</div>
-	
+
 
 	<div class="navbar_button" onclick="main_menu_show(3)">
 		<div class="nav_icon">
@@ -46,8 +46,8 @@
 		<div class="nav_text btn_color">我的</div>
 	</div>
 </div>
-	
-<div class="foot_div" style="text-align: center; font-size: x-large; font-weight: bold; color: #3333;">
+
+<div class="foot_div">
 	<div>wikipali @2020</div>
 	<div>Powered by PCD Suite</div>
 </div>
@@ -56,4 +56,5 @@
 	guide_init();
 </script>
 </body>
+
 </html>

Някои файлове не бяха показани, защото твърде много файлове са промени