feat(demo): update demo style

f2etw · May 20, 2017 · be3767f · be3767f
1 parent ee6677e
commit be3767f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/src/__test__/inapp.test.js b/src/__test__/inapp.test.js
@@ -95,6 +95,15 @@ describe('InApp', () => {
         expect(inapp.os).toBe('ios');
       }));
     });
+
+    it('android', () => {
+      _.forEach(_.concat(
+        MOBILE.SONY, MOBILE.ASUS, MOBILE.PIXEL, MOBILE.REDMI,
+      ), useragents => _.forEach(useragents, (useragent) => {
+        const inapp = new InApp(useragent);
+        expect(inapp.os).toBe('android');
+      }));
+    });
   });
 
   describe('device', () => {

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,12 @@
 body {
   font-family: sans-serif;
 }
+
+.container {
+  width: 100%;
+  max-width: 320px;
+}
+
+.p-3 {
+  margin-top: 3px;
+}
diff --git a/src/index.js b/src/index.js
@@ -23,26 +23,41 @@ class App extends Component {
 
     return (
       <div>
-        <div><input id="useragent" value={value} style={{ width: '100%' }} /></div>
-        <div>
-          <span className="input-group-button">
-            <button className="btn copy" data-clipboard-target="#useragent">
-              <Clippy />&nbsp;Copy UserAgent
-            </button>
-            <a className="btn" target="inapp" href={`https://github.com/f2etw/detect-inapp/issues/new?title=%5BUserAgent%5D&body=${encodeURIComponent(value)}`}>
-              <GitHub />&nbsp;Share
-            </a>
-          </span>
+        <div className="container">
+          <div><input id="useragent" value={value} style={{ width: '100%' }} /></div>
+          <div>
+            <span className="input-group-button">
+              <button className="btn copy" data-clipboard-target="#useragent">
+                <Clippy />&nbsp;Copy UserAgent
+              </button>
+              <a className="btn" target="inapp" href={`https://github.com/f2etw/detect-inapp/issues/new?title=%5BUserAgent%5D&body=${encodeURIComponent(value)}`}>
+                <GitHub />&nbsp;Share
+              </a>
+            </span>
+          </div>
         </div>
         <hr />
-        <div>os: {inapp.os}</div>
-        <div>browser: {inapp.browser}</div>
-        <div>isMobile(): {inapp.isMobile() ? 'true' : 'false'}</div>
+        <div className="container">
+          <div className="p-3 border position-relative">
+            {inapp.os}
+            <div className="border position-absolute right-0 top-0 p-1">inapp.os</div>
+          </div>
+          <div className="p-3 border position-relative">
+            {inapp.browser}
+            <div className="border position-absolute right-0 top-0 p-1">inapp.browser</div>
+          </div>
+          <div className="p-3 border position-relative">
+            {inapp.isMobile() ? 'true' : 'false'}
+            <div className="border position-absolute right-0 top-0 p-1">inapp.isMobile()</div>
+          </div>
+        </div>
         <hr />
-        <div>
-          <a className="github-button" href="https://github.com/f2etw/detect-inapp/issues" data-size="large" data-icon="octicon-issue-opened" aria-label="Issue f2etw/detect-inapp on GitHub">Issue</a>&nbsp;
-          <a className="github-button" href="https://github.com/f2etw/detect-inapp/fork" data-size="large" data-icon="octicon-repo-forked" aria-label="Fork f2etw/detect-inapp on GitHub">Fork</a>&nbsp;
-          <a className="github-button" href="https://github.com/f2etw/detect-inapp" data-size="large" data-icon="octicon-star" aria-label="Star f2etw/detect-inapp on GitHub">Star</a>
+        <div className="container">
+          <div>
+            <a className="github-button" href="https://github.com/f2etw/detect-inapp/issues" data-size="large" data-icon="octicon-issue-opened" aria-label="Issue f2etw/detect-inapp on GitHub">Issue</a>&nbsp;
+            <a className="github-button" href="https://github.com/f2etw/detect-inapp/fork" data-size="large" data-icon="octicon-repo-forked" aria-label="Fork f2etw/detect-inapp on GitHub">Fork</a>&nbsp;
+            <a className="github-button" href="https://github.com/f2etw/detect-inapp" data-size="large" data-icon="octicon-star" aria-label="Star f2etw/detect-inapp on GitHub">Star</a>
+          </div>
         </div>
       </div>
     );