feat: 默认展示第一个字母的课程

templates/list.html

@@ -41,7 +41,7 @@
       font-weight: 300;
     }
 
-    .num-info-active{
+    .num-info.active{
       font-family: 'Noto Serif SC', serif;
       font-weight: 700;
     }
@@ -355,15 +355,23 @@
           </div>
 
           <div id="collapseOne" class="collapse {{'show' if has_course or ept else ''}}" data-parent="#accordion">
-            <div class="card-body">
-            {% for k, courses in all_courses_abc.items() %}
-              <h5>{{k}}</h5>
-              {% for c, count in courses %}
-              <span class="cate {{'selected' if c==course else ''}}">
-                <a href="?course={{'' if c==course else c}}#part2">{{c}}</a>
-                <span class="count">({{count}})</span>
-              </span>
-              {% endfor %}
+            <div class="card-body all-courses">
+              <div class="cate-btns">
+                <button class="btn btn-link px-1 num-info" data-target="all">全部</button>
+                {% for k in all_courses_abc %}
+                <button class="btn btn-link px-1 num-info" data-target="course-{{k}}">{{k}}</button>
+                {% endfor %}
+              </div>
+              {% for k, courses in all_courses_abc.items() %}
+              <div class="cate-group" data-key="course-{{k}}">
+                <h5>{{k}}</h5>
+                {% for c, count in courses %}
+                <span class="cate {{'selected' if c==course else ''}}">
+                  <a href="?course={{'' if c==course else c}}#part2">{{c}}</a>
+                  <span class="count">({{count}})</span>
+                </span>
+                {% endfor %}
+              </div>
             {% endfor %}
             </div>
           </div>
@@ -441,11 +449,11 @@
           <small>@{{'匿名用户' if p.anon else p.author}} | {{p.create_date}}</small>
           <div class="num-infos">
             <button class="btn btn-link" id="like-{{p.id}}" onclick="like('{{p.id}}')">
-              <span class="num-info {{'num-info-active' if p.is_liked() else ''}}">好评(<span>{{p.like_num}}</span>)</span>
+              <span class="num-info {{'active' if p.is_liked() else ''}}">好评(<span>{{p.like_num}}</span>)</span>
             </button>
             <span>
               <a href="{{p.id}}/download?v={{ipfs_version}}" target="_blank" class="btn btn-link px-0" id="download-{{p.id}}">
-                <span class="num-info {{'num-info-active' if p.is_downloaded() else ''}}">去下载({{p.down_num}})</span>
+                <span class="num-info {{'active' if p.is_downloaded() else ''}}">去下载({{p.down_num}})</span>
               </a>
               <button type="button" class="btn btn-link px-0 dropdown-toggle dropdown-toggle-split" id="downloadDropdownMenuReference" data-toggle="dropdown" data-reference="parent">
                 <span class="sr-only">Toggle Dropdown</span>
@@ -497,7 +505,7 @@
 <script>
   function like(toot) {
     var method = 'POST';
-    if ($(`#like-${toot} .num-info`).hasClass("num-info-active")) {
+    if ($(`#like-${toot} .num-info`).hasClass("active")) {
       method = 'DELETE'
     }
     $.ajax({
@@ -505,7 +513,7 @@
       url: toot + '/like',
       success: (result, status, xhr) => {
         $(`#like-${toot} > span > span`).text(result);
-        $(`#like-${toot} > span`).toggleClass("num-info-active");
+        $(`#like-${toot} > span`).toggleClass("active");
       },
       error: (xhr, status, error) => {
         alert(xhr.status + ' ' + xhr.statusText);
@@ -529,6 +537,18 @@
       }
     });
 
+    $('.cate-btns .btn').click(function() {
+      $('.cate-group').hide();
+      $('.cate-btns .btn').removeClass('active');
+      $(this).addClass('active');
+      var target = $(this).data('target');
+      if(target == 'all')
+        $('.all-courses .cate-group').show();
+      else
+        $(`.all-courses .cate-group[data-key="${target}"]`).show();
+    });
+    $('.all-courses .cate-btns .btn').eq(1).click();
+
     $('[data-toggle="popover"]').popover({
         html: true,
         placement: "top",