著作頁面UI更新（其餘分頁仍待調整）

app/collect/index.js

@@ -1,59 +1,61 @@
 function collect_load(begin = 0) {
-	$.get(
-		"list.php",
-		{
-			begin: begin,
-		},
-		function (data, status) {
-			let arrCollectList = JSON.parse(data);
-			let html = "";
-			for (const iterator of arrCollectList.data) {
-				html += "<div style='width:25%;padding:0.5em;'>";
-				html += '<div style="position: relative;">';
-				html +=
-					"<div class='' style='position: absolute;background-color: darkred;color: white;padding: 0 6px;right: 0;'>" +
-					gLocal.gui.ongoing +
-					"</div>";
-				html += "</div>";
-				html += "<div class='card' style='padding:10px;'>";
-				html += "<div class='card_info'>"; //卡片信息开始
-				html += "<div style='font-weight:700'>";
-				html += "<a href='../article/?collect=" + iterator.id + "'>" + iterator.title + "</a>";
-				html += "</div>";
+    $.get(
+        "list.php", {
+            begin: begin,
+        },
+        function(data, status) {
+            let arrCollectList = JSON.parse(data);
+            let html = "";
+            for (const iterator of arrCollectList.data) {
 
-				if (iterator.subtitle && iterator.subtitle != "null") {
-					html += "<div style=''>" + iterator.subtitle + "</div>";
-				}
+                html += "<div class='card collect_card'>";
+                html +=
+                    "<div class='card_state'>" +
+                    gLocal.gui.ongoing +
+                    "</div>";
+                html += "<div class='card_info'>"; //卡片信息开始
+                html += "<div class='collect_title'>";
+                html += "<a href='../article/?collect=" + iterator.id + "'>" + iterator.title + "</a>";
+                html += "</div>";
 
-				html += "<div style=''>" + iterator.username.nickname + "</div>";
-				if (iterator.summary && iterator.summary != "null") {
-					html += "<div style=''>" + iterator.summary + "</div>";
-				}
+                if (iterator.subtitle && iterator.subtitle != "null") {
+                    html += "<div class='subtitle'>" + iterator.subtitle + "</div>";
+                }
+                if (iterator.summary && iterator.summary != "null") {
+                    html += "<div class='summary'>" + iterator.summary + "</div>";
+                }
+                if (iterator.tag) {
+                    html += "<div style='overflow-wrap: anywhere;'>" + iterator.tag + "</div>";
+                }
+                html += "<div style='margin-top:10px'>" + iterator.username.nickname + "</div>";
 
-				if (iterator.tag) {
-					html += "<div style='overflow-wrap: anywhere;'>" + iterator.tag + "</div>";
-				}
-				html += "</div>"; //卡片信息关闭
-				const article_limit = 4;
-				let article_count = 0;
-				let article_list = JSON.parse(iterator.article_list);
-				//章节预览链接
-				html += "<div class='article_title_link' >";
-				for (const article of article_list) {
-					html += "<div style='white-space:nowrap;'>";
-					html +=
-						"<a href='../article/?id=" + article.article + "' target='_blank'>" + article.title + "</a>";
-					html += "</div>";
-					article_count++;
-					if (article_count > article_limit) {
-						break;
-					}
-				}
-				html += "</div>"; //章节预览链接结束
-				html += "</div>"; //card内容 结束
-				html += "</div>"; //卡片外框结束
-			}
-			$("#book_list").html(html);
-		}
-	);
-}
+                html += "</div>"; //卡片信息关闭
+                const article_limit = 4;
+                let article_count = 0;
+                let article_list = JSON.parse(iterator.article_list);
+                //章节预览链接
+                html += "<div class='article_title_link' >";
+
+                //!!!!!!請加上不同語言！！！！！
+                html += "<div style='font-weight:700;'>目錄</div>";
+
+                //章節列表
+                html += "<div>";
+                for (const article of article_list) {
+                    html += "<div style='border-top: #707070 1px solid; text-overflow: ellipsis; line-height:2.2em;'>";
+                    html +=
+                        "<a style='color:var(--main_color);font-weight:700;' href='../article/?id=" + article.article + "' target='_blank'>" + article.title + "</a>";
+                    html += "</div>";
+                    article_count++;
+                    if (article_count > article_limit) {
+                        break;
+                    }
+                }
+                html += "</div>"; //章節列表結束
+                html += "</div>"; //章节预览链接结束
+                html += "</div>"; //card内容 结束
+            }
+            $("#book_list").html(html);
+        }
+    );
+}

app/collect/index.php

@@ -1,71 +1,164 @@
 <?PHP
 include "../pcdl/html_head.php";
 ?>
+
 <body>
 
-<?php
+    <?php
     require_once("../pcdl/head_bar.php");
