Merge pull request #14 from webduinoio/bug/5899

Bug/5899

Author: shengyuan

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- 平板開啟萬用遙控器時，訊息傳送輸入框消失
 - 平板或手機旋轉後，刷新萬用遙控器
 
 ### Added

css/main.css

@@ -524,4 +524,12 @@ body {
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
+}
+
+input {
+  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
+  -webkit-appearance: none; 
+  /* FireFox */
+  -moz-appearance: none; 
+  appearance: none;
 }

index-en.html

@@ -6,39 +6,28 @@
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
     />
-    <meta name="author" content="oxxo.studio" />
-    <meta name="copyright" content="oxxo.studio" />
+    <meta name="author" content="webduino" />
+    <meta name="copyright" content="webduino" />
     <title>Webduino Remote Control</title>
 
     <meta
       name="description"
-      content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。"
+      content="Webduino Remote Control,loved by teachers and students, it can send Internet broadcast signals through the joystick and multiple buttons, and easily remote control bicycles and control IoT devices!"
     />
     <meta
       itemprop="description"
-      content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。"
-    />
-    <meta
-      itemprop="image"
-      content="https://www.oxxostudio.tw/webduino-remote/media/snapshot.jpg"
+      content="Webduino Remote Control,loved by teachers and students, it can send Internet broadcast signals through the joystick and multiple buttons, and easily remote control bicycles and control IoT devices!"
     />
+    <meta itemprop="image" content="" />
     <meta
       property="og:description"
-      content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。"
-    />
-    <meta property="og:title" content="Webduino 遙控器" />
-    <meta
-      property="og:url"
-      content="https://www.oxxostudio.tw/webduino-remote/index.html"
-    />
-    <meta
-      property="og:image"
-      content="https://www.oxxostudio.tw/webduino-remote/media/snapshot.jpg"
-    />
-    <link
-      rel="canonical"
-      href="https://www.oxxostudio.tw/webduino-remote/index.html"
+      content="Webduino Remote Control,loved by teachers and students, it can send Internet broadcast signals through the joystick and multiple buttons, and easily remote control bicycles and control IoT devices!"
     />
+    <meta property="og:title" content="Webduino Remote Control" />
+    <meta property="og:url" content="https://webduino.io" />
+    <meta property="og:image" content="" />
+    <link rel="icon" href="webduino.ico" type="image/x-icon" />
+    <link rel="canonical" href="https://webduino.io/" />
 
     <link rel="stylesheet" href="css/main.css" />
   </head>

js/main-en.js

@@ -167,7 +167,7 @@
     let m = self.getAttribute('m');
     self.value = list[m];
     self.addEventListener('input', () => {
-      window.history.pushState({}, 0, urlOrigin);
+      window.history.pushState({}, 0, `${urlOrigin}${urlPath}`);
       list[m] = self.value;
       if (btnObj[m]) {
         btnObj[m].innerHTML = `<span>${self.value}</span>`;
@@ -378,4 +378,23 @@
     kebbi.addEventListener('touchstart', target);
   }
 
+  // 處理中間圖片跟隨視窗大小移動位置
+  function screenRotate() {
+    const kebbi = document.getElementById('svgKebbi');
+    const circle = document.querySelector('.circle');
+    const ww = content.offsetWidth;
+    const wh = content.offsetHeight;
+    const ox = (ww - kebbi.offsetWidth) / 2;
+    const oy = (wh * 0.8 - kebbi.offsetHeight) / 2;
+    kebbi.style.left = `${ox}px`;
+    kebbi.style.top = `${oy}px`;
+    circle.style.width = `${ww * 0.4}px`;
+    circle.style.height = `${ww * 0.4}px`;
+    circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
+    circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  }
+
+  window.addEventListener('resize', screenRotate);
+  screenRotate();
+
 }();

js/main.js

@@ -167,7 +167,7 @@
     let m = self.getAttribute('m');
     self.value = list[m];
     self.addEventListener('input', () => {
-      window.history.pushState({}, 0, urlOrigin);
+      window.history.pushState({}, 0, `${urlOrigin}${urlPath}`);
       list[m] = self.value;
       if (btnObj[m]) {
         btnObj[m].innerHTML = `<span>${self.value}</span>`;