update book.html

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+# 0.1.5
+
++ update book.html
+
 # 0.1.4
 
 + refactor book.js, options.js

book.html

@@ -6,9 +6,10 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0"
     />
+    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap-reboot.css" />
     <link rel="stylesheet" href="vendor/@buuug7/simplify-button/index.css" />
+    <link rel="stylesheet" href="vendor/@buuug7/simplify-form/index.css" />
     <link rel="stylesheet" href="vendor/utilities-css/dist/utilities-css.css" />
-    <link rel="stylesheet" href="main.css" />
     <title>Book</title>
     <style>
       .bg-v1 {
@@ -57,7 +58,6 @@
         position: relative;
         display: flex;
         align-items: center;
-        font-size: 1.2rem;
         padding: 0.5rem 0;
       }
 
@@ -66,14 +66,11 @@
       }
 
       .word > a {
-        display: inline-flex;
-        align-items: center;
         text-decoration: none;
-        height: 30px;
       }
 
-      .word > input[type="checkbox"] {
-        margin-bottom: -2px;
+      .word .form-check.inline {
+          margin-right: 0;
       }
 
       .grid-column-2 {

book.js

@@ -38,18 +38,20 @@ function HeaderLeft({
       fontSize: "1.1rem"
     }
   }, "\u751F\u8BCD\u672C ", `(${words.length})`), /*#__PURE__*/React.createElement("div", {
-    className: "translate-setting display-flex align-items-center mx-1 "
+    className: "form-check translate-setting mx-1 "
   }, /*#__PURE__*/React.createElement("label", {
-    className: "label"
+    className: "form-check-label"
   }, "use google translate"), /*#__PURE__*/React.createElement("input", {
+    className: "form-check-input",
     type: "checkbox",
     checked: translator,
     onChange: translateChangeHandler
   })), /*#__PURE__*/React.createElement("div", {
-    className: "toggle-view display-flex align-items-center ml-2 mx-1"
+    className: "form-check toggle-view ml-2 mx-1 "
   }, /*#__PURE__*/React.createElement("label", {
-    className: "nowrap"
+    className: "form-check-label"
   }, "toggle view"), /*#__PURE__*/React.createElement("input", {
+    className: "form-check-input",
     type: "checkbox",
     onChange: () => {
       __q(".word-list").classList.toggle("grid-column-2");
@@ -77,7 +79,7 @@ function HeaderRight({
     });
   };
 
-  const outputHandler = () => {
+  const exportHandler = () => {
     getWords().then(words => {
       if (words.length === 0) {
         sendNotification(`There is no collected words for export!`);
@@ -108,8 +110,8 @@ function HeaderRight({
     onClick: deleteHandler
   }, buttonText), /*#__PURE__*/React.createElement("button", {
     className: "btn small nowrap primary ml-2",
-    onClick: outputHandler
-  }, "output"));
+    onClick: exportHandler
+  }, "export"));
 }
 
 function Header({
@@ -144,11 +146,14 @@ function Word({
 
   return /*#__PURE__*/React.createElement("div", {
     className: "word"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-check inline"
   }, /*#__PURE__*/React.createElement("input", {
+    className: "form-check-input",
     type: "checkbox",
     checked: !!word.checked,
     onChange: onChangeHandler
-  }), /*#__PURE__*/React.createElement("a", {
+  })), /*#__PURE__*/React.createElement("a", {
     href: detailLink,
     className: "ml-2 word-text",
     target: "_blank"

gulpfile.js

@@ -10,7 +10,9 @@ const packageMeta = require("./package.json");
  */
 function copyDependencies() {
   const srcFiles = [
+    "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
     "node_modules/@buuug7/simplify-button/index.css",
+    "node_modules/@buuug7/simplify-form/index.css",
     "node_modules/utilities-css/dist/utilities-css.css",
     "node_modules/react/umd/react.production.min.js",
     "node_modules/react-dom/umd/react-dom.production.min.js",
@@ -25,15 +27,14 @@ const filesOfZip = [
   "background.js",
   "book.html",
   "book.js",
+  "CHANGELOG.md",
   "lib.js",
-  "main.css",
   "manifest.json",
   "options.html",
   "options.js",
   "popup.html",
   "popup.js",
   "README.md",
-  "CHANGELOG.md",
 ];
 
 /**

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "英语生词本(English Vocabulary Book)",
   "description": "一个 Chrome 扩展，可以将不熟悉的英语单词收集到我的生词本中，收集的单词以后可以用来复习和记忆。",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "manifest_version": 3,
   "background": {
     "main": ["lib.js"],

options.html

@@ -6,9 +6,9 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0"
     />
+    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap-reboot.css" />
     <link rel="stylesheet" href="vendor/@buuug7/simplify-button/index.css" />
     <link rel="stylesheet" href="vendor/utilities-css/dist/utilities-css.css" />
-    <link rel="stylesheet" href="main.css" />
     <title></title>
   </head>
   <body>