-?>
-	<script language="javascript" src="../collect/index.js"></script>
-
-<style>
-    #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;
-    }
-    #footer_nav{
-        display:none;
-    }
-    .index_inner{
-        display: flex;
-        flex-wrap: wrap;
-    }
-    .index_inner .icon_btn .icon{
-        fill: var(--btn-hover-bg-color);
-    }
-    .index_inner .icon_btn:hover .icon{
-        fill: var(--btn-bg-color);
-    }
-    .article_title_link{
-        white-space:nowrap;
-        overflow-x: scroll;
-    }
-    .card{
-        height: 20vh;
-        overflow-y: scroll;
-    }
-</style>
+    ?>
+    <script language="javascript" src="../collect/index.js"></script>
+
+    <style>
+        h1 {
+            font-size: 42px;
+            font-weight: 700;
+            margin: 0.3em 0;
+        }
+
+        h2 {
+            font-size: 18px;
+            font-weight: 700;
+            margin: 0;
+        }
+
+
+        .disable {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        #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;
+        }
+
+        #footer_nav {
+            display: none;
+        }
+
+        .index_inner .icon_btn .icon {
+            fill: var(--btn-hover-bg-color);
+        }
+
+        .index_inner .icon_btn:hover .icon {
+            fill: var(--btn-bg-color);
+        }
+
+        .article_title_link {
+            margin-top: 18px;
+            display: grid;
+            grid-template-columns: 80px auto;
+        }
+
+        .collect_card {
+            display: block;
+            padding: 1rem 1.5rem;
+            box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
+        }
+
+        .collect_title {
+            font-size: 20px;
+            font-weight: 700;
+
+        }
+
+        .subtitle {
+            color: gray;
+            text-overflow: ellipsis;
+            margin-bottom: 10px;
+        }
+
+        .summary {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+            -webkit-line-clamp: 2;
+        }
+
+        .collect_head_bar {
+            background-color: #212121;
+            height: 280px;
+            padding: 30px;
+            color: white;
+        }
+
+        .collect_section {
+            background-color: #f5f5f5;
+        }
+
+        .section_inner {
+            max-width: 960px;
+            margin: 0 auto;
+        }
+
+        .right_content,
+        .left_content {
+            width: 100%;
+            padding: 1rem;
+        }
+
+        .search_section {
+            background-color: #3a3a3a;
+            text-align: center;
+            line-height: 3.5rem;
+            position: sticky;
+            top: 50px;
+            z-index: 80;
+        }
+
+        .tag {
+            background-color: #6374EF;
+            border-radius: 4px;
+            color: white;
+            padding: 3px 6px;
+            margin: 0 5px 5px 0;
+        }
+    </style>
+    <style media="screen and (min-width:800px)">
+        .collect_section .section_inner {
+            display: grid;
+            grid-template-columns: auto 360px;
+        }
+    </style>
+    <!--
 <style media="screen and (max-width:800px)">
 #right_pannal{
 	display:none;
@@ -100,67 +193,105 @@ include "../pcdl/html_head.php";
     width:100% !important;
 }
 
-</style>
-<?php
-//
+</style>-->
+    <?php
+    //
 
-require_once "../path.php";
-require_once "../public/_pdo.php";
-require_once '../media/function.php';
-require_once '../public/function.php';
+    require_once "../path.php";
+    require_once "../public/_pdo.php";
+    require_once '../media/function.php';
+    require_once '../public/function.php';
 
-?>
-<div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>
-    <div class='index_inner '>
-        <div style='font-size:140%;display:flex;'>
-            <span style="display:inline-block;width:20em;"><input type="input" placeholder=<?php echo $_local->gui->search.'：'.$_local->gui->title.'&nbsp;OR&nbsp;'.$_local->gui->author;?> style="background-color:var(--btn-bg-color);" /></span>
+    ?>
+    <div id='course_head_bar' class='collect_head_bar'>
+        <div class='section_inner'>
+            <h1>著作</h1>
+            <div style='width:30em'>各種從經典中擷取的文章，所彙集成的文，其中有多人翻譯的篇章等等的各種。</div>
+            <!--
+            <div id="main_tag">
+                <span tag="vinaya">sīla</span>
+                <span tag="sutta">samadhi</span>
+                <span tag="abhidhamma">paññā</span>
+                <span tag="mūla">vatthu</span>
+            </div>
+            <div id="tag_selected" class="" style="padding-bottom:5px;margin:0.5em 0;"></div>-->
+        </div>
+    </div>
+
+    <div class="search_section">
+        <div style='font-size:140%;'>
+            <span style="display:inline-block;width:20em;"><input type="input" placeholder=<?php echo $_local->gui->search . '：' . $_local->gui->title . '&nbsp;OR&nbsp;' . $_local->gui->author; ?> style="background-color:var(--new-tool-input-text-bg); border:solid 1px var(--new-tool-btn-border)" /></span>
             <button class="icon_btn">
                 <svg class="icon">
-					<use xlink:href="../studio/svg/icon.svg#ic_search"></use>
-				</svg>
+                    <use xlink:href="../studio/svg/icon.svg#ic_search"></use>
+                </svg>
             </button>
         </div>
