🎈 perf: Performance & Responsive UI

- 使计分UI成为响应式 - 改进了加载性能 - 一点细节 Issue #16
Minemetero · Jun 23, 2024 · 9344881 · 9344881
1 parent a5e7cad
commit 9344881
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 14 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -52,7 +52,7 @@ The subject contains a brief description of the change.
 
 #### footer
 Footer.  
-The footer should contain any information about major changes and is also the location to reference the GitHub Issue that this commit closes.  
+The footer should contain information about major changes and is also the location to reference the GitHub Issue that this commit closes.  
 
 ## Hint
 - Use [Prettier](https://prettier.io) to format your code.

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -68,6 +68,9 @@ s-text-field {
     display: block;
 }
 
+#playerListTitle {
+    margin: 10px;
+}
 .player-list ul, #playerScoreList, #matchOrderList, #historyList {
     list-style: none;
     padding: 0;
@@ -114,6 +117,13 @@ label {
 .game-board:not(.active) {
     display: none;
 }
+
+@media screen and (max-width: 700px) {
+    .game-board {
+        flex-direction: column;
+    }
+}
+
 .game-board>div {
     flex: 1;
     display: flex;

diff --git a/assets/js/ui.js b/assets/js/ui.js
@@ -1,13 +1,13 @@
 
 document.addEventListener('DOMContentLoaded', () => { // 虽然但是，onclick：？
-    e_toggleTheme(readConfig('theme', 'auto'));
     setTimeout(function () { // 等Sober执行完
         document.getElementById('main').style.visibility = 'visible';
         document.getElementById('top-bar').style.visibility = 'visible';
         hideLoading();
     }, 500);
     currentLanguage = readConfig('language', 'en-US');
     document.documentElement.lang = currentLanguage;
+    e_toggleTheme(readConfig('theme', 'auto'));
     let langList = getLanguageList();
     let languageMenuEl = document.getElementById('language-menu');
     langList.forEach(function(currentValue) {

diff --git a/docs/CONTRIBUTING.zh-CN.md b/docs/CONTRIBUTING.zh-CN.md
@@ -46,14 +46,14 @@ Fork 存储库。
 | 🐳 chore    | 改变构建流程、或者增加依赖库、工具等               |
 | ↩ revert    | 回滚到上一个版本                                  |
 
-#### 主题
-主题。  
-该主题包含对更改的简明描述。  
+#### 标题
+标题。  
+该标题包含对更改的简明描述。  
 
 #### 页脚
 **可选。**  
 页脚。  
-页脚应包含有关重大更改的任何信息，并且也是引用此提交关闭的 GitHub Issue 的位置。  
+页脚应包含有关重大更改的信息，并且也是引用此提交关闭的 GitHub Issue 的位置。  
 
 ## 提示
 - 使用 [Prettier](https://prettier.cn) 格式化您的代码。  

diff --git a/index.html b/index.html
@@ -5,6 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title data-lang="ui.title">Table Tennis Counter</title>
     <link rel="stylesheet" href="./assets/css/styles.css" />
+    <!-- 既然使用defer了，就把JS放到前面引入，让浏览器早点开始加载，提高加载速度 -->
+    <!-- 引入Sober界面库 -->
+    <!-- 要让sober的引入在最前面，这样sober才能最先执行 -->
+    <script defer src="https://unpkg.com/sober/dist/sober.min.js"></script>
+    <script defer src="./assets/js/utils.js"></script>
+    <script defer src="./assets/js/lang.js"></script>
+    <script defer src="./assets/js/script.js"></script>
+    <script defer src="./assets/js/ui.js"></script>
 </head>
 <body>
     <s-page id="page" theme="auto">
@@ -75,7 +83,7 @@
                     </s-text-field>
                 </div>
                 <div class="player-list" id="playerListGroup">
-                    <h2 data-lang="ui.setup.playerListHint"></h2>
+                    <h2 id="playerListTitle" data-lang="ui.setup.playerListHint"></h2>
                     <ul id="playerList"></ul>
                 </div>
                 <!-- Start Game -->
@@ -119,12 +127,5 @@ <h2 data-lang="ui.gameBoard.matchOrder"></h2>
             </s-snackbar>
         </div>
     </s-page>
-
-    <script defer src="./assets/js/utils.js"></script>
-    <script defer src="./assets/js/lang.js"></script>
-    <script defer src="./assets/js/script.js"></script>
-    <script defer src="./assets/js/ui.js"></script>
-    <!-- 引入Sober界面库 -->
-    <script src="https://unpkg.com/sober/dist/sober.min.js"></script>
 </body>
 </html>