Root window layout unit switch to lg

index.html

@@ -10,7 +10,7 @@
 
   <!-- Bootstrap -->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
+  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
 
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -23,6 +23,10 @@
       font-family: "7bar";
       src: url("./digital-7.ttf");
     }
+
+    body {
+      background-color: #d4d0c8;
+    }
   </style>
 </head>
 

package-lock.json

@@ -524,6 +524,14 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "1.1.3"
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "http://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
@@ -2067,6 +2075,88 @@
         "warning": "3.0.0"
       }
     },
+    "jss-camel-case": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.0.0.tgz",
+      "integrity": "sha512-XAYa7JpGkLdlLgEfuzSQSVONRzSVvv4Tvyv5H8hLmJuHeFHTWwVrJrW1Cg/buED3izXKwTU2KBGpeXjIR5Eaew=="
+    },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.1.0.tgz",
+      "integrity": "sha512-WTxmNipgj0V8kr8gc8Gc6Et7uQZH60H7FFNG9zZHjR6TPJoj7TDK+/EBxwRHtCRQD4B8RTwoa7MyEKD4ReKfXw=="
+    },
+    "jss-extend": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.1.0.tgz",
+      "integrity": "sha512-bSNwLDOZnMxABsUqvq2lwLJ/MMFs8ThligiLZBOUeyoZCoHqAbcTghvunk2QDVxiOhRTDS57VvhXVJZETW58Bw==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-preset-default": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.0.1.tgz",
+      "integrity": "sha512-ZBj1ifZAPDn8iiC9PuB1jDCm/I0Bn53UNL9NHBgOY6AyMorDPgEb3IRjt6H+OHKwnEuCHw8tC/e3/q4I4DgTIw==",
+      "requires": {
+        "jss-camel-case": "6.0.0",
+        "jss-compose": "5.0.0",
+        "jss-default-unit": "8.0.2",
+        "jss-expand": "5.1.0",
+        "jss-extend": "6.1.0",
+        "jss-global": "3.0.0",
+        "jss-nested": "6.0.1",
+        "jss-props-sort": "6.0.0",
+        "jss-template": "1.0.0",
+        "jss-vendor-prefixer": "7.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-template": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.0.tgz",
+      "integrity": "sha512-NFAgcAp8V2fUxffWGGQ5zAolJq3neAvNjmWIwSmy9M6bmXTK9rnTu0fBlAcUh0ALC94B596/2TRphdkE5WRECQ==",
+      "requires": {
+        "warning": "3.0.0"
+      }
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "0.3.8"
+      }
+    },
     "keycode": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
@@ -2133,12 +2223,12 @@
       }
     },
     "mammoth": {
-      "version": "git+file:///home/forks/work/mammoth-lib.git#85b7314b3312aecc596c2e4195be4e1ec7324ce3",
+      "version": "git+file:///home/forks/work/mammoth-lib.git#9b732d678717d2ceb783a1d166c73cab81cc7c36",
       "requires": {
         "@types/chokidar": "1.7.4",
         "@types/history": "4.6.2",
         "@types/lodash-es": "4.17.0",
-        "@types/node": "8.5.5",
+        "@types/node": "8.5.7",
         "@types/react": "16.0.34",
         "@types/react-bootstrap": "0.31.9",
         "@types/react-dom": "16.0.3",
@@ -2150,6 +2240,7 @@
         "electron": "1.7.10",
         "history": "4.7.2",
         "jss": "9.5.0",
+        "jss-preset-default": "4.0.1",
         "lodash-es": "4.17.4",
         "react": "16.2.0",
         "react-bootstrap": "0.31.5",
@@ -2163,9 +2254,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "8.5.5",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.5.tgz",
-          "integrity": "sha512-JRnfoh0Ll4ElmIXKxbUfcOodkGvcNHljct6mO1X9hE/mlrMzAx0hYCLAD7sgT53YAY1HdlpzUcV0CkmDqUqTuA=="
+          "version": "8.5.7",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.7.tgz",
+          "integrity": "sha512-+1ZfzGIq8Y3EV7hPF7bs3i+Gi2mqYOiEGGRxGYPrn+hTYLMmzg+/5TkMkCHiRtLB38XSNvr/43aQ9+cUq4BbBg=="
         }
       }
     },
@@ -2291,7 +2382,7 @@
     },
     "nan": {
       "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/nan/download/nan-2.8.0.tgz",
       "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=",
       "optional": true
     },

src/main-view/container.tsx

@@ -16,7 +16,7 @@ function mainView(props: Props & Callbacks) {
   };
   return <Grid>
     <Row style={{ height: "calc(20vh - 50px)" }}>
-      <Col xs={3}>
+      <Col lg={3}>
         <div style={weightPanel}>0.00</div>
         <ButtonToolbar>
           <Button>启用称重</Button>
@@ -24,7 +24,7 @@ function mainView(props: Props & Callbacks) {
         </ButtonToolbar>
         <div>宰杀日期：<input /></div>
       </Col>
-      <Col xs={5} style={{ height: "15vh", flexWrap: "wrap", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+      <Col lg={5} style={{ height: "15vh", flexWrap: "wrap", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
         <Checkbox>打印条码</Checkbox>
         <Button>打印选中</Button>
         <Button>同步数据</Button>
@@ -33,7 +33,7 @@ function mainView(props: Props & Callbacks) {
         <div style={{ flex: 1 }}></div>
         <div style={{ alignSelf: "flex-end" }}>屠宰顺序: 0 已宰头数: 0</div>
       </Col>
-      <Col xs={4}>
+      <Col lg={4}>
         <ButtonToolbar>
           <Button bsSize="large">掉猪</Button>
           <Button bsSize="large">删除选中</Button>
@@ -42,10 +42,10 @@ function mainView(props: Props & Callbacks) {
       </Col>
     </Row>
     <Row>
-      <Col xs={8}>
+      <Col lg={8}>
         <Row>
           <Panel style={{ height: "40vh" }} header="烫褪">
-            <Col xs={6} >
+            <Col lg={6} >
               <Table >
                 <thead>
                   <tr>
@@ -57,7 +57,7 @@ function mainView(props: Props & Callbacks) {
                 </thead>
               </Table>
             </Col>
-            <Col xs={6}>
+            <Col lg={6}>
               <ButtonToolbar>
                 <Button bsStyle="info">一级</Button>
                 <Button bsStyle="info">二级</Button>
@@ -68,7 +68,7 @@ function mainView(props: Props & Callbacks) {
         </Row>
         <Row>
           <Panel style={{ height: "40vh" }} header="毛剥">
-            <Col xs={6}>
+            <Col lg={6}>
               <Table>
                 <thead>
                   <tr>
@@ -80,7 +80,7 @@ function mainView(props: Props & Callbacks) {
                 </thead>
               </Table>
             </Col>
-            <Col xs={6}>
+            <Col lg={6}>
               <ButtonToolbar>
                 <Button>一级</Button>
                 <Button>二级</Button>
@@ -90,7 +90,7 @@ function mainView(props: Props & Callbacks) {
           </Panel>
         </Row>
       </Col>
-      <Col xs={4}>
+      <Col lg={4}>
         <Panel style={{ height: "calc(80vh + 20px)" }} header="记录">
           <Table>
             <thead>