适配移动端显示

KyleBing · Apr 28, 2024 · 64c5918 · 64c5918
1 parent ddb784f
commit 64c5918
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### v2.68 `2024-04-28`
+- 移动端界面适配
+
 ### v2.67 `2024-03-12`
 - 添加从头重打按钮
 - 顶部操作按钮顺序调整

diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Roseo Maple Type Pad
 `记录添加文章种类` 》`添加 CET 英文单词输入，并显示释义` 》`汉字时打字时不显示输入的编码` 》
 `v2.0 拆分 js 文件到模块，采用 require.js AMD 形式加载` 》`实现自动发文功能` 》`实现重复发文` 》`重复时乱序当前段` 》
 `无网络的时候也能使用` 》`自定义发文内容` 》 `添加大单字模式，更好的专注于单字练习` 》 `分组显示所有文章列表` 》 `添加大量英文单词` 》 
-`新的成绩展示样式` 》  `统计单一类别的所有跟打数据` 》 `添加汉语词条跟打类型`
+`新的成绩展示样式` 》  `统计单一类别的所有跟打数据` 》 `添加汉语词条跟打类型` 》 `显示跟打统计图表` 》 `优化移动端显示`
 
 
 ## 二、使用说明
@@ -66,7 +66,7 @@ Roseo Maple Type Pad
 
 ## 五、历史
 