-        <div id="main_tag">
-            <span tag="vinaya">sīla</span>
-            <span tag="sutta">samadhi</span>
-            <span tag="abhidhamma">paññā</span>
-            <span tag="mūla">vatthu</span>
-        </div>
-        <div id="tag_selected" class=""  style="padding-bottom:5px;margin:0.5em 0;"></div>
-    <div style="display:flex;justify-content: space-between;width: 30vw;">
-        <div level="0" class="tag_others"  style="padding-bottom:5px;"><?php echo $_local->gui->author;?>：</div>
-        <div level="1" class="tag_others"  style="padding-bottom:5px;"><?php echo $_local->gui->language;?>：</div>
-        <div level="7" class="tag_others"  style="padding-bottom:5px;">
-            <select>
-                <option><?php echo $_local->gui->all;?></option>
-                <option><?php echo $_local->gui->ongoing;?></option>
-                <option><?php echo $_local->gui->completed;?></option>
-            </select>
-        </div>
-        <div level="8" class="tag_others"  style="padding-bottom:5px;">
-            <select>
-                <option><?php echo $_local->gui->popular;?></option>
-                <option><?php echo $_local->gui->recommendation;?></option>
-                <option><?php echo $_local->gui->collection;?></option>
-                <option><?php echo $_local->gui->rates;?></option>
-                <option><?php echo $_local->gui->updated;?></option>
-            </select>
+    </div>
+
+    <div class="collect_section">
+        <div class="section_inner">
+            <div class="left_content">
+                <div style="display:flex;">
+                    <h2 style="margin-right:auto;">文集</h2>
+                    <div level="7" class="tag_others" style="padding-bottom:5px; margin-right:5px;">
+                        <select>
+                            <option><?php echo $_local->gui->all; ?></option>
+                            <option><?php echo $_local->gui->ongoing; ?></option>
+                            <option><?php echo $_local->gui->completed; ?></option>
+                        </select>
+                    </div>
+                    <div level="8" class="tag_others" style="padding-bottom:5px;">
+                        <select>
+                            <option><?php echo $_local->gui->popular; ?></option>
+                            <option><?php echo $_local->gui->recommendation; ?></option>
+                            <option><?php echo $_local->gui->collection; ?></option>
+                            <option><?php echo $_local->gui->rates; ?></option>
+                            <option><?php echo $_local->gui->updated; ?></option>
+                        </select>
+                    </div>
+                </div>
+                <div id="book_list">
+                </div>
+            </div>
+            <div class="right_content">
+                <h2>熱門主題</h2>
+                <div class="disable" style="display:flex; margin:1em 0; flex-wrap:wrap;">
+                    <div class="tag">sīla</div>
+                    <div class="tag">smādhi</div>
+                    <div class="tag">paññā</div>
+                    <div class="tag">本生</div>
+                    <div class="tag">visuddhimaga</div>
+                    <div class="tag">入出息</div>
+                </div>
+                <h2><?php echo $_local->gui->author; ?></h2>
+                <div class="disable" style="margin:1em 0;">
+                    <div class="list_with_head noselect">
+                        <div class="head"><span class="head_img">Ko</span></div>
+                        <div class="channal_list">Visuddhinanda Bhikkhu</div>
+                    </div>
+                    <div class="list_with_head noselect">
+                        <div class="head"><span class="head_img">Ko</span></div>
+                        <div class="channal_list">Kosalla Bhikkhu</div>
+                    </div>
+                    <div class="list_with_head noselect">
+                        <div class="head"><span class="head_img">Ko</span></div>
+                        <div class="channal_list">Paññābhinanda</div>
+                    </div>
+                </div>
+                <h2><?php echo $_local->gui->language; ?></h2>
+            </div>
         </div>
+
     </div>
+    <div id="page_bottom" style="height:10em;">
+        <?php echo $_local->gui->loading; ?>
     </div>
-</div>
-
-<div id ="book_list" class='index_inner'>
-
-</div>
-<div id="page_bottom" style="height:10em;">
-    <?php echo $_local->gui->loading;?>
-</div>
-<script>
-$(document).ready(function(){
-    collect_load();
-});
-</script>
-<?php
-include "../pcdl/html_foot.php";
-?>
+    <script>
+        $(document).ready(function() {
+            collect_load();
+        });
+    </script>
+    <?php
+    include "../pcdl/html_foot.php";
+    ?>

app/pcdl/html_head.php

@@ -161,7 +161,6 @@ if (isset($_GET["language"])) {
 		}
 
 		.index_inner {
-
 			margin-left: auto;
 			margin-right: auto;
 		}

app/studio/css/color_day.css

@@ -38,4 +38,6 @@
     --new-tool-btn-border: #7B7B7B;
     --new-tool-btn: #CDCDCD;
     --new-tool-content-disabled: #989898;
+    --new-tool-input-text-bg: #171717;
+    --new-tag-bg: #6374EF;
 }