:art: 选经主菜单美化

public/app/palicanon/index1.php

@@ -37,6 +37,10 @@ require_once '../public/function.php';
     display:flex;
     max-width: 30vh;
 }
+#left-bar{
+    flex: 2;
+    background-color: var(--box-bg-color2);
+}
 .more_info{
     font-size:80%;
     color: var(--main-color1);
@@ -76,51 +80,109 @@ require_once '../public/function.php';
 .chapter_list .more_info {
     display: block;
 }
+
+.filter>.inner {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: var(--input-bg-color);
+}
+
+.main_menu {
+    font-size: 100%;
+    text-align: center;
+    margin: 0 1em;
+    transition: all 600ms ease;
+    text-transform: capitalize;
+}
+.main_menu>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_menu>.select {
+    border-bottom: 2px solid var(--link-color);
+}
+.main_menu>span>a {
+    color:unset;
+}
+.main_menu span:hover {
+    background-color: unset;
+    color: unset;
+    border-color: var(--link-hover-color);
+}
+select#tag_category_index option {
+    background-color: gray;
+}
 </style>
 
+<?php
+    if(isset($_GET["view"])){
+        $_view = $_GET["view"];
+    }else{
+        $_view = "community";
+    }
+?>
+
 <div style="display:flex;">
-    <div id='left-bar' style="flex:2;">
+    <div id='left-bar' >
         <div id='left-bar-inner'>
-            <div class="filter">
-                <div class="title">分类标签</div>
-                <div style="width:100%">
-                    <span>风格</span>
-                    <select id="tag_category_index" onchange="TagCategoryIndexchange(this)">
-                    </select>
+            <div class="filter submenu">
+                <div class="title submenu_title" style="flex;">
+                    <span>分类标签</span>
+                    <span>
+                            <select id="tag_category_index" onchange="TagCategoryIndexchange(this)">
+                            </select>
+                    </span>
+                </div>
+                <div class='inner' >
+                    <div id='tag-category' >
+                    
+                    </div>
                 </div>
-                <div id='tag-category' >
+            </div>
+            <div class="filter submenu">
+                <div class="title submenu_title">作者</div>
+                <div class='inner' id='filter-author' >
                 
                 </div>
             </div>
-            <div class="filter">
-                <div class="title">作者</div>
-                <div id='filter-author' >
+            <div class="filter submenu">
+                <div class="title submenu_title">语言</div>
+                <div class='inner' id='filter-lang' >
                 
                 </div>
             </div>
-            <div class="filter">
-                <div class="title">语言</div>
-                <div id='filter-lang' >
+            <div class="filter submenu">
+                <div class="title submenu_title">类型</div>
+                <div class='inner' id='filter-type' >
                 
                 </div>
             </div>
         </div>
     </div>
-    <div id='course_head_bar' style='flex:6;background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>
+    <div id='course_head_bar' style='flex:6;background-color:var(--tool-bg-color1);padding:0 10px 10px 10px;'>
         <div class='index_inner '>
             <div style='display:flex;justify-content: space-between;'>
-                <div style=''>
-                    <a href='index1.php?view=community'>社区</a>
-                    <a href='index1.php?view=category'>分类</a>
-                    <a href='index1.php?view=my'>我的</a>
-                </div>
+                <div> </div>
                 <div style=''>
                     <select onchange='viewChanged(this)'>
+                        <option value='list'>列表</option>                    
                         <option value='card'>卡片</option>
-                        <option value='list'>列表</option>
                     </select>
                 </div>
             </div>
+            <div>
+                <div class='main_menu' id = 'main_menu'>
+
+                </div>
+            </div>
             <div id="main_tag"  style="display:none;">
                 <span tag="sutta" title="sutta"></span>
                 <span tag="vinaya"  title="vinaya"></span>
@@ -154,7 +216,7 @@ require_once '../public/function.php';
             <div id='bread-crumbs'></div>
             <div class='index_inner'>
                 <div id="chapter_shell" class="chapter_list" >
-                    <div id="list_shell_1" class="show book_view" level="1">
+                    <div id="list_shell_1" class="show" level="1">
                         <ul id="list-1" class="grid" level="1" >
                         </ul>
                         <button>More</button>
@@ -239,6 +301,7 @@ require_once '../public/function.php';
 
     <script>
         $(document).ready(function() {
+            
             let indexFilename = localStorage.getItem('palicanon_tag_category');
             if(!indexFilename){
                 indexFilename = "defualt";
@@ -247,11 +310,9 @@ require_once '../public/function.php';
             loadTagCategoryIndex();
             <?php
             if(isset($_GET["view"])){
-                $_view = $_GET["view"];
                 echo "_view = '{$_GET["view"]}';";
-            }else{
-                $_view = "category";
             }
+            
             switch ($_view) {
                 case 'community':
                     echo "community_onload();";
@@ -265,7 +326,7 @@ require_once '../public/function.php';
                     break;
             }
             ?>
-            
+            ReanderMainMenu();
             updateFirstListView();
         });
     </script>