add animation for modal, improve controls UX

whaliendev · Sep 13, 2021 · f6b1abd · f6b1abd
1 parent 8493e53
commit f6b1abd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -142,6 +142,14 @@
 .x-modal {
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.26);
+  opacity: 0.1;
+  transform: translateY(-90px);
+  transition: all 0.3s cubic-bezier(0.2, -0.25, 0.7, 1.25);
+}
+
+.x-overlay.x-open .x-modal{
+  transform: translateY(0);
+  opacity: 1;
 }
 
 .x-modal header {

diff --git a/js/script.js b/js/script.js
@@ -224,13 +224,15 @@ function bindEvents() {
     updateAllScores();
   });
 
-  // 全选/全不选，我也不知道这个意义是啥，但是李叶加了
+  // 全选/全不选，我也不知道这个意义是啥，但是李叶大大加了
   $('#x-sel-all').click(() => {
     if ($('input[name="x-course-select"]:checked').length === 0) {
       $('input[name="x-course-select"]').prop('checked', true);
+      $('input[name="x-selbox"]').prop('checked', true);
       $('#x-sel-all').text('全不选');
     } else {
       $('input[name="x-course-select"]').prop('checked', false);
+      $('input[name="x-selbox"]').prop('checked', false);
       $('#x-sel-all').text('全选');
     }
     updateAllScores();
@@ -253,6 +255,7 @@ function bindEvents() {
       } else {
         $(this).find('td:eq(3) input:checkbox').prop('checked', false);
       }
+      $('input[name="x-selbox"]').prop('checked', true);
     });
     updateAllScores();
   });
@@ -595,7 +598,7 @@ function drawScoreTrendingPlot() {
         'cumGPA',
         'cumScore'
       ],
-      sourceHeader: false, 
+      sourceHeader: false,
       source: recordDataset
     },
     xAxis: [