From f6b1abd9a4f08fa7c2a5057ec768622f52209b71 Mon Sep 17 00:00:00 2001
From: Hwa <hwahe.cs@gmail.com>
Date: Tue, 14 Sep 2021 00:42:59 +0800
Subject: [PATCH] add animation for modal, improve controls UX

---
 css/style.css | 8 ++++++++
 js/script.js  | 7 +++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 85bc436..8acd14a 100644
--- 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
index b015981..c56ff62 100644
--- 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: [