-`2020.05.17` ~ `2022.11.11`
+`2020.05.17` ~ `2024.04.28`
 
 [各历史版本截图记录 >>](https://github.com/KyleBing/typepad/discussions/18)
 

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>玫枫跟打器 （Roseo Maple TypePad）</title>
    <link rel="shortcut icon" href="img/logo.png" type="image/png">
-   <link rel="stylesheet" href="scss/typepad.css?v=2.67">
+   <link rel="stylesheet" href="scss/typepad.css?v=2.68">
 </head>
 <body>
 
@@ -53,8 +53,9 @@
 <div id="app">
 
    <!--侧边信息栏-->
-   <div class="side-menu hidden-sm">
-      <div class="tool-bar jc-space-between">
+   <div class="side-menu">
+      <!--toolbar-->
+      <div class="tool-bar jc-space-between hidden-sm">
          <div class="btn-group toolbar-info">
             <div class="btn" onclick="engine.pause()" title="离开编辑区">暂停</div>
             <div class="btn" onclick="engine.resume()" title="激活编辑区">继续</div>
@@ -64,7 +65,7 @@
       </div>
 
       <!--speed-->
-      <div class="speed-info info-panel">
+      <div class="speed-info speed-info-pc info-panel hidden-sm">
          <!--speed-->
          <div class="speed">--</div>
          <!--statistic-->
@@ -85,7 +86,7 @@
       </div>
 
       <!--TIMER-->
-      <div class="time-info info-panel">
+      <div class="time-info info-panel hidden-sm">
          <div class="time number">
             <div class="minute">00</div>:<div class="second">00</div>
          </div>
@@ -198,7 +199,7 @@
 
 
       <!--SCORE CHART-->
-      <div class="score-statistics-container info-panel">
+      <div class="score-statistics-container info-panel hidden-sm">
          <div class="title">击键
             <div onclick="engine.clearScoreOf('HitRate')" class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
          </div>
@@ -219,7 +220,7 @@
       </div>
 
       <!--SPEED CHART-->
-      <div class="score-statistics-container info-panel">
+      <div class="score-statistics-container info-panel hidden-sm">
          <div class="title">速度 × 10
             <div onclick="engine.clearScoreOf('Speed')"  class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
          </div>
@@ -242,7 +243,7 @@
       </div>
 
       <!--CODE LENGTH CHART-->
-      <div class="score-statistics-container info-panel">
+      <div class="score-statistics-container info-panel hidden-sm">
          <div class="title">码长
             <div onclick="engine.clearScoreOf('CodeLength')"  class="btn-img ml-1"><img src="./img/reset.png" alt="reset"></div>
          </div>
@@ -262,7 +263,7 @@
 
 
       <!--SCORE SUMMERY-->
-      <div class="score-info info-panel">
+      <div class="score-info info-panel" >
          <div class="title">单字</div>
          <div class="score-info-item-group">
             <div class="score-info-item sum-words">
@@ -324,7 +325,7 @@
 
 
       <!--ABOUT INFO-->
-      <div class="info-panel">
+      <div class="info-panel hidden-sm">
          <div class="logo">
             <img src="img/logo-inline.png" alt="">
             <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typepad" >GitHub</a>)</h1>
@@ -336,7 +337,8 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
       </div>
 
-      <div class="info-panel">
+      <!--ShortCut-->
+      <div class="info-panel hidden-sm">
          <div class="key-info-item">
             <div class="binding-key"><kbd>⌘</kbd>+<kbd>J</kbd></div>
             <div>下一段</div>
@@ -358,7 +360,7 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
             <div>暂停</div>
          </div>
       </div>
-      <div class="info-panel">
+      <div class="info-panel hidden-sm">
          <div class="key-info-item">
             <div class="binding-key"><kbd>F1</kbd></div>
             <div>上一段</div>
@@ -378,14 +380,14 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
       </div>
 
       <!--KEYMAP-->
-      <div class="info-panel">
+      <div class="info-panel hidden-sm">
 <!--         <p>更新版本之后，可能会显示不正常，请按 <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>R</kbd> 刷新页面。</p>-->
          <p>光标离开输入区自动暂停，进入输入状态自动恢复计时。</p>
          <p>快捷键只在编辑区内生效</p>
       </div>
 
       <!--HELP INFO: NOTICE-->
-      <div class="info-panel">
+      <div class="info-panel hidden-sm">
          <p>如果你想用来练习英文单词，请下载拥有完整 <b>CET4/6</b>，<b>托福</b>等单词的版本：
             <a href="https://github.com/KyleBing/typepad/releases/tag/v2.58">v2.58</a>
          </p>
@@ -440,18 +442,13 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
             <input type="radio" onchange="engine.changePerCount()" name="count" id="count10" value="10"><label class="btn" for="count10">10</label>
             <input type="radio" onchange="engine.changePerCount()" name="count" id="count15" value="15"><label class="btn" for="count15">15</label>
             <input type="radio" onchange="engine.changePerCount()" name="count" id="count20" value="20"><label class="btn" for="count20">20</label>
-            <input type="radio" onchange="engine.changePerCount()" name="count" id="count50" value="50"><label class="btn hidden-sm" for="count50">50</label>
-            <input type="radio" onchange="engine.changePerCount()" name="count" id="count100" value="100"><label class="btn hidden-sm" for="count100">100</label>
-            <input type="radio" onchange="engine.changePerCount()" name="count" id="count200" value="200"><label class="btn hidden-sm" for="count200">200</label>
-            <input type="radio" onchange="engine.changePerCount()" name="count" id="count500" value="500"><label class="btn hidden-sm" for="count500">500</label>
-            <input type="radio" onchange="engine.changePerCount()" name="count" id="all" value="ALL"><label class="btn hidden-sm" for="all">全</label>
+            <input type="radio" onchange="engine.changePerCount()" name="count" id="count50" value="50"><label class="btn" for="count50">50</label>
+            <input type="radio" onchange="engine.changePerCount()" name="count" id="count100" value="100"><label class="btn" for="count100">100</label>
+            <input type="radio" onchange="engine.changePerCount()" name="count" id="count200" value="200"><label class="btn" for="count200">200</label>
+            <input type="radio" onchange="engine.changePerCount()" name="count" id="count500" value="500"><label class="btn" for="count500">500</label>
+            <input type="radio" onchange="engine.changePerCount()" name="count" id="all" value="ALL"><label class="btn" for="all">全</label>
          </div>
 
-         <!--手机端显示-->
-         <div class="btn-group hidden-big">
-            <div class="btn number"><span class="btn-minute">00</span>:<span class="btn-second">00</span></div>
-            <div class="btn"><span class="btn-speed"></span> 字/分</div>
-         </div>
 
          <!--极简模式-->
          <div class="btn-group">
@@ -460,7 +457,29 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
       </div>
 
 
-<!--      TYPE PAD-->
+      <!--手机端速度-->
+      <div class="speed-info speed-info-mobile info-panel hidden-big">
+         <!--speed-->
+         <div class="speed">--</div>
+         <!--statistic-->
+         <div class="statistic">
+            <div class="statistic-item">
+               <p class="title count-key-backspace">--</p>
+               <p class="desc small">回删</p>
+            </div>
+            <div class="statistic-item">
+               <p class="title count-key-length">--</p>
+               <p class="desc small">码长</p>
+            </div>
+            <div class="statistic-item">
+               <p class="title count-key-rate">--</p>
+               <p class="desc small">击键</p>
+            </div>
+         </div>
+      </div>
+
+
+      <!--TYPE PAD-->
       <div class="type-pad">
          <div class="tool-bar">
             <div class="btn-group">
@@ -486,7 +505,7 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
       </div>
 
-      <!--跟打记录 - 新-->
+      <!-- 跟打记录 - 新 -->
       <div class="record-container hidden">
          <!--            <div class="record-item">-->
          <!--               <div class="speed"></div>-->
@@ -497,7 +516,7 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          <!--            </div>-->
       </div>
 
-      <!--成绩列表-->
+      <!-- 成绩列表 -->
       <div class="table-container">
          <table class="table">
             <thead>
@@ -512,7 +531,7 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
                <th>类型</th>
                <th>文章</th>
                <th class="hidden-sm">开始时间</th>
-               <th>操作 <a class="link hidden-sm" onclick="engine.clear(this)">清除</a></th>
+               <th>操作 <a class="link" onclick="engine.clear(this)">清除</a></th>
             </tr>
             </thead>
             <tbody>
@@ -531,7 +550,7 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
 </div>
 
 <script src="js/require_v2.3.6.js"></script>
-<script src="js/typepad.js?v=2.67"></script>
+<script src="js/typepad.js?v=2.68"></script>
 
 <script>
    setTimeout(() => {

diff --git a/js/class/Engine.js b/js/class/Engine.js
@@ -1031,31 +1031,37 @@ define(
 
          // SPEED
          if (!this.isStarted && !this.isFinished) {
-            $('.speed').innerText               = '--';
-            $('.btn-speed').innerText           = '--';
+            $('.speed-info-pc .speed').innerText               = '--';
+            $('.speed-info-mobile .speed').innerText               = '--';
             $('.count-key-rate').innerText      = '--';
+            $('.speed-info-mobile .count-key-rate').innerText      = '--';
             $('.count-key-length').innerText    = '--';
+            $('.speed-info-mobile .count-key-length').innerText    = '--';
             $('.count-key-backspace').innerText = '--';
+            $('.speed-info-mobile .count-key-backspace').innerText = '--';
          } else {
             this.record.speed = Number((this.correctWordsCount / this.duration * 1000 * 60).toFixed(2));
-            $('.speed').innerText = this.record.speed;
-            $('.btn-speed').innerText = this.record.speed;
+            $('.speed-info-pc .speed').innerText = this.record.speed;
+            $('.speed-info-mobile .speed').innerText = this.record.speed;
 
             // key count
             let allKeyCount = this.keyCount.all - this.keyCount.function;
             this.record.hitRate = Number((allKeyCount / this.duration * 1000).toFixed(2));
-            $('.count-key-rate').innerText = this.record.hitRate;
+            $('.speed-info-pc .count-key-rate').innerText = this.record.hitRate;
+            $('.speed-info-mobile .count-key-rate').innerText = this.record.hitRate;
 
             // code length
             if (this.correctWordsCount) {
                this.record.codeLength = Number((allKeyCount / this.correctWordsCount).toFixed(2));
             } else {
                this.record.codeLength = 0;
             }
-            $('.count-key-length').innerText = this.record.codeLength;
+            $('.speed-info-pc .count-key-length').innerText = this.record.codeLength;
+            $('.speed-info-mobile .count-key-length').innerText = this.record.codeLength;
 
             // backspace count
-            $('.count-key-backspace').innerText = this.keyCount.backspace;
+            $('.speed-info-pc .count-key-backspace').innerText = this.keyCount.backspace;
+            $('.speed-info-mobile .count-key-backspace').innerText = this.keyCount.backspace;
 
             // StandAlone Mode Speed Info
             $('.standalone-speed-info .speed').innerText = this.record.speed;

diff --git a/js/typepad.js b/js/typepad.js
@@ -73,7 +73,7 @@ require(['ArticleType', 'Article', 'Engine', 'Editor'],
       // Service Worker
       if ('serviceWorker' in navigator){
          navigator.serviceWorker
-            .register('/tools/typepad/typepad-sw.js?v=2.67')
+            .register('/tools/typepad/typepad-sw.js?v=2.68')
             .then(()=>{
                console.log('Server Worker has registered');
             })

diff --git a/scss/mixin/_black.scss b/scss/mixin/_black.scss
@@ -49,7 +49,7 @@ body.black {
     }
   }
 
-  .speed-info {
+  .speed-info, .speed-info-mobile {
     .speed {
       color: white;
       border-color: $black-color-border;

diff --git a/scss/mixin/_button.scss b/scss/mixin/_button.scss
@@ -214,3 +214,10 @@ label.btn{
   padding-right: $btn-padding-lr - 2 !important;
 }
 
+
+// MOBILE
+@media (max-width: $separate-mobile) {
+  .btn-group{
+    margin-bottom: 5px;
+  }
+}
diff --git a/scss/mixin/_info.scss b/scss/mixin/_info.scss
@@ -181,3 +181,29 @@ $kbd-text: black;
     margin-bottom: 0;
   }
 }
+
+
+// MOBILE
+@media (max-width: $separate-mobile) {
+  .info-panel{
+    align-items: center;
+    flex-flow: column nowrap;
+    display: flex;
+    justify-content: center;
+    width: 48.5%;
+    >*{
+      width: 100%;
+    }
+  }
+  .speed-info-mobile{
+    width: 100%;
+    margin-top: 5px;
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    .speed{
+      border-bottom: none;
+    }
+  }
+}